App项目的首页,index.html.
首页显示效果和样式的部分,不在此讨论,本项目采用的是mui框架。
mui框架(http://www.dcloud.io/mui.html)也是dcloud公司团队的框架,使用该框架的优点,1,以iOS 7为基础,补充部分Android特有控件,显示为原生UI效果;2.mui的窗口的管理,事件管理,ajax,上拉加载,下拉刷新等功能强大。笔者认为,第2点是最重要的。UI部分,也可以自行设计切图,mui不是必须的。
以下对笔者项目中的index.html的几个关键点做下重点说明:
1. 引入mui的js和css.
2. mui初始化.对于mui初始化的详细参数配置,后续文章将详细说明。
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
3. mui.plusReady. 关键点。
在app开发中,若要使用HTML5+扩展api,必须等plusready事件发生后才能正常使用,mui将该事件封装成了mui.plusReady()方法,涉及到HTML5+的api,建议都写在mui.plusReady方法中。
mui.plusReady只在webview新创建(页面新创建)的时候执行,对于预加载的页面再次打开时,mui.plusReady不会再次执行。所以,如果有个函数,需要在每次打开页面的时候都要执行,则要使用【页面预加载】和【自定义事件】技术。
mui.preload的底层调用的是plus.webview.
mui.plusReady(function(){
console.log("当前页面URL:"+plus.webview.currentWebview().getURL());
});
ps: HTML5+扩展api(http://www.html5plus.org/doc/h5p.html),后续文章详细说明。
4. 页面预加载。
App H5页面和普通web H5页面的区别是,
(1)web h5页面,每次打开的时候,都是在浏览器里重新渲染的,也就是每次都要重新创建,而App h5页面,可以用每次新建的方式,可以用预加载页面的方式。每次新建页面的问题是,如果页面加载比较耗时,会出现白屏的情况,对于用户体验和上架都是极为不利的;
(2)页面之间切换。web h5页面的跳转,可用window.location或者a标签的href,但是对于混合开发App,这是不行的,因为app的页面之间显示是通过切换来实现的。
页面预加载代码如下:
<script type="text/javascript" charset="utf-8">
mui.init();
//详情页面
var linePage = null;
//mui.plusReady只在webview新创建的时候执行.mui.preload的底层调用的是plus.webview.
mui.plusReady(function(){
//先判定是否已经登录
if(!checkLogin()){
goPage('login.html','');
}
//页面预加载
if(!linePage){
linePage = mui.preload({
url:'linelist.html',
id:'linelist.html'
});
}
//会员中心页面预加载
mui.preload({
url:'userCenter.html',
id:'userCenter.html'
});
console.log("index.html加载完毕");
});
</script>
通过mui.preload()的方式,是实现预加载的一种方法。预加载后,调用的方式如下:
//触发列表页面的事件
mui.fire(linePage,'lineID',{
lid:lid
});
//打开列表页面
mui.openWindow({
id:"linelist.html"
});
mui.fire的作用是触发页面的自定义事件,第一个参数是页面对象(linelist.html),第二个参数lineID,是在linelist.html页面中自定义的函数,第3个参数是向这个自定义函数的传递的参数。
mui.openWindow的作用是打开页面,只用配置页面的id即可,跟预加载的页面id一样。
5. 页面跳转
<div class="lvyous">
<a data-lid = "3">
<div class="lvyoue">
<img src="img/tue5.png" />
</div>
<h4>页面1</h4>
</a>
<a data-lid = "1">
<div class="lvyoue">
<img src="img/tue6.png" />
</div>
<h4>页面2</h4>
</a>
<a data-lid = "2">
<div class="lvyoue">
<img src="img/tue7.png" />
</div>
<h4>页面3</h4>
</a>
</div>
//绑定页面的点击事件
mui(".lvyous").on('tap','a',function(){
if(!checkLogin()){
goPage('login.html','');
return;
}
var lid = this.getAttribute("data-lid");
//触发列表页面的事件
mui.fire(linePage,'lineID',{
lid:lid
});
//打开列表页面
mui.openWindow({
id:"linelist.html"
});
});
懂Html就能开发App,博文持续更新,博主QQ:260737830!