选项卡切换优化 - 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的匹配规则