选项卡切换优化 - wap2app教程

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

进一步解释：

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

Tips：

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

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

• 配置选项卡页面规则（sitemap.json中实现）

创建本地选项卡

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

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

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

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

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

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

配置选项卡页面规则

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

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

M站改造