原生追加html代码,wap2app（十）--wap2app 添加原生底部导航，添加原生标题栏，填坑...
一、添加原生标题栏
1.打开 sitemap.json文件 --> page配置下的"webviewId"为“common”的整个内容配置删除或注释，这时候会页面的原生标题就会出现，是带原生标题、网页标题的双标题页面。
效果：
2.原生标题默认灰色背景，黑色字体，需要根据业务需求进行修改标题样式：
sitemap.json文件 --> global-->webviewParameter 下将 titleNView：false改为如下代码修改全局标题样式：
"titleNView": {//启用原生导航条
"backgroundColor": "#fff",//导航栏背景色
"titleColor": "#333"//标题颜色为黑色
},
global代码：
"global": {"webviewParameter": {"titleNView": {//启用原生导航条
"backgroundColor": "#fff",//导航栏背景色
"titleColor": "#333"//标题颜色
},"statusbar": {//系统状态栏样式(前景色)
"style": "dark"},"appendCss": "","appendJs": ""},"easyConfig": {"quit": {"toast": {"showFeedback": false //不显示“反馈意见”链接，默认为true
}
},"open":{"animation":{//窗口切换动画配置
"type":"none"//窗口动画类型
},"waiting":true //禁用waiting，打开page1页面时，不显示waiting等待框
}
}
},
效果上图，但原生标题是白色背景，黑色字体。
3.由于网页本身是有标题的，还需要在网站中对app的网页标题进行隐藏处理，只显示app的原生标题，具体根据网站的业务逻辑处理，
if(navigator.userAgent.indexOf("Html5Plus") > -1){
$("header").css('cssText','display:none !important');
}
效果如下，对于app中的页面只有原生标题：
另外，global是对全局页面的标题进行样式设置，如果有页面需要单独设置的，可以在page下进行单独配置，例如配置如下页面：
{"webviewId":"myIndex","matchUrls":[
{"href":"http://10.10.10.145/hdsj/trunk/user/feedback"}
],"webviewParameter": {"titleNView": {//首页启用原生导航条
"backgroundColor": "#3478f6",//导航栏背景色
"titleColor": "#fff",//标题颜色为白色
"titleText":"我的页面"},"statusbar": {//系统状态栏样式(前景色)
"style": "dark"},"appendCss": "","appendJs": ""}
}
修改了标题背景色和字体颜色，效果如下：
二、添加原生底部导航
1.在client_index.html文件中，将如下两行代码的注释取消：
并在当前文件配置选项卡的内容、图标、选中图标：
var global_url = "xxxx.com";newTabBar({
list: [{
url: global_url,
text:"首页",
iconPath:'image/bottom/huodong1.png',
selectedIconPath:'image/bottom/huodong2.png'}, {
url: global_url+ "card/",
text:"集市",
iconPath:'image/bottom/shiji1.png',
selectedIconPath:'image/bottom/shiji2.png'}, {
url: global_url+ "user/edit_shop",
text:"名片",
iconPath:'image/bottom/mingpian1.png',
selectedIconPath:'image/bottom/mingpian2.png'}, {
url: global_url+ "user",
text:"我的",
iconPath:'image/bottom/wode1.png',
selectedIconPath:'image/bottom/wode2.png'}]
});
默认选项卡选中字体的颜色是红色的，还需要修改样式成需要的颜色：
client_index.html 添加样式：
.tab-item{color:#969696;
}.tab-item.active{color:#3478f6;
}
2.还需要在sitemap.json文件中再配置一下。在首页配置下，添加选项卡的配置：
在sitemap.json -->pages-->webviewParameter 添加配置代码(根据项目业务，添加相关内容)
"tabBar": {//选项卡配置，仅首页支持
"height": "50px",//选项卡高度，默认为50px
"list": [
{"url": "http://x.x.x.x/index/" //tab1页面地址
}, {"url": "http://x.x.x.x/index/find" //tab2页面地址
}, {"url": "http://x.x.x.x/index/cart/" //tab3页面地址
}, {"url": "http://x.x.x.x/index/user" //tab3页面地址
}
]
}
整个pages的完整配置代码：
"pages": [
{"webviewId": "__W2A__android.xxx.com",//首页
"matchUrls": [
{"href": "http://x.x.x.x/index/"}, {"href": "http://x.x.x.x/index"}
],"webviewParameter": {"titleNView": false,"statusbar": {//状态条背景色，
//首页不使用原生导航条，颜色值建议和global->webviewParameter->titleNView->backgroundColor颜色值保持一致
//若首页启用了原生导航条，则建议将首页的statusbar配置为false，这样状态条可以和原生导航条背景色保持一致；
"background": "#f7f7f7"},"tabBar": {//选项卡配置，仅首页支持
"height": "50px",//选项卡高度，默认为50px
"list": [
{"url": "http://x.x.x.x/index/" //tab1页面地址
}, {"url": "http://x.x.x.x/index/find" //tab2页面地址
}, {"url": "http://x.x.x.x/index/cart/" //tab3页面地址
}, {"url": "http://x.x.x.x/index/user" //tab3页面地址
}
]
}
}
}
]
运行之后效果如下：
三、填坑
以上，添加原生头部和原生底部选项卡，本地运行调试都是正常，但是打包之后，下载安装，首次进入(从引导页点击“立即体验”进入项目)时不显示原生头部和原生底部，
引导页点击“点击立即体验”的代码如下：
document.getElementById("start").addEventListener("tap", function() {/**
* 向本地存储中设置launchFlag的值，即启动标识；
* http://www.html5plus.org/doc/zh_cn/storage.html#plus.storage.setItem*/plus.storage.setItem("launchFlag", "true");
mui.openWindow({
url:"http://x.x.x.x/index",
id:"main",
extras: {
mark:"gudie" //同样，这里也只是个标识，实际开发中并不用；
}
});
});
会发现这里使用mui.openWindow重新打开了首页，这里的首页没有做底部/头部的配置，如果在点击“立即体验”时只关闭引导页的页面而不是重新跳转，即可避免这个问题，解决代码如下：
document.getElementById("start").addEventListener("tap", function() {/**
* 向本地存储中设置launchFlag的值，即启动标识；
* http://www.html5plus.org/doc/zh_cn/storage.html#plus.storage.setItem*/plus.storage.setItem("launchFlag", "true");
plus.webview.currentWebview().close();
});
其中，
plus.webview.currentWebview().close();
关闭当前引导页。