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

帥到要去報警發表於2023-12-07
APP

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

打完收工！

相關文章