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>

打完收工!