今日头条APP案例开发.docx
- 文档编号：15676639
- 上传时间：2023-07-06
- 格式：DOCX
- 页数：23
- 大小：37.24KB
今日头条APP案例开发.docx
《今日头条APP案例开发.docx》由会员分享，可在线阅读，更多相关《今日头条APP案例开发.docx（23页珍藏版）》请在冰点文库上搜索。
今日头条APP案例开发
今日头条APP案例开发
APP开发实战-新闻客户端
hui
由hcoder发布的前端ui框架，与mui显著的区别是dom操作。
官网:
创建项目
1、不使用任何框架
使用hbulider直接创建移动app项目，选择模板时选择空模板。
2、使用mui
使用hbulider直接创建移动app项目，选择模板时选择mui项目（自动生成mui最新的cssjs入口文件）。
3、使用hui
使用hbulider直接创建移动app项目，选择模板时选择空模板（下载hui框架包，复制进项目即可）。
真机调试
usb连接手机，点击编辑上的在手机设备下运行即可，安卓效果更好。
app开发中窗口的概念
使用h5+开发app原理是创建一个窗口内部包含一个html，然后调用原生接口完成更多功能。
缺点也就是html并不是原生在进行浏览器渲染时白屏卡顿在低端机上会比较明显，但随着手机的更新换代这样的问题已经越来越不明显。
通过我们开发者的努力可以把效果做到接近原生。
app开发的一个重要概念就是窗口，所以不要使用ahref=""去打开新页面，而是创建一个新窗口。
不使用任何框架制作项头部
1、注意meta声明:
2、css格式化dom
*{margin:
0px;padding:
0px;font-size:
15px;color:
#000000;outline:
none;}
body{background:
#FFFFFF;}
div{overflow:
hidden;}
a{text-decoration:
none;color:
#000000;}
a:
hover{text-decoration:
underline;}
img{border:
none;}
3、头部代码编写
导入hui
下载hui最新版本解压后导入进项目。
制作头部导航及内部元素
1、一键改变ui的整体颜色:
打开hui.css搜索#3283FA替换为#D43D3D并保存立即可以看到效果。
2、完成头部布局
dom部分
DOCTYPEhtml>
#999999;">搜您想搜的
css增加
#topSearch{width:
60%;height:
30px;background:
#F6F5F4;border-radius:
3px;float:
right;margin:
7px8px0px0px;line-height:
30px;color:
#999999;text-align:
left;text-indent:
15px;font-size:
14px;}
制作分类导航
dom及js
changeCate（0）;"class="topCateSed">推荐
changeCate
（1）;">热点
changeCate
（2）;">视频
changeCate（3）;">本地
changeCate（4）;">社会
changeCate（5）;">娱乐
changeCate（6）;">问答
changeCate（7）;">汽车
changeCate（8）;">体育
hui（'#topCate'）.scrollX（8,'a'）;
//完善点击效果
functionchangeCate（cateId）{
hui（'#topCate'）.find（'a'）.removeClass（'topCateSed'）.eq（cateId）.addClass（'topCateSed'）;
}
使用了hui的横向滚动、使用hui选择器进行连贯操作完成点击效果、
css部分
#topCate{height:
40px;background:
#F6F5F4;border-bottom:
1pxsolid#E8E8E8;width:
100%;}
#topCatea{display:
block;float:
left;height:
40px;line-height:
40px;width:
15%;text-align:
center;}
.topCateSed{color:
#D43D3D;font-size:
17px!
important;}
制作子窗口、数据加载、下拉刷新
为了实现app的上拉刷新和下拉加载我们需要在入口页面嵌入子窗口。
相关知识：
webview，参考手册：
http:
//www.html5plus.org/doc/zh_cn/webview.html
实现步骤：
1、创建子窗口indexSub.html
2、在入口页嵌入子窗口（会使用plusReady事件）
3、将子页面的返回功能转交给入口页
入口页代码
DOCTYPEhtml>
#999999;">搜您想搜的
changeCate（0）;"class="topCateSed">推荐
changeCate
（1）;">热点
changeCate
（2）;">视频
changeCate（3）;">本地
changeCate（4）;">社会
changeCate（5）;">娱乐
changeCate（6）;">问答
changeCate（7）;">汽车
changeCate（8）;">体育
hui.plusReady（function（）{
varsubView=hui.create（'indexSub.html',{'top':
'87px'，bottom:
'0px'}）;//此处注意设置bottom
varself=plus.webview.currentWebview（）;
self.append（subView）;
}）;
hui（'#topCate'）.scrollX（8,'a'）;
//完善点击效果
functionchangeCate（cateId）{
hui（'#topCate'）.find（'a'）.removeClass（'topCateSed'）.eq（cateId）.addClass（'topCateSed'）;
}
子窗口代码
DOCTYPEhtml>
hi....
hui.Back=function（）{
varparentView=plus.webview.currentWebview（）.parent（）;
parentView.evalJS（'hui.Back（）;'）;
}
HOA介绍
HCoderOpenApi简称HOA是由提供的一套api数据源，提供了日常app开发学习过程中常用的数据源，适用于基于muihuih5+的app开发。
开放源地址:
项目实现过程
入口页js变化
varsubView;
hui.plusReady（function（）{
subView=hui.create（'indexSub.html',{'top':
'88px',bottom:
'0px'}）;
varself=plus.webview.currentWebview（）;
self.append（subView）;
}）;
hui（'#topCate'）.scrollX（8,'a'）;
//完善点击效果
functionchangeCate（cateId）{
hui（'#topCate'）.find（'a'）.removeClass（'topCateSed'）.eq（cateId）.addClass（'topCateSed'）;
subView.evalJS（'changeCate（'+cateId+'）;'）;
}
子页面完整代码
DOCTYPEhtml>
varpage=1,cate=0;
hui.plusReady（function（）{
changeCate（0）;
hui.refresh（getNews）;
}）;
hui.Back=function（）{
varparentView=plus.webview.currentWebview（）.parent（）;
parentView.evalJS（'hui.Back（）;'）;
}
functionchangeCate（cateId）{cate=cateId;getNews（）;}
functiongetNews（）{
varhtml='';
hui.centerLoading（）;
hui.get（
'
function（data）{
vararrNews=data.split（'--hcSplitor--'）;
for（vari=0;ivaritemArr=arrNews[i].split（'--hcListSplitor--'）;
html+='
hui.open（\'info.html\',{},true,{id:
\''+itemArr[0]+'\'}）;">'+
''+
''+
'
'+itemArr[2]+'
'+
''+
'';
}
hui（'#newsList'）.html（'
'）;hui.centerLoading（true）;
hui.endRefresh（）;
},
function（e）{
hui.toast（'获取新闻失败，请检查网络'）;hui.centerLoading（true）;
hui.endRefresh（）;
}
）;
}
新闻分类切换、上拉加载更多
本节内容
1、点击新闻分类切换不同的新闻列表。
2、上拉加载更多
核心js
functionchangeCate（cateId）{
page=1;
cate=cateId;
hui.scrollTop（0）;
hui.isLoadMoreIng=false;
getNewsList（）;
}
functiongetNewsList（）{
page=1;
hui.centerLoading（）;
varhtml='';
hui.get（
'
function（data）{
hui.endRefresh（）;
vararrItem=data.split（'--hcSplitor--'）;
for（vari=0;ivaritem=arrItem[i].split（'--hcListSplitor--'）;
html+='
'+
'hui.open（\'info.html\',{},true,{newsId:
'+item[0]+'}）;">'+
''+
''+
'
'+item[2]+'
'+
''+
''+
'';
}
hui.centerLoading（true）;
hui（'#newsList'）.html（'
'）;hui.lazyLoadNow（）;
page++;
},
function（e）{
hui.endRefresh（）;
hui.toast（'连接失败'）;
hui.centerLoading（true）;
}
）;
}
懒加载的使用
使用HUI来实现图片的懒加载是非常方便的，您只需要设置图片的预加载占位图及实际地址：
//js
hui.lazyLoad（className）与hui.lazyLoadNow（className）
hui.lazyLoad（）的参数为需要懒加载的图片的类属性，默认为HUI_Lazy。
懒加载组件会自动识别滚动条滚动事件，如果懒加载图片是动态追加进来的，在追加后使用hui.lazyLoadNow（className）函数可以立即执行一次懒加载。
新闻详情页面开发
实现步骤
1、在新闻列表上增加打开窗口功能，并传递新闻id
2、创建新闻详情页面info.html
3、新闻详情页面代码
DOCTYPEhtml>
HUI-Hello