《今日头条app案例开发》由会员分享，可在线阅读，更多相关《今日头条app案例开发（30页珍藏版）》请在金锄头文库上搜索。
1、APP开发实战 - 新闻客户端目 录基于h5+的app 开发介绍、hui、mui介绍、项目部署2制作子窗口、数据加载、下拉刷新8新闻分类切换 、上拉加载更多16懒加载的使用19新闻详情页面开发20新闻详情页面分享功能23app 在线升级27基于h5+的app 开发介绍、hui、mui介绍、项目部署基于h5+的app 开发介绍传统的app开发一般使用原生语言进行，HTML5plus Runtime，简称5+ Runtime，是运行于手机端的强化web引擎，除了支持标准HTML5外，还支持更多扩展的js api，使得js的能力不输于原生。5+ Runtime内置于HBuilder，在真机运行、打包
2、时自动挂载。业内之前有phonegap/Cordova方案，但是他们自带js api太少了，扩展api需要用原生语言开发，更致命的是这类方案的性能不足。最终实现完成app开发且一套代码多端发布。开发工具 hbuilder官网： http:/dcloud.io/非常推荐的编辑器，完美支持 html js css php app开发。mui最接近原生APP体验的高性能前端框架，使用前端框架的目的：快速开发、更稳定的布局设计。官网 : http:/dcloud.io/mui.htmlhui由hcoder发布的前端ui框架，与mui显著的区别是dom操作。官网 : http:/ js 入口文件）。3、
3、使用hui使用hbulider直接创建移动app项目，选择模板时选择空模板（下载hui框架包，复制进项目即可）。真机调试usb连接手机，点击编辑上的在手机设备下运行即可，安卓效果更好。app开发中窗口的概念使用h5+开发app原理是创建一个窗口内部包含一个html，然后调用原生接口完成更多功能。缺点也就是html并不是原生在进行浏览器渲染时白屏 卡顿在低端机上会比较明显，但随着手机的更新换代这样的问题已经越来越不明显。通过我们开发者的努力可以把效果做到接近原生。app开发的一个重要概念就是窗口，所以不要使用a href= 去打开新页面，而是创建一个新窗口。不使用任何框架制作项头部1、注意met
4、a声明: 2、css 格式化dom*margin:0px; padding:0px; font-size:15px; color:#000000; outline:none;bodybackground:#FFFFFF;divoverflow:hidden;atext-decoration:none; color:#000000;a:hovertext-decoration:underline;imgborder:none;3、头部代码编写导入hui下载hui最新版本 http:/ 解压后导入进项目。制作头部导航及内部元素1、一键改变ui的整体颜色 : 打开hui.css 搜索 #3283FA
5、 替换为 #D43D3D 并保存立即可以看到效果。2、完成头部布局dom部分 搜您想搜的css 增加#topSearchwidth:60%; height:30px; background:#F6F5F4; border-radius:3px; float:right; margin:7px 8px 0px 0px; line-height:30px; color:#999999; text-align:left; text-indent:15px; font-size:14px;制作分类导航dom 及 js 推荐 热点 视频 本地 社会 娱乐 问答 汽车 体育 hui(#topCate).s
6、crollX(8,a);/完善点击效果function changeCate(cateId) hui(#topCate).find(a).removeClass(topCateSed).eq(cateId).addClass(topCateSed);使用了hui的横向滚动、使用hui选择器进行连贯操作完成点击效果、css 部分#topCateheight:40px; background:#F6F5F4; border-bottom:1px solid #E8E8E8; width:100%;#topCate adisplay:block; float:left; height:40px; l
7、ine-height:40px; width:15%; text-align:center;.topCateSedcolor:#D43D3D; font-size:17px !important;制作子窗口、数据加载、下拉刷新为了实现app的上拉刷新和下拉加载我们需要在入口页面嵌入子窗口。相关知识：webview，参考手册：http:/www.html5plus.org/doc/zh_cn/webview.html实现步骤：1、创建子窗口 indexSub.html2、在入口页嵌入子窗口 （会使用 plusReady事件）3、将子页面的返回功能转交给入口页入口页代码 搜您想搜的 推荐 热点 视频 本地 社会 娱乐 问答 汽车 体育 hui.plusReady(function() var subView = hui.create(indexSub.html, top:87px， bottom:0px); /此处注意设置 bottom var self = plus.webview.currentWebview(); self.append(subView););hui(#topCate).scrollX(8,a);/
