uniapp---wap2app去掉系統自帶的導航欄

在用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>

打完收工!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章