选项卡切换优化 - wap2app教程

体验差距

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

优化思路

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

进一步解释：

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

选项卡切换优化 - 图1

Tips：

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

配置方案

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

客户端配置

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

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

创建本地选项卡

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

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

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

  1. <script>  
  2.     new TabBar({  
  3.         list: [{  
  4.             url: "http://m.exampple.com/",  
  5.             text: "首页",  
  6.             iconPath: 'home.png',  
  7.             selectedIconPath: 'home-selected.png'  
  8.         }, {  
  9.             url: "http://m.exampple.com/list.html",  
  10.             text: "示例",  
  11.             iconPath: 'tab1.png', //本地图标  
  12.             selectedIconPath: 'tab1-selected.png'  
  13.         }, {  
  14.             url: "http://m.exampple.com/about",  
  15.             text: "关于",  
  16.             iconPath: 'http://m.exampple.com/imgs/about.png',//网络图标  
  17.             selectedIconPath: 'http://m.exampple.com/imgs/about-selected.png'  
  18.         }]  
  19.     });  
  20. </script>

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

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

选项卡文字颜色配置

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

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

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

配置选项卡页面规则

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

  1. {  
  2.     "webviewId": "__W2A__m.example.com",  
  3.     "matchUrls": [  
  4.         //URL匹配规则   
  5.     ],  
  6.     "webviewParameter": {  
  7.         "tabBar": {//选项卡配置，仅首页支持  
  8.             "height": "50px",//选项卡高度，默认为50px  
  9.             "list": [  
  10.                 {  
  11.                     "url": "http://m.exampple.com/" //tab1页面地址  
  12.                 }, {  
  13.                     "url": "http://m.exampple.com/list.html" //tab2页面地址  
  14.                 }, {  
  15.                     "url": "http://m.exampple.com/about.html"  //tab3页面地址  
  16.                 }  
  17.             ]  
  18.         }  
  19.     }  
  20. }

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

M站改造

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