在用uniapp進行將wap站轉化爲app的時候,默認打包後的文件,帶有系統的導航欄,下面是去除的辦法:
第一步:找到 sitemap.json
設置 titleNView爲false:
第二步:在pages加入
{ "webviewId": "common", "matchUrls": [{ "hostname": "R:.*", "pathname": "R:.*" }] }
完整代碼配置:
{ "global": { "webviewParameter": { // "titleNView": { // "autoBackButton": false, // "backgroundColor": "#f7f7f7",//導航欄背景色 // "titleColor": "#000000",//標題顏色 // "titleSize": "17px" // }, "titleNView": false, "statusbar": { //系統狀態欄樣式(前景色) "style": "dark" }, "appendCss": "", "appendJs": "" }, "easyConfig": {} }, "pages": [ { "webviewId": "__W2A__www.zhipeile.com",//首頁 "matchUrls": [ { "href": "https://www.zhipeile.com" }, { "href": "https://www.zhipeile.com/" } ], "webviewParameter": { "titleNView": false, "statusbar": { //狀態條背景色, //首頁不使用原生導航條,顏色值建議和global->webviewParameter->titleNView->backgroundColor顏色值保持一致 //若首頁啓用了原生導航條,則建議將首頁的statusbar配置爲false,這樣狀態條可以和原生導航條背景色保持一致; "background": "#f7f7f7" } } }, { "webviewId": "common", "matchUrls": [{ "hostname": "R:.*", "pathname": "R:.*" }] } ] }
第三步:設置狀態欄
通過上面兩步的操作,我們已經去掉了系統自帶的導航欄,但是會發現標題欄和狀態欄是重疊的,需要重新設置狀態欄:
首先:manifest.json -> 源碼視圖,找到 statusbar,將 immersed 的值設置爲 false 或 none:
此時的狀態欄的顏色變成了灰色,可以在client_index.html,在html中添加如下代碼:
添加代碼:
<script type="text/javascript"> if(window.plus){ plusReady() }else{ document.addEventListener('plusready',plusReady,false) } function plusReady(){ plus.navigator.setStatusBarBackground('#FFFFFF'); plus.navigator.setStatusBarStyle('dark'); } </script>
打完收工!