DCloud_UNI_CHB
DCloud_UNI_CHB
  • 发布:2017-10-30 19:48
  • 更新:2019-01-23 15:54
  • 阅读:22597

选项卡切换优化 - 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文件,我们需要在这个文件中生成本地选项卡菜单;首先将如下注释代码恢复:

    <!--使用本地选项卡时,将如下两行代码注释取消-->  
    <!--<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 关注 分享
DCloud_UNI_Trust 噗嗤 zxkj0546@sina.com hylong 81780270@qq.com

要回复文章请先登录注册

2650097707@qq.com

2650097707@qq.com

回复 751813012@qq.com: 在app.js里写就可以,但是那样刷新与原生刷新体验差距非常大,web2app体验性能稍微比较差
2019-01-23 15:54
天使中的魔鬼

天使中的魔鬼

回复 519599433@qq.com: 哥们你解决了吗?
2019-01-21 11:02
cao@rgoo.com

cao@rgoo.com

回复 天使中的魔鬼: Android版的
2019-01-18 16:30
519599433@qq.com

519599433@qq.com

回复 天使中的魔鬼: 我也遇到同样的问题
2019-01-17 19:08
天使中的魔鬼

天使中的魔鬼

Android 本地离线打包。分享无法唤起微信,底部菜单(选项卡)显示空白。
2019-01-10 16:07
天使中的魔鬼

天使中的魔鬼

回复 cao@rgoo.com: 你是什么环境?Android 还是Ios
2019-01-10 16:07
cao@rgoo.com

cao@rgoo.com

TabBar is not defined,有人能帮帮忙吗?
2019-01-02 00:29
天使中的魔鬼

天使中的魔鬼

回复 心宇星辰: 哥们,解决了吗?
2018-12-26 13:22
天使中的魔鬼

天使中的魔鬼

回复 DCloud_UNI_CHB: 在 同时使用tabBar 和titleNView 的时候出现高度显示问题。请问可以设置tabBar的高度吗?
2018-12-24 15:29
天使中的魔鬼

天使中的魔鬼

回复 银少: 哥们,请问下添加底部选项卡后,顶部导航条出现错位问题,你最后怎么解决的?
2018-12-24 11:05
cao@rgoo.com

cao@rgoo.com

提示找不到__wap2apptabbar.js和__wap2apptabbar.css两个文件,怎么解决?
2018-12-20 17:48
心宇星辰

心宇星辰

web2app的选项卡点击后,除了首次进入,后面点击不刷新,导致购物车里产品不显示,非要手动下拉刷新 头疼怎么解决
2018-11-29 11:02
751813012@qq.com

751813012@qq.com

回复 2650097707@qq.com: 解决了么?
2018-09-28 16:05
2650097707@qq.com

2650097707@qq.com

点击选项卡,应该是刷新,web2app的选项卡点击后,无法刷新
2018-08-08 20:11
DCloud_UNI_CHB

DCloud_UNI_CHB (作者)

回复 774314946@qq.com: 如果tabbar是M站上的,可以通过注入css隐藏;如果是本地的,则将登录页作为新窗口打开即可。
2018-08-01 11:26
774314946@qq.com

774314946@qq.com

请问登录页面怎么隐藏tabbar的呢??
2018-08-01 07:22
银少

银少

请问一下,选项卡的webview怎么获取
2018-07-30 12:21
银少

银少

请问一下,首页判断是否登录,没有登录跳转到登录页,怎么跳那
2018-07-30 11:52
银少

银少

回复 银少: 已解决,只要设置tab-item 的背景就好了
2018-07-27 13:20
银少

银少

回复 1161571219@qq.com: 什么时候加
2018-07-27 13:17
银少

银少

怎么设置选项卡的背景色
2018-07-27 11:44
1161571219@qq.com

1161571219@qq.com

回复 1161571219@qq.com: 知道了,首页不加tabbar即可
2018-04-09 20:33
1161571219@qq.com

1161571219@qq.com

登录页面如何取消tabbar
2018-04-09 20:23
1161571219@qq.com

1161571219@qq.com

