今日头条APP案例开发Word格式.docx

资源描述

今日头条APP案例开发Word格式.docx

《今日头条APP案例开发Word格式.docx》由会员分享，可在线阅读，更多相关《今日头条APP案例开发Word格式.docx（22页珍藏版）》请在冰豆网上搜索。

今日头条APP案例开发Word格式.docx

1、注意meta声明:

metaname="

viewport"

content="

initial-scale=1.0,maximum-scale=1.0,user-scalable=no"

2、css格式化dom

*{margin:

0px;

padding:

font-size:

15px;

color:

#000000;

outline:

none;

}

body{background:

#FFFFFF;

div{overflow:

hidden;

a{text-decoration:

hover{text-decoration:

underline;

img{border:

3、头部代码编写

导入hui

下载hui最新版本解压后导入进项目。

制作头部导航及内部元素

1、一键改变ui的整体颜色:

打开hui.css搜索#3283FA替换为#D43D3D并保存立即可以看到效果。

2、完成头部布局

dom部分

DOCTYPEhtml>

html>

head>

metacharset="

utf-8"

title>

/title>

linktype="

text/css"

rel="

stylesheet"

href="

css/hui.css"

/head>

body>

divid="

HUI_Header"

divclass="

HUI_FL"

imgsrc="

img/logo.png"

width="

100"

/div>

topSearch"

spanclass="

HUI_IconsHUI_Icons_search"

style="

color:

#999999;

/span>

搜您想搜的<

HUI_Wrap"

scripttype="

text/javascript"

src="

js/hui.js"

/script>

/body>

/html>

css增加

#topSearch{width:

60%;

height:

30px;

background:

#F6F5F4;

border-radius:

3px;

float:

right;

margin:

7px8px0px0px;

line-height:

text-align:

left;

text-indent:

14px;

制作分类导航

dom及js

id="

topCate"

div>

ahref="

javascript:

changeCate（0）;

class="

topCateSed"

相关知识：

webview，参考手册：

实现步骤：

1、创建子窗口indexSub.html

2、在入口页嵌入子窗口（会使用plusReady事件）

3、将子页面的返回功能转交给入口页

入口页代码

hui.plusReady（function（）{

varsubView=hui.create（'

indexSub.html'

top'

87px'

，bottom:

0px'

}）;

//此处注意设置bottom

varself=plus.webview.currentWebview（）;

self.append（subView）;

子窗口代码

hi....

hui.Back=function（）{

varparentView=plus.webview.currentWebview（）.parent（）;

parentView.evalJS（'

hui.Back（）;

HOA介绍

HCoderOpenApi简称HOA是由提供的一套api数据源，提供了日常app开发学习过程中常用的数据源，适用于基于muihuih5+的app开发。

开放源地址:

项目实现过程

入口页js变化

varsubView;

subView=hui.create（'

88px'

bottom:

subView.evalJS（'

changeCate（'

+cateId+'

子页面完整代码

newsList"

HUI_MediaList1"

varpage=1,cate=0;

changeCate（0）;

hui.refresh（getNews）;

functionchangeCate（cateId）{cate=cateId;

getNews（）;

functiongetNews（）{

varhtml='

;

hui.centerLoading（）;

hui.get（

+page+'

cate='

+cate,

function（data）{

vararrNews=data.split（'

--hcSplitor--'

for（vari=0;

arrNews.length;

i++）{

varitemArr=arrNews[i].split（'

--hcListSplitor--'

html+='

li>

hui.open（\'

info.html\'

{},true,{id:

+itemArr[0]+'

HUI_MediaListImg"

+itemArr[1]+'

HUI_MediaListContent"

h1>

+itemArr[2]+'

/h1>

/li>

}

#newsList'

）.html（'

ul>

+html+'

/ul>

hui.centerLoading（true）;

hui.endRefresh（）;

function（e）{

hui.toast（'

获取新闻失败，请检查网络'

）;

新闻分类切换、上拉加载更多

本节内容

1、点击新闻分类切换不同的新闻列表。

2、上拉加载更多

核心js

page=1;

cate=cateId;

hui.scrollTop（0）;

hui.isLoadMoreIng=false;

getNewsList（）;

functiongetNewsList（）{

vararrItem=data.split（'

arrItem.length;

varitem=arrItem[i].split（'

{},true,{newsId:

+item[0]+'

img/lazy.png"

lazySrc="

+item[1]+'

HUI_Lazy"

+item[2]+'

hui.lazyLoadNow（）;

page++;

连接失败'

懒加载的使用

使用HUI来实现图片的懒加载是非常方便的，您只需要设置图片的预加载占位图及实际地址：

占位图"

图片的实际地址"

//js

hui.lazyLoad（className）与hui.lazyLoadNow（className）

hui.lazyLoad（）的参数为需要懒加载的图片的类属性，默认为HUI_Lazy。

懒加载组件会自动识别滚动条滚动事件，如果懒加载图片是动态追加进来的，在追加后使用hui.lazyLoadNow（className）函数可以立即执行一次懒加载。

新闻详情页面开发

实现步骤

1、在新闻列表上增加打开窗口功能，并传递新闻id

2、创建新闻详情页面info.html

3、新闻详情页面代码

style>

#content{padding:

8px;

2.2em;

#contentimg{width:

#content*{font-size:

#share{position:

fixed;

z-index:

right:

10px;

bottom:

50%;

/style>

HUI-Hello<

HUI_Back"

content"

share"

HUI_IconsHUI_Icons_share-copy"

script>

varself;

self=plus.webview.currentWebview（）;

console.log（self.newsId）;

newsInfo（）;

//加载新闻内容

functionnewsInfo（）{

hui.getJSON（

+self.newsId,

if（typeof（data）!

object'

）{hui.toast（'

数据加载失败..'

self.close（）;

returnfalse;

if（data.id=='

没有演示新闻信息，请点击前3条'

#HUI_Header'

h1'

）.html（data.title）;

#content'

）.html（data.content）;

function

展开阅读全文