混合开发App同h5页面开发,完全不同之一就是预加载技术。因为不可能所有的页面打开时,都需要重新创建,
(1) 每次重新创建页面,耗费性能;
(2)新建页面时,如果加载耗时较长,则会出现类似白屏问题,体验极差。
预加载和自定义事件,就可以解决这类问题。
(1)通过页面预加载,提前将页面内容加载完毕;
(2)触发页面的自定义事件,处理数据;
(3)打开页面,数据已经处理完毕,速度快。
1. 预加载
mui提供了2种方式的预加载。
1.1 preloadPages
mui.init({
preloadPages:[
{
url:prelaod-page-url,
id:preload-page-id,
styles:{},//窗口参数
extras:{},//自定义扩展参数
subpages:[{},{}]//预加载页面的子页面
}
],
preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制
});
该种方案优缺点如下:
(1)可预加载多个页面,但不会返回预加载每个页面的引用,若要获得对应webview引用,还需要通过plus.webview.getWebviewById方式获得;
(2)mui.init是异步执行的,执行完mui.init方法后,立即获得对应webview引用,可能会失败,例如:
mui.init({
preloadPages:[
{
url:'list.html',
id:'list'
}
]
});
var list = plus.webview.getWebviewByid('list');//立即执行的话,这里可能返回空;
1.2 mui.preload
var page = mui.preload({
url:new-page-url,
id:new-page-id,//默认使用当前页面的url作为id
styles:{},//窗口参数
extras:{}//自定义扩展参数
});
该方案的优缺点:
(1)可立即返回对应webview的引用;
(2)一次仅能预加载一个页面,若需加载多个webview,则需多次调用mui.preload()方法;
2. 自定义事件
2.1 定义
//自定义事件,获取商品详情
window.addEventListener('productInfo',function(event){
id = event.detail.id; //获取自定义事件传入的参数,event.detail.xx
var data = {id:id};
console.log("产品详情输入数据:"+JSON.stringify(data));
mui.post(productInfoURL,data,function(data){
console.log("产品详情输出数据:"+JSON.stringify(data));
if(data.success){
//数据处理
$("#imgpic").attr("src",data.img);
$("#description").html($("#hdiv").text());
}
},'json');
});
2.2 调用
加入以上自定义事件在页面productdetail.html中,以下代码是在a.html中调用的方法:
var detailPage = mui.preload({
url:'productdetail.html',
id:'productdetail.html'
});
//触发详情页自定义事件
mui.fire(detailPage,'productInfo',{id:id}); //id是传入的商品id
//打开详情页面
mui.openWindow({
id:"productdetail.html"
});
懂Html就能开发App,博文持续更新,博主QQ:260737830!