今日头条APP案例开发

AP开发实战- 新闻客户端目 录基于h5+的app 开发介绍、hui、mui介绍、项目部署2制作子窗口、数据加载、下拉刷新8新闻分类切换 、上拉加载更多16懒加载的使用19新闻详情页面开发20新闻详情页面分享功能23app 在线升级27基于h5+的ap 开发简介、hui、mu简介、项目部署基于h+的app开发简介老式的app开发一般使用原生语言进行,ML5pls ntie,简称5+ Ruime，是运营于手机端的强化wb引擎，除了支持原则HTM5外,还支持更多扩展的 api，使得j的能力不输于原生。Runtime内置于Bder,在真机运营、打包时自动挂载。业内之前有phoeapCordova方案,但是她们自带js api太少了,扩展api需要用原生语言开发,更致命的是此类方案的性能局限性。最后实现完毕app开发且一套代码多端发布。开发工具hbuiler官网：非常推荐的编辑器，完美支持hmj cspp p开发。mi最接近原生APP体验的高性能前端框架，使用前端框架的目的:迅速开发、更稳定的布局设计。官网： hui由hcor发布的前端u框架,与mui明显的区别是do操作。官网：创立项目1、不使用任何框架使用hbulide直接创立移动app项目，选择模板时选择空模板。、使用使用bulider直接创立移动ap项目，选择模板时选择mu项目（自动生成mui最新的cs入口文献)。3、使用使用hbulid直接创立移动a项目，选择模板时选择空模板(下载hu框架包，复制进项目即可）。真机调试b连接手机,点击编辑上的在手机设备下运营即可,安卓效果更好。app开发中窗口的概念使用h5+开发app原理是创立一种窗口内部涉及一种html，然后调用原生接口完毕更多功能。缺陷也就是htm并不是原生在进行浏览器渲染时白屏卡顿在低端机上会比较明显，但随着手机的更新换代这样的问题已经越来越不明显。通过我们开发者的努力可以把效果做到接近原生。ap开发的一种重要概念就是窗口,因此不要使用a href= 去打开新页面，而是创立一种新窗口。不使用任何框架制作项头部、注意me声明: 2、css 格式化dommagn:0px； paddin:0px; ot-ize:15p; col:0000;oui:none;odybackgoud:#FFFFF;verw：hidde；atxt-decoraion:none; colr：000；a：hovertext-decration:unrine;imgboer:none;3、头部代码编写导入hui下载hui最新版本 解压后导入进项目。制作头部导航及内部元素1、一键变化ui的整体颜色:打开hui.css搜索 #328F 替代为 #4D3D 并保存立即可以看到效果。、完毕头部布局dm部分haea me=viewport contnt=intial-scale=.0, maximum-scae=1.,uer-sabl boy iv vipt/lcss 增长#opSechwidh:60%; ight:30x;ckground:#FF5F4;border-dius:3px;float：right; margn：7p 8px 0x 0px; lne-eght：30px； clr：#999999;ext-align:lef; text-indet:15x； otsz:4px;制作分类导航do 及 js he=javacrit:changeCe(0); clasopCateSe推荐 热点 a href=javacrip:chate();视频 a hrf=javasi:hngCe(3);本地 a hrefavacipt:changeCat(4);社会/a a href=javascr：hangeate();娱乐a 问答 a hre=javasrpt:cangeCa()；汽车/a ref=javarpt:hangeCate（8);体育 /divcit ype=/javscrip src=js/uiscript typeextjascripthui(#tpte).scoll(8，a);/完善点击效果funin changete(catId) hui(#tCate)in(）.eass(topCatSe）.eq(cateId).addls(topteed)；/sipt使用了hi的横向滚动、使用hui选择器进行连贯操作完毕点击效果、css 部分#topCateit:40px; bckrud：#FF5F4; borde-bottom:1poli #E8E88; idth:1%；#topat adily：bk;flat:left； egh:40x; linheiht:40p； wdh：1; ext-aln:cente;.tpCateSedclo:#43D3; nt-size:1px !irtn;制作子窗口、数据加载、下拉刷新为了实现p的上拉刷新和下拉加载我们需要在入口页面嵌入子窗口。有关知识：webview，参照手册:实现环节:、创立子窗口 idexub.htm2、在入口页嵌入子窗口 （会使用 pRay事件）3、将子页面的返回功能转交给入口页入口页代码htmleadet namevwpotcontent=intialscale=10, maimm-cale=1.,usrscalbleo/titlelin typextcs re=tyleset href=css/hu.cs /head /dv 搜您想搜的 推荐 ahef=jascrip：changCte();热点a 视频 ahrf=javscit:chgeate(3);本地 社会 ahref=jaasript:chaneCat(5)；娱乐 hf=javascript:chngeCate（);问答 a href=jaasci:chanCate（7）;汽车 体育 /di/divcrithui.plusRady(fuctin(） va subVe = huieat(idxSubml， op：87x, oo:0);/此处注意设立bottm var self = plu.wbvcrrntWeviw(); selfapped(subiew););hui（#opate)scrolX（8,)；/完善点击效果functionhangeC（cateId) hui(#topCate).find().rmoCass(topCateed)q(cateId).adClass(topCd);子窗口代码ta harst=tf8h./srthui.Back = funton()aaretie = plus.webiew.curntWevie().paren()；parentiew.evalJS(huiack()；);/bodyHA简介HCoer Oen Ap简称HOA 是由 .net 提供的一套a数据源,提供了平常app开发学习过程中常用的数据源,合用于基于 mui uh5的app开发。开放源地址 :项目实现过程入口页js变化a subVew;hi.peay(funin() subView hui.ra（indexub,to:88， botom：x); arse= plus.weiew.currenbve(); self.appen(subiew);)；ui(#topCat）.scllX(8,);/完善点击效果funton changeCate(ateI) (#topate）.find().reoeClass(topCateSd).eq(caId).adClass（topteSed)； subViewealJ(changate（+caeId）;）；子页面完整代码！DCYPE hmlheadeta has=uf-link type=text/css rel=sylesheet href=cs/ui.css/divcls=HUI_Wrap divid=ewsListcss=HUIMedList1/dvscripvar pae= ,cate 0;hi.plsReady(unction() changea()； h.refsh(etNews););hui.Bac = function() arpentView lus.weviewcrntWebiew(）.pent(); paeVie.eaJS（hui.Bk()；);uction changeCa（cateId)cat = cted; etews()；uction eN() a html = ; hui.ceteLoaig（)； hi.et( +pge+catecate， fuction(dta) vararew datapit（-hcSpitr-); or(vari = 0; iarrNews.lengt; i+） ar itemAr= arNews.plit(-cLisSplor); hl + divclss=HUI_ediastImgdiv+ h1+emAr2+/h1+ /li; hi(#newsList)htl(htm+/ul）; hui.enerLoadin(tre); hiendRefresh()； , funcion(e) uias(获取新闻失败,请检查网络);hcnterodig(tr); hui.efresh(）； );/bo新闻分类切换 、上拉加载更多本节内容1、点击新闻分类切换不同的新闻列表。2、上拉加载更多核心jsfunction changeCate（catI） pg = 1; ca = caI; ui.scrllTop(0)； ui.isLoadoreIng =false； getewsLst（);funcin getNeLs() pe = 1; hi.cetrLoding()； varhtm =; h.gt( +pae+&cate=+at, uncti(data） ui.enRefres（)； v rrItm = dtasplit(-cSlito-)； for(vr i = 0； + + im src=img/la.png lzSr=m1 class=HUI_Ly/+ div clas=UI_MdiaListCte +2+ /a+ ; hu.cenrLoaing(rue); ui(#eLst).hm(ul+htm+); huilyLoaw(); pe+; , ncin() ienRefresh（); hui.toat(连接失败)； iceeroding(ru)； );懒加载的使用使用HI来实现图片的懒加载是非常以便的,您只需要设立图片的预加载占位图及实际地址：mg src=占位图cas=UzylzySr图片的实际地址 /jhuilazyLoa（assNe)与 huilzyLoadNow(caNme)hi.layLoad（)的参数为需要懒加载的图片的类属性，默觉得 UIaz。 懒加载组件会自动辨认滚动条滚动事件，如果懒加载图片是动态追加进来的，在追加后使用hui.LoadNw（lassNa)函数可以立即执行一次懒加载。新闻详情页面开发实现环节、在新闻列表上增长打开窗口功能,并传递新闻i2、创立新闻详情页面 ifo.htl、新闻详情页面代码tmlheamea charst=utf8tile#ctetpaddig:8px; font-sze:1px;ine-hight:2.2em;#cnn igwidth:10%;content ot-size:5p; ne-eght:2.2em;sharpsition：ixd; ndex：5; id:30px; eig:30x; igh:1p； bottom:0px; backgrod:#FFFFF;brder-radis:50%； lne-height:30px; text-lgn:ee;di idUI_eader HUI Helo/h1 div diid=contendscipt yp=textaascritsrc=js/hui.var elf;huipluRea(cion() sel = lus.eewcuretWevew(); conoe.lg(sel.nesId）； neIno（);)；/加载新闻内容unctionewsInfo() uigtJSON（ +sefnwsId, functon(daa) f(ypeof(data) != oject）hui.toas（数据加载失败. )；self.close(）; reurn al; f(ata.id =）hitoast（ 没有演示新闻信息，请点击前3条); elf.close（)； rtn ase; hu(UI_Heaer).ind（h1)html(data.til); ui(#onnt)html（datconet); , fnco() h.tost( 数据加载失败. )； slcloe(); ）;ri新闻详情页面分享功能新闻详情页面分享功能实现环节1、配备maies.so 增长分享模块分享服务对象格式id:iawebo，descrpti:新浪微博,authntcated:false,aesToke:，naClet:falseid:tenceteb，dscritio:腾讯微博,auhenicae:false,acessTen:,natiCien:ale id:qq，dscrion：Q,atentied：alse,aessToken：,natveCent：truid:eiin,desrto:微信,authnticated:true,acessToen:，ntivelit:tue2、页面代码ead#ontentaddng:8px; ft-sz：1px; in-heigt:2.em;ctetmgwith：0%;#coent *oze：15px; ie-heght:2m；harepsiio:fixe; -ide:；width:30p; eigt:30px; ight:0px; bottm：10x; bakound:#FFFFF; boderadius：50%;lineeight:3; txt-agn:cente；/headdv idHUI_Hede U-ello div id=ontent/div/div idhrescrtypetext/javascrpt sr=js/hu.j/sriptvar elf, hae, harewx, ewsIno；hui(#shre)click(fuction() a ctionbutton = tie：微信好友，ite:朋友圈; va ationstyle = tl:请选择分享类型，ace:取消,bttos:actionbutons; plusivUIactionShet(atityl, fncion() i(e.inx1) hareow（e.inde)； )；）;funcion saeNow(te） /.hi.lady(function（) sel = lu.wvie.urrentWebiew(); newsInfo（);)；/加载新闻内容fnctio newsInfo() ui.getSO( +slfnesd, fnction(data) newInfo= aa; if(typeof(dta） ! object)hitoast（ 数据加载失败. ）； elf.se()； returnfale； if(dat.id= 0）hui.toas( 没有演示新闻信息,请点击前条)； slf.lse(); etrn als； hu（#UI_Header)find（1).hl(dat.tite); u(ontet）.htm（dataonten); , fucti（) hui.toa(数据加载失败.); sel.clse(); ）;ap 在线升级app 在线升级原理在ap内部设立版本号,在远程服务器端设立最新版本号，如果2个版本号不等则提示升级。安装app函数pl.runme.insta(d.fleam);完整代码hadmtame=viewport content=nitil-cale=1.0，maxiu-scal=1.0， u-sclb=no /adboddiv las=HI_rap arpage 1, ate =0, mypVeron 1.， dtas;hu.plsReady（fuction() changate(); hi.refres(getNes); .oadMre（load)； checkVerson(）;)；funtin checkVersion() /.hui.Bk = fnctio() v rntView pus.webiew.crentWebie().rent（); antVevalS(hi.Bc（););funo hanget(teId)ate = caeId;geNes();funtio loadMor(） arhtml = ； hui.get( +page+&ate=+cat， fnction(da) f（data =nll)uiedLadMore(ue); return alse; hi.endLadMore()； va rrNews =data.slit(-hcSplior-); fo（var i ; arrNwslnth; +) varemArr rrwssli(-hcistplito-)； htm+= li href=javasipt:hioe(iohtm,true,nwsI:iteArr+)；+ /di + +itemAr2+/h1+ /dv+ /a; ar = documnt.reaElemen（u); ul.inneHTM = html; hui(l).appendTo(#newsList)； pag+; , functin() hi.toast（获取新闻失败，请检查网络);hucenterLoaig(true); hu.enRefesh(); )；funtin News() age ; vr tm = ； u.centeroading(）; hui.LodMoeIng= f; huscrollTo(0); ui.get( pge+catcat, fntin(data) ar aNews = dta.plit(-hcSpir-); fr( = 0; i hrfjavscript：h.oen（info.hm,tre,nesd:+temArr0+)；+ + +iter2+/h1+ + ; hi(#nesList).hm（tml+); hui.centerLoadig(tru）； hui.endRefh(）; pag+; , function(e) hitast(获取新闻失败，请检查网络）; hui.enteLang(tue); hu.endRefresh(); );scrt