html 按需加载,【示例】webview模式选项卡实现按需加载

需求

使用多webview，实现选项卡的切换。

普通方案

hello mui->tab bar(选项卡)->底部选项卡-webview模式，提供了多webview实现选项卡切换的方案。

实际开发中，如果页面内容过多，一次性加载多个webview并不是最优的方案。

更优方案

微信这款应用，大家都非常熟悉。微信首页的选项卡切换，未切换过的选项内容，第一次会有个加载的过程。也就是所谓的“按需加载”，或者叫做“动态加载”。

思路

思路其实很清晰，首次只加载首个选项对应的webview，其它选项在切换时判定其对应的webview是否存在，从而决定是否需要创建webview。

具体实现

html部分

首页

首页

电话

邮件

设置

子页面信息

var subInfos = [{

url: 'html/home.html',

id: 'home'

}, {

url: 'html/contact.html',

id: 'contact',

}, {

url: 'html/email.html',

id: 'email'

}, {

url: 'html/setting.html',

id: 'setting'

}];

var subStyles = {

top: '45px',

bottom: '51px'

};

为了方便后面的操作，提供一个简单的方法来获取子页面信息。

// 根据id查询子页面的信息

var getSubInfoById = function(infoList, id) {

var result = null;

for(var i = 0, len = infoList.length; i < len; i++) {

var _info = infoList[i];

if(_info.id === id) {

result = _info;

break;

}

}

return result;

};

加载首选项webview

var mainWv = plus.webview.currentWebview();

var titleEL = document.querySelector('.mui-title');

var activeTab = '';

// 默认只加载首页webview

var homeWv = plus.webview.create(subInfos[0].url, subInfos[0].id, subStyles);

mainWv.append(homeWv);

activeTab = subInfos[0].id;

选项卡切换

// 点击切换，动态创建其它webview；

mui('.mui-bar-tab').on('tap', 'a.mui-tab-item', function(e) {

var _self = this;

var targetTab = _self.getAttribute('data-id');

if(targetTab === activeTab) {

return;

}

titleEL.innerText = _self.querySelector('.mui-tab-label').innerText;

var _subWv = plus.webview.getWebviewById(targetTab);

// 若webview不存在，则创建；

if(!_subWv) {

var _subInfo = getSubInfoById(subInfos, targetTab);

_subWv = plus.webview.create(_subInfo.url, _subInfo.id, subStyles);

mainWv.append(_subWv);

}

_subWv.show();

// 隐藏之前的webview

plus.webview.getWebviewById(activeTab).hide('none');

activeTab = targetTab;

});

});

双首页方案

除了上面提供的方案，还可以使用HBuilder8.0后提供的双首页配置来进一步加快加载速度。也就是把第一个选项对应的webview，作为secondwebview，直接在manifest.json中配置即可。

参考双首页secondwebview配置的使用

更多

关于5+app和流应用开发过程中的问题及需求，每个开发者都有自己的实现及优化方案。

如果大家有更多更好的方案，欢迎在社区分享以供学习交流。

附上源码，真机运行即可预览效果。