mui webview 预加载

所谓的预加载技术就是在用户尚未触发页面跳转时,提前创建目标页面,这样当用户跳转时,就可以立即进行页面切换,节省创建新页面的时间,提升app使用体验。mui提供两种方式实现页面预加载。

 

方式一:通过mui.init方法中的preloadPages参数进行配置

mui.init({  // 可同时加载一个或者多个界面
    preloadPages:[ //加载一个界面
    
        url:'a.html'
        id:'a'
        styles:{},//窗口参数 
        extras:{},//自定义扩展参数
        subpages:[{},{}]//预加载页面的子页面 
    },{ // 可加载另外一个界面,不需要可直接删除
        url:'b.html'
        id:'b'
        styles:{},//窗口参数 
        extras:{},//自定义扩展参数
        subpages:[{},{}]//预加载页面的子页面 
    }
    ]
});

 


方式二:通过mui.preload方法预加载,一次只能预加载一个页面,若需加载多个webview,则需多次调用mui.preload()方法;

mui.plusReady(function(){
    var productView = mui.preload({
        url: 'list.html',
        id: 'list',
    });
    console.log(productView); //获得预加载界面的对象
});
 
页面显示

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
</head>

<body>
<button type="button" id="btn_open">打开预加载的页面</button>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init();
var page = null;
mui.plusReady(function() {
//预加载页面mui.preload必须放在plusReady事件中
page = mui.preload({
url: 'preload_sub.html',
id: 'preload_sub',
extras: {
name: 'durant'
}
});

})


document.getElementById("btn_open").addEventListener('tap', function() {
//预加载仅会提前创建webview,并不会默认打开,因此需要再使用mui.openWindow方法打开对应窗口,才会看到预加载效果。
if(page) {
//方法1:直接调用预加载页面对象page的show方法
//page.show();

//方法2:mui.openWindow
//mui.openWindow('preload_sub');//简写,通过ID打开指定页面
mui.openWindow({
url: 'preload_sub.html',
id: 'preload_sub'
}) //亦可写详细的参数

//方法3:getWebviewById(),通过ID找到webview,再调用show()方法
//var wv = plus.webview.getWebviewById('preload_sub'); //请在plus ready后再调用plus api,不一定非得写在plusReady事件中
//console.log(page == wv) //true,page就是'preload_sub'所对应的webview
//wv.show();
}
})
</script>
</body>

</html>

posted @ 2020-02-27 14:47  老榕树  阅读(775)  评论(0编辑  收藏  举报