今日头条APP案例开发.docx

APP开发实战 - 新闻客户端 目 录  TOC \o 1-3 \h \z \u  HYPERLINK \l _Toc478250234 基于h5+的app 开发介绍、hui、mui介绍、项目部署  PAGEREF _Toc478250234 \h 2  HYPERLINK \l _Toc478250235 制作子窗口、数据加载、下拉刷新  PAGEREF _Toc478250235 \h 8  HYPERLINK \l _Toc478250236 新闻分类切换 、上拉加载更多  PAGEREF _Toc478250236 \h 16  HYPERLINK \l _Toc478250237 懒加载的使用  PAGEREF _Toc478250237 \h 19  HYPERLINK \l _Toc478250238 新闻详情页面开发  PAGEREF _Toc478250238 \h 20  HYPERLINK \l _Toc478250239 新闻详情页面分享功能  PAGEREF _Toc478250239 \h 23  HYPERLINK \l _Toc478250240 app 在线升级  PAGEREF _Toc478250240 \h 27   PAGE \* MERGEFORMAT 30 基于h5+的app 开发介绍、hui、mui介绍、项目部署 基于h5+的app 开发介绍传统的app开发一般使用原生语言进行，HTML5plus Runtime，简称5+ Runtime，是运行于手机端的强化web引擎，除了支持标准HTML5外，还支持更多扩展的js api，使得js的能力不输于原生。5+ Runtime内置于HBuilder，在真机运行、打包时自动挂载。 业内之前有phonegap/Cordova方案，但是他们自带js api太少了，扩展api需要用原生语言开发，更致命的是这类方案的性能不足。最终实现完成app开发且一套代码多端发布。开发工具 hbuilder官网：  HYPERLINK http://dcloud.io/ \o http://dcloud.io/ \t _blank http://dcloud.io/非常推荐的编辑器，完美支持 html js css php app开发。mui最接近原生APP体验的高性能前端框架，使用前端框架的目的：快速开发、更稳定的布局设计。官网 :  HYPERLINK http://dcloud.io/mui.html \o http://dcloud.io/mui.html \t _blank http://dcloud.io/mui.htmlhui由hcoder发布的前端ui框架，与mui显著的区别是dom操作。官网 :  HYPERLINK /hui \o /hui \t _blank /hui创建项目1、不??用任何框架使用hbulider直接创建移动app项目，选择模板时选择空模板。2、使用mui使用hbulider直接创建移动app项目，选择模板时选择mui项目（自动生成mui最新的css js 入口文件）。3、使用hui使用hbulider直接创建移动app项目，选择模板时选择空模板（下载hui框架包，复制进项目即可）。真机调试usb连接手机，点击编辑上的在手机设备下运行即可，安卓效果更好。app开发中窗口的概念使用h5+开发app原理是创建一个窗口内部包含一个html，然后调用原生接口完成更多功能。缺点也就是html并不是原生在进行浏览器渲染时白屏 卡顿在低端机上会比较明显，但随着手机的更新换代这样的问题已经越来越不明显。通过我们开发者的努力可以把效果做到接近原生。app开发的一个重要概念就是窗口，所以不要使用a href= 去打开新页面，而是创建一个新窗口。不使用任何框架制作项头部1、注意meta声明: meta name=viewport content=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:und