DCloud_UNI_CHB
DCloud_UNI_CHB
  • 发布:2017-10-30 19:48
  • 更新:2020-05-23 04:32
  • 阅读:37259

选项卡切换优化 - wap2app教程

分类:wap2app

体验差距

相比原生App,M站选项卡切换体验较差,主要体现在:原生App切换选项卡时,选项卡区域不变,仅内容区view变化;但M站选项卡切换时,会将整个页面重新加载,经常出现白屏现象。

优化思路

wap2app的优化方案是拆分选项卡区域和内容区,变成两个单独的webview;切换选项卡时,选项卡区webview仅切换高亮状态,然后通知内容区webview加载新的页面,这样就可以避免整体白屏现象。

进一步解释:

  • wap2app客户端维护一个本地html文件,用于显示选项卡内容及高亮状态切换,下图中“选项卡区 - webview 1”
  • 内容依然从服务端M站加载,下图中"可变内容区 - webview 2"

Tips:

  • 因为已经存在本地的选项卡,需要M站稍作改造,判断在流应用环境下,不生成(或隐藏)选项卡DOM;
  • wap2app目前仅支持首页显示选项卡优化实现,且需要HBuilder版本在8.8.5以上。

配置方案

选项卡的优化,分为客户端配置和M站改造

客户端配置

客户端的配置分为两个部分:

  • 创建本地选项卡(client_index.html中实现)
  • 配置选项卡页面规则(sitemap.json中实现)

创建本地选项卡

HBuilder中新建的wap2app项目中默认包含有一个client_index.html文件,我们需要在这个文件中生成本地选项卡菜单;首先下载 __wap2apptabbar.css__wap2apptabbar.js 两个文件放到项目根目录,将如下注释代码恢复:

    <!--使用本地选项卡时,将如下两行代码注释取消-->  
    <!--<link rel="stylesheet" type="text/css" href="./__wap2app_tabbar.css"/>-->  
    <!--<script src="./__wap2app_tabbar.js" type="text/javascript" charset="utf-8"></script>-->

然后初始化选项卡菜单,在body节点下增加类似如下代码(实际项目中需替换为自己M站地址及图标):

<script>  
    new TabBar({  
        list: [{  
            url: "http://m.exampple.com/",  
            text: "首页",  
            iconPath: 'home.png',  
            selectedIconPath: 'home-selected.png'  
        }, {  
            url: "http://m.exampple.com/list.html",  
            text: "示例",  
            iconPath: 'tab1.png', //本地图标  
            selectedIconPath: 'tab1-selected.png'  
        }, {  
            url: "http://m.exampple.com/about",  
            text: "关于",  
            iconPath: 'http://m.exampple.com/imgs/about.png',//网络图标  
            selectedIconPath: 'http://m.exampple.com/imgs/about-selected.png'  
        }]  
    });  
</script>

选项卡构造函数中参数解释如下:

  • url:点击选项卡需要跳转的url地址,需使用完整网络地址
  • text:选项卡文字描述
  • iconPath:选项卡默认图标,可以是本地地址(相对client_index.html的相对路径),也可以是网络地址
  • selectedIconPath:选项卡高亮图标,可以是本地地址(相对client_index.html的相对路径),也可以是网络地址

选项卡文字颜色配置

因为是本地HTML实现的选项卡,因此可以在client_index.html中通过css自定义选项卡文字颜色,如下为示例代码:

<style type="text/css">  
    /*自定义选项卡文字颜色示例*/  
    .tab-item {  
        color: black;//选项卡文字默认为黑色  
    }  
    .tab-item.active {  
        color: blue;//选项卡文字高亮时为蓝色  
    }  
</style>

Tips:自定义的css代码需要放在__wap2app_tabbar.css的引用之后

配置选项卡页面规则

另外,我们还需要在sitemap.json中配置选项卡关联关系,示例如下:

{  
    "webviewId": "__W2A__m.example.com",  
    "matchUrls": [  
        //URL匹配规则   
    ],  
    "webviewParameter": {  
        "tabBar": {//选项卡配置,仅首页支持  
            "height": "50px",//选项卡高度,默认为50px  
            "list": [  
                {  
                    "url": "http://m.exampple.com/" //tab1页面地址  
                }, {  
                    "url": "http://m.exampple.com/list.html" //tab2页面地址  
                }, {  
                    "url": "http://m.exampple.com/about.html"  //tab3页面地址  
                }  
            ]  
        }  
    }  
}

Tips:如上示例中,tab1的页面url地址,需满足首页matchUrls的匹配规则

M站改造

M站需判断在流应用环境下,不生成(或隐藏)选项卡DOM,实现方案参考:去除M站DOM元素

5 关注 分享
Trust 噗嗤 zxkj0546@sina.com hylong 81780270@qq.com

要回复文章请先登录注册

hgdc

hgdc

回复 qq820805144 :
给个具体思路啊,wap2app自带的选项卡bug太多,首次切换连原生导航也白屏了,切换后,无法刷新,无法返回后退。
2020-05-23 04:32
qq820805144

qq820805144

回复 hgdc :
5+app也可以,反正有很多优化的方法
2020-05-22 10:54
hgdc

hgdc

回复 qq820805144 :
什么意思呢?uniapp封装选项卡后再移植到WAP2APP里面?
2020-05-20 16:39
1097856398@qq.com

1097856398@qq.com

回复 357730572@qq.com :
请问您现在解决了吗,我也是想扩展首页功能,获取不到webview
2020-05-19 14:40
qq820805144

qq820805144

选项卡封装网址这种最好用uniapp封装可解决返回后退这些问题
2020-04-15 00:21
卡芭

卡芭

回复 2650097707@qq.com :
我的也是,问题解决了吗?
2020-04-14 14:45
卡芭

卡芭

选项卡如何解决手机后退的问题
2020-04-14 10:50
956255348@qq.com

956255348@qq.com

回复 357730572@qq.com :
有解决办法了么
2020-04-08 10:39
296656132@qq.com

296656132@qq.com

tabbar初始化后如何render。需求:消息页面的未读消息显示再tabbar上面,并且可以更新
2020-04-01 11:01
357730572@qq.com

357730572@qq.com

wap2app设置底部选项卡,默认进入首页,首页的show执行一次,但是在onshow中获取webview对象,获取不到。
切换选项卡,其他的页面onshow都能正常执行,切换回首页,onshow不再执行。
这也就导致,我想拓展首页的功能,在onshow中写不了代码,连自定义刷新都加不上。
2020-02-24 14:44