一、添加原生標題欄
添加原生標題欄可以參照 《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文件中，將如下兩行代碼的注釋取消：
<!--使用本地選項卡時，將如下兩行代碼注釋取消--> <link rel="stylesheet" type="text/css" href="__wap2apptabbar.css" /> <script src="__wap2apptabbar.js" type="text/javascript" charset="utf-8"></script>
並在當前文件配置選項卡的內容、圖標、選中圖標：
var global_url = "xxxx.com"; new TabBar({ 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();
關閉當前引導頁。
添加底部原生選項卡可參考官方地址：http://ask.dcloud.net.cn/article/12878
轉載時請注明出處及相應鏈接，本文永久地址：https://www.cnblogs.com/wangxiaoling/p/10072292.html，文章標題備注轉載，如：xxx【轉載】,謝謝！