今日头条APP案例开发.docx

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，在真机运行、打包时自动挂载。业内之前有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操作。官网 : /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声明: 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最新版本 /hui 解压后导入进项目。制作头部导航及内部元素1、一键改变ui的整体颜色 : 打开hui.css 搜索 #3283FA 替换为 #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).scrollX(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; line-height:40px; width:15%; text-align:center;.topCateSedcolor:#D43D3D; font-size:17px !important;制作子窗口、数据加载、下拉刷新为了实现app的上拉刷新和下拉加载我们需要在入口页面嵌入子窗口。相关知识：webview，参考手册：/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);/完善点击效果function changeCate(cateId) hui(#topCate).find(a).removeClass(topCateSed).eq(cateId).addClass(topCateSed);子窗口代码hi.hui.Back = function()var parentView = plus.webview.currentWebview().parent();parentView.evalJS(hui.Back(););HOA介绍HCoder Open Api 简称 HOA 是由 提供的一套api数据源，提供了日常app开发学习过程中常用的数据源，适用于基于 mui hui h5+的app开发。开放源地址 : /api项目实现过程入口页js变化var subView;hui.plusReady(function() subView = hui.create(indexSub.html, top:88px, bottom:0px); var self = plus.webview.currentWebview(); self.append(subView););hui(#topCate).scrollX(8,a);/完善点击效果function changeCate(cateId) hui(#topCate).find(a).removeClass(topCateSed).eq(cateId).addClass(topCateSed); subView.evalJS(changeCate(+cateId+););子页面完整代码 var page = 1, cate = 0;hui.plusReady(function() changeCate(0); hui.refresh(getNews););hui.Back = function() var parentView = plus.webview.currentWebview().parent(); parentView.evalJS(hui.Back(););function changeCate(cateId)cate = cateId; getNews();function getNews() var html = ; hui.centerLoading(); hui.get( /index.php?user=hcoder&pwd=hcoder&m=mediaList&page=+page+&cate=+cate, function(data) var arrNews = data.split(-hcSplitor-); for(var i = 0; i arrNews.length; i+) var itemArr = arrNewsi.split(-hcListSplitor-); html += + + + +itemArr2+ + ; hui(#newsList).html(+html+); hui.centerLoading(true); hui.endRefresh(); , function(e) hui.toast(获取新闻失败，请检查网络); hui.centerLoading(true); hui.endRefresh(); );新闻分类切换 、上拉加载更多本节内容1、点击新闻分类切换不同的新闻列表。2、上拉加载更多核心jsfunction changeCate(cateId) page = 1; cate = cateId; hui.scrollTop(0); hui.isLoadMoreIng = false; getNewsList();function getNewsList() page = 1; hui.centerLoading(); var html = ; hui.get( /index.php?user=hcoder&pwd=hcoder&m=mediaList&page=+page+&cate=+cate, function(data) hui.endRefresh(); var arrItem = data.split(-hcSplitor-); for(var i = 0; i arrItem.length; i+) var item = arrItemi.split(-hcListSplitor-); html += + + + + +item2+ + + ; hui.centerLoading(true); hui(#newsList).html(+html+); hui.lazyLoadNow(); page+; , function(e) hui.endRefresh(); hui.toast(连接失败); hui.centerLoading(true); );懒加载的使用使用HUI来实现图片的懒加载是非常方便的，您只需要设置图片的预加载占位图及实际地址：/jshui.lazyLoad(className) 与 hui.lazyLoadNow(className)hui.lazyLoad()的参数为需要懒加载的图片的类属性，默认为 HUI_Lazy。 懒加载组件会自动识别滚动条滚动事件，如果懒加载图片是动态追加进来的，在追加后使用 hui.lazyLoadNow(className)函数可以立即执行一次懒加载。新闻详情页面开发实现步骤1、在新闻列表上增加打开窗口功能，并传递新闻id2、创建新闻详情页面 info.html3、新闻详情页面代码#contentpadding:8px; font-size:15px; line-height:2.2em;#content imgwidth:100%;#content *font-size:15px; line-height:2.2em;#shareposition:fixed; z-index:5; width:30px; height:30px; right:10px; bottom:10px; background:#FFFFFF; border-radius:50%; line-height:30px; text-align:center; HUI - Hello var self;hui.plusReady(function() self = plus.webview.currentWebview(); console.log(self.newsId); newsInfo(););/加载新闻内容function newsInfo() hui.getJSON( /index.php?user=hcoder&pwd=hcoder&m=info&id=+self.newsId, function(data) if(typeof(data) != object)hui.toast( 数据加载失败. ); self.close(); return false; if(data.id = 0)hui.toast( 没有演示新闻信息，请点击前3条); self.close(); return false; hui(#HUI_Header).find(h1).html(data.title); hui(#content).html(data.content); , function() hui.toast( 数据加载失败. ); self.close(); );新闻详情页面分享功能新闻详情页面分享功能实现步骤1、配置manifest.json 增加分享模块分享服务对象格式 id:sinaweibo,description:新浪微博,authenticated:false,accessToken:,nativeClient:false id:tencentweibo,description:腾讯微博,authenticated:false,accessToken:,nativeClient:false id:qq,description:QQ,authenticated:false,accessToken:,nativeClient:true id:weixin,description:微信,authenticated:true,accessToken:,nativeClient:true2、页面代码#contentpadding:8px; font-size:15px; line-height:2.2em;#content imgwidth:100%;#content *font-size:15px; line-height:2.2em;#shareposition:fixed; z-index:5; width:30px; height:30px; right:10px; bottom:10px; background:#FFFFFF; border-radius:50%; line-height:30px; text-align:center; HUI - Hello var self, shares, sharewx, newsInfo;hui(#share).click(function() var actionbuttons = title:微信好友,title:朋友圈; var actionstyle = title:请选择分享类型,cancel:取消,buttons:actionbuttons; plus.nativeUI.actionSheet(actionstyle, function(e) if(e.index =1) shareNow(e.index); ););function shareNow(type) /.hui.plusReady(function() self = plus.webview.currentWebview(); newsInfo(););/加载新闻内容function newsInfo() hui.getJSON( /index.php?user=hcoder&pwd=hcoder&m=info&id=+self.newsId, function(data) newsInfo = data; if(typeof(data) != object)hui.toast( 数据加载失败. ); self.close(); return false; if(data.id = 0)hui.toast( 没有演示新闻信息，请点击前3条); self.close(); return false; hui(#HUI_Header).find(h1).html(data.title); hui(#content).html(data.content); , function() hui.toast( 数据加载失败. ); self.close(); );app 在线升级app 在线升级原理在app内部设置版本号，在远程服务器端设置最新版本号，如果2个版本号不等则提示升级。安装app函数plus.runtime.install(d.filename);完整代码 var page = 1, cate = 0, myappVerson = 1.0, dtask;hui.plusReady(function() changeCate(0); hui.refresh(getNews); hui.loadMore(loadMore); checkVersion(););function checkVersion() /.hui.Back = function() var parentView = plus.webview.currentWebview().parent(); parentView.evalJS(hui.Back(););function changeCate(cateId)cate = cateId; getNews();function loadMore() var html = ; hui.get( /index.php?user=hcoder&pwd=hcoder&m=mediaList&page=+page+&cate=+cate, function(data) if(data = null)hui.endLoadMore(true); return false; hui.endLoadMore(); var