今日头条APP案例开发

APP开发实战-新闻客户端目录基于h5+的app开发介绍、hui、mui介绍、项目部署..............................................................1制作子窗口、数据加载、下拉刷新...............................................................................................7新闻分类切换、上拉加载更多...................................................................................................14懒加载的使用.................................................................................................................................17新闻详情页面开发.........................................................................................................................18新闻详情页面分享功能.................................................................................................................21app在线升级................................................................................................................................251基于h5+的app开发介绍、hui、mui介绍、项目部署基于h5+的app开发介绍传统的app开发一般使用原生语言进行，HTML5plusRuntime，简称5+Runtime，是运行于手机端的强化web引擎，除了支持标准HTML5外，还支持更多扩展的jsapi，使得js的能力不输于原生。5+Runtime内置于HBuilder，在真机运行、打包时自动挂载。业内之前有phonegap/Cordova方案，但是他们自带jsapi太少了，扩展api需要用原生语言开发，更致命的是这类方案的性能不足。最终实现完成app开发且一套代码多端发布。开发工具hbuilder官网：非常推荐的编辑器，完美支持htmljscssphpapp开发。mui最接近原生APP体验的高性能前端框架，使用前端框架的目的：快速开发、更稳定的布局设计。官网:由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=去打开新页面，而是创建一个新窗口。3不使用任何框架制作项头部1、注意meta声明:metaname=viewportcontent=initial-scale=1.0,maximum-scale=1.0,user-scalable=no/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部分!DOCTYPEhtml4htmlheadmetacharset=utf-8metaname=viewportcontent=initial-scale=1.0,maximum-scale=1.0,user-scalable=no/title/titlelinktype=text/cssrel=stylesheethref=css/hui.css//headbodydivid=HUI_Headerdivclass=HUI_FLimgsrc=img/logo.pngwidth=100//divdivid=topSearchspanclass=HUI_IconsHUI_Icons_searchstyle=color:#999999;/span搜您想搜的/div/divdivclass=HUI_Wrap/divscripttype=text/javascriptsrc=js/hui.js/script/body/htmlcss增加5#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及jsdivclass=HUI_Wrapid=topCatedivahref=javascript:changeCate(0);class=topCateSed推荐/aahref=javascript:changeCate(1);热点/aahref=javascript:changeCate(2);视频/aahref=javascript:changeCate(3);本地/aahref=javascript:changeCate(4);社会/aahref=javascript:changeCate(5);娱乐/aahref=javascript:changeCate(6);问答/aahref=javascript:changeCate(7);汽车/aahref=javascript:changeCate(8);体育/a/div/divscripttype=text/javascriptsrc=js/hui.js/scriptscripttype=text/javascripthui('#topCate').scrollX(8,'a');6//完善点击效果functionchangeCate(cateId){hui('#topCate').find('a').removeClass('topCateSed').eq(cateId).addClass('topCateSed');}/script使用了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;}7制作子窗口、数据加载、下拉刷新为了实现app的上拉刷新和下拉加载我们需要在入口页面嵌入子窗口。相关知识：webview，参考手册：实现步骤：1、创建子窗口indexSub.html2、在入口页嵌入子窗口（会使用plusReady事件）3、将子页面的返回功能转交给入口页入口页代码!DOCTYPEhtmlhtmlheadmetacharset=utf-8metaname=viewportcontent=initial-scale=1.0,maximum-scale=1.0,user-scalable=no/title/titlelinktype=text/cssrel=stylesheethref=css/hui.css//headbodydivid=HUI_Headerdivclass=HUI_FLimgsrc=img/logo.pngwidth=100//div8divid=topSearchspanclass=HUI_IconsHUI_Icons_searchstyle=color:#999999;/span搜您想搜的/div/divdivclass=HUI_Wrapid=topCatedivahref=javascript:changeCate(0);class=topCateSed推荐/aahref=javascript:changeCate(1);热点/aahref=javascript:changeCate(2);视频/aahref=javascript:changeCate(3);本地/aahref=javascript:changeCate(4);社会/aahref=javascript:changeCate(5);娱乐/aahref=javascript:changeCate(6);问答/aahref=javascript:changeCate(7);汽车/aahref=javascript:changeCate(8);体育/a/div/divscripttype=text/javascriptsrc=js/hui.js/scriptscripttype=text/javascripthui.plusReady(function(){varsubView=hui.create('indexSub.html',{'top':'87px'，bottom:'0px'});//此处注意设置bottomvarself=plus.webview.currentWebview();self.append(subView);});9hui('#topCate').scrol