DCloud_UNI_CHB
DCloud_UNI_CHB
  • 发布:2017-10-30 19:48
  • 更新:2024-03-01 12:38
  • 阅读:54069

选项卡切换优化 - 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自定义选项卡文字颜色,如下为示例代码:  

```html  
<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 噗嗤 z***@sina.com hylong 8***@qq.com

要回复文章请先登录注册

拓荒

拓荒

回复 小小刀 :
单独设置一下titleNview 背景色就好了
2017-12-14 12:45
特高压的海绵

特高压的海绵

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

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