HBuilderX打包web网站之wap2app设置底部菜单tabBar-连界网络

第三步，取消注释：

第四步，在client_index.html设置tabBar代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="viewport-fit=cover,width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<!--使用本地选项卡时，将如下两行代码注释取消-->
<link rel="stylesheet" type="text/css" href="__wap2apptabbar.css" />
<script src="__wap2apptabbar.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
/*自定义选项卡文字颜色示例*/
.tab-item {
color: black;//选项卡文字默认为黑色
}
.tab-item.active {
color: blue;//选项卡文字高亮时为蓝色
}
</style>
</head>

<body>

<script>
new TabBar({
list: [{
url: "https://huamaotianxing.com/",
text: "首页",
iconPath: 'home.png',
selectedIconPath: 'home-selected.png'
}, {
url: "https://huamaotianxing.com/open/course/explore",
text: "在看",
iconPath: 'tab1.png', //本地图标
selectedIconPath: 'tab1-selected.png'
}, {
url: "https://huamaotianxing.com/my/courses/learning",
text: "我的",
iconPath: 'http://m.exampple.com/imgs/about.png',//网络图标
selectedIconPath: 'http://m.exampple.com/imgs/about-selected.png'
}]
});
</script>

</body>

</html>

第6步，在sitemap.json文件配置一下：

{
"global": {
"webviewParameter": {
"titleNView": {
"autoBackButton": true,
"backgroundColor": "#f7f7f7",//导航栏背景色
"titleColor": "#000000",//标题颜色
"titleSize": "17px"
},
"statusbar": {
//系统状态栏样式(前景色)
"style": "dark"
},
"appendCss": "",
"appendJs": ""
},
"easyConfig": {}
},
"pages": [
{
"webviewId": "__W2A__huamaotianxing.com",//首页
"matchUrls": [
{
"href": "https://huamaotianxing.com"
}, {
"href": "https://huamaotianxing.com/"
}
],
"webviewParameter": {
"titleNView": false,
"statusbar": {
//状态条背景色，
//首页不使用原生导航条，颜色值建议和global->webviewParameter->titleNView->backgroundColor颜色值保持一致
//若首页启用了原生导航条，则建议将首页的statusbar配置为false，这样状态条可以和原生导航条背景色保持一致；
"background": "#f7f7f7"
},
"tabBar": {//选项卡配置，仅首页支持
"height": "50px",//选项卡高度，默认为50px
"list": [
{
"url": "https://huamaotianxing.com/" //tab1页面地址
}, {
"url": "https://huamaotianxing.com/open/course/explore" //tab2页面地址
}, {
"url": "https://huamaotianxing.com/my/courses/learning" //tab3页面地址
}
]
}
}
}
]
}

第7步，运行到真机上测试了，ok了。

文章版权归作者所有，未经允许请勿转载。

THE END