DCloud_UNI_Trust
DCloud_UNI_Trust
  • 发布:2017-03-27 17:19
  • 更新:2018-12-27 11:58
  • 阅读:4569

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

分类:HTML5+

需求

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

普通方案

hello mui->tab bar(选项卡)->底部选项卡-webview模式,提供了多webview实现选项卡切换的方案。
实际开发中,如果页面内容过多,一次性加载多个webview并不是最优的方案。

更优方案

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

思路

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

具体实现

html部分

<header class="mui-bar mui-bar-nav">  
    <h1 class="mui-title">首页</h1>  
</header>  
<nav class="mui-bar mui-bar-tab">  
    <a class="mui-tab-item mui-active" data-id="home">  
        <span class="mui-icon mui-icon-home"></span>  
        <span class="mui-tab-label">首页</span>  
    </a>  
    <a class="mui-tab-item" data-id="contact">  
        <span class="mui-icon mui-icon-phone"></span>  
        <span class="mui-tab-label">电话</span>  
    </a>  
    <a class="mui-tab-item" data-id="email">  
        <span class="mui-icon mui-icon-email"></span>  
        <span class="mui-tab-label">邮件</span>  
    </a>  
    <a class="mui-tab-item" data-id="setting">  
        <span class="mui-icon mui-icon-gear"></span>  
        <span class="mui-tab-label">设置</span>  
    </a>  
</nav>  

子页面信息

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和流应用开发过程中的问题及需求,每个开发者都有自己的实现及优化方案。
如果大家有更多更好的方案,欢迎在社区分享以供学习交流。

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

4 关注 分享
417498289@qq.com 武夷 劉先森 1361810132@qq.com

要回复文章请先登录注册

emhost@163.com

emhost@163.com

每个webview都创建一个顶部栏的话,切换时会闪,咋解决,如果只创建一个顶部栏共用的话,顶部栏上的弹出菜单无法显示,因为菜单位于webview的底层,你们遇到这个问题没有,咋解决的
2018-12-27 11:58
2776332953@qq.com

2776332953@qq.com

有个很实际的问题,这种双webview的我已经实现了,从 mui 里拿来的代码,但是问题来了,我有4个页面,main list contact me 这4个页面都可能会有新数据,但是用这个方法,已经把这4个页面载进来了,来回切换的话每个页面还都是老数据,新数据不会显示出来。这该怎么处理?
2018-11-28 09:48
劉先森

劉先森

问一个问题,如果在第二个tab页面,跳转至一个新的webview,然后从这个webview怎么跳转到指定的tab页呢
2018-08-14 11:09
jxkshu

jxkshu

在电脑手机上都不能用,点击底部 选项,页面没反应,用你的上传的demo也没用,能不能给个能用的
2018-06-23 10:15
gqdsc@sohu.com

gqdsc@sohu.com

浏览器测试不行啊,报错,你们咧?
2018-03-29 15:27
MR_DU

MR_DU

回复 MR_DU: 这样要将back放到各个空间内部实现
2017-12-29 15:14
MR_DU

MR_DU

//mui例子 不要全加载,延时加载,或点击加载 或者主页ajax 后加页面回调加载。没测试会不会重复创建,先试试吧
var self = plus.webview.currentWebview();
var temp = {};
var sub = plus.webview.create(subpages[0], subpages[0], subpage_style);
temp[subpages[0]] = "true";
mui.extend(aniShow, temp);
self.append(sub);
//延时预加载页面
setTimeout(function() {
for(var i = 1; i < 5; i++) {
var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
}
},500);
2017-12-28 21:14
MR_DU

MR_DU

东西都不测的吗?工具也是,真是浪费人时间
2017-12-28 20:05
MR_DU

MR_DU

你们不不报错?
2017-12-28 19:58
657395646@qq.com

657395646@qq.com

亲,如果有侧滑菜单怎么办
2017-11-30 13:39
nmgwap@126.com

nmgwap@126.com

第一次打开会出现白屏,怎么优化?
2017-11-24 09:39
zero_19

zero_19

第一次打开页面会出现白屏
2017-09-21 16:59
杰哥seo

杰哥seo

mark
2017-06-19 16:09
skcy@vip.qq.com

skcy@vip.qq.com

mark~
2017-05-05 14:23
704409147@qq.com

704409147@qq.com

第一次切换的时候页面内容是短暂白屏闪出来的,能优化吗?
2017-04-24 15:06
417498289@qq.com

417498289@qq.com

回复 DCloud_UNI_Trust: 好的,谢谢
2017-03-29 08:37
DCloud_UNI_Trust

DCloud_UNI_Trust (作者)

回复 417498289@qq.com: 示例里面写的是对的,上传的附件有问题,已经更新了。
2017-03-28 18:03
417498289@qq.com

417498289@qq.com

回复 DCloud_UNI_Trust: 你可以自己在测试一下,我换了好几个手机都是同样的问题
2017-03-28 17:24
417498289@qq.com

417498289@qq.com

回复 DCloud_UNI_Trust: - -我在ios10.2系统上测试,从左到右一遍是好的,再从右到左,标题是变得,但是界面什么的都不显示了。。。
2017-03-28 16:45
DCloud_UNI_Trust

DCloud_UNI_Trust (作者)

回复 417498289@qq.com: iOS测试没问题的呀。
2017-03-28 16:34
417498289@qq.com

417498289@qq.com

亲 - -在ios上面,第一遍从左向右滑动,是可以的,但从右到左就不行了,用你的源码测试的
2017-03-28 16:11