我的网站登录成功之后,自动显示的是第四个icon,但是我配置pages的首页的时候,每次登录成功都是webview显示的是首页,但是icon却是第一个icon,而且总也切换不到第一个icon应该对应的那个页面
2018-04-09 16:50
qianwb2011@163.com

qianwb2011@163.com

选项卡,其他样式这么设置?只能设置字体吗? 比如背景颜色,什么的 都不行吗?
2018-03-20 16:39
hgdc

hgdc

已有wap站,直接输入网址打包后,发现上下滑动滚动的时候明显卡慢了很多,是什么原因呢
2018-02-19 22:02
10940639@qq.com

10940639@qq.com

回复 小小刀: 帅哥 后面是怎么解决的
2018-01-11 15:56
602390443@qq.com

602390443@qq.com

第一次启动时,当切换选项卡时 首页总是一闪而过。这是怎么回事?
2018-01-10 15:07
树叶

树叶

请问,选项卡会被导航栏顶上去还有指定某一个选项卡每次都刷新该怎么做?
2017-12-18 15:25
邢天城

邢天城

回复 小小刀: 单独设置一下titleNview 背景色就好了
2017-12-14 12:45
452009426@qq.com

452009426@qq.com

回复 小小刀: 所以 选项卡 不好用对吗? 你那边使用什么替代方案做出首页选项卡的效果?
2017-12-08 16:03
DCloud_UNI_Trust

DCloud_UNI_Trust

回复 小小刀: 请单独开个帖子,描述问题,并且贴一个测试流应用的二维码。
2017-12-01 17:08
小小刀

小小刀

选项卡的高度根本变不了,定死了,还有如果titleNview和tabBar同时出现就会把titleNview原生导航条给顶上去跟状态栏重叠了,坑爹
2017-12-01 15:52
DCloud_UNI_CHB

DCloud_UNI_CHB (作者)

回复 噗嗤: .tab-item {box-shadow: 0 0 1px rgba(0,0,0,.85);}
2017-11-06 12:22
噗嗤

噗嗤

回复 DCloud_UNI_CHB: 请问怎么给选项卡加上下面的属性来凸显区分:
-webkit-box-shadow: 0 0 1px rgba(0,0,0,.85);
box-shadow: 0 0 1px rgba(0,0,0,.85);

感觉现在的样式不是很容易看出来选项卡的边界
2017-11-04 16:19
噗嗤

噗嗤

回复 DCloud_UNI_CHB: 已确认是url匹配规则的问题,非常感谢~~
2017-11-04 15:14
DCloud_UNI_CHB

DCloud_UNI_CHB (作者)

回复 噗嗤: 一般应该是url匹配规则的问题,第一个选项卡url需要满足首页的matchUrls规则;如果问题一直存在,就将应用发行到流应用测试平台,给出一个测试二维码(或appid),我们会复查。另外,wap2app交流群(qq):320865692
2017-11-03 11:56
噗嗤

噗嗤

回复 DCloud_UNI_CHB: 那在第三选项卡的时候,点击第一个选项卡,自动跳到第二选项卡的内容是什么原因呢?就好像第一选项卡并不存在一样。
2017-11-02 17:27
DCloud_UNI_CHB

DCloud_UNI_CHB (作者)

回复 噗嗤: 首页,在任意一个选项卡页面,按返回,都应该是退出应用
2017-11-02 17:01
噗嗤

噗嗤

好奇怪,M站本身并没有选项卡,用这个增加了选项卡之后,来回点击选项卡测试发现,如果点击了第三个选项卡,再去点击第一个选项卡的时候,会跳到第二个选项卡,而不会跳到第一个选项卡,按下返回按键,在某些页面没有反应,而在某些页面下会退出app,正常情况下应该是按下返回键回到上一页的。
2017-11-01 17:49
逗逗水

逗逗水

回复 dzcms@qq.com: 情况一: 如果用的mui的scroll控件。
那么在初始化时,设置indicators为false即可

$('#scroll').scroll({indicators: false});
情况二: 如果是5+环境下的webview的滚动条。

plus.webview.currentWebview().setStyle({scrollIndicator:'none'});
2017-11-01 13:39
dzcms@qq.com

dzcms@qq.com

如何隐藏滚动条?
2017-10-31 01:17