首页 > 其他分享 >uniapp---wap2app去掉系统自带的导航栏

uniapp---wap2app去掉系统自带的导航栏

时间:2023-12-07 15:26:01浏览次数:46  
标签:uniapp false 状态栏 statusbar wap2app --- 首页 titleNView 导航

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

打完收工!

标签:uniapp,false,状态栏,statusbar,wap2app,---,首页,titleNView,导航
From: https://www.cnblogs.com/e0yu/p/17882082.html

相关文章

  • 实验四 Web服务器1-socket编程
    实验四Web服务器1-socket编程基于华为鲲鹏云服务器CentOS中(或Ubuntu),使用LinuxSocket实现:1.time服务器的客户端服务器,提交程序运行截图2.echo服务器的客户端服务器,提交程序运行截图,服务器把客户端传进来的内容加入“服务器进程pid你的学号姓名echo:”返回给客户端3.......
  • Veeam Recovery Orchestrator v7.0 (Windows) - 恢复编排
    VeeamRecoveryOrchestratorv7.0(Windows)-恢复编排VeeamDataPlatform|面向混合云和多云的备份和恢复监控和分析恢复编排请访问原文链接:https://sysin.org/blog/veeam-recovery-orchestrator-7/,查看最新版。原创作品,转载请保留出处。作者主页:sysin.org切勿将业......
  • Veeam ONE v12.1 (Windows) - 监控和分析
    VeeamONEv12.1(Windows)-监控和分析VeeamDataPlatform|面向混合云和多云的备份和恢复监控和分析恢复编排请访问原文链接:https://sysin.org/blog/veeam-one-12/,查看最新版。原创作品,转载请保留出处。作者主页:sysin.orgVEEAMONE赶快主动缓解威胁吧检测恶意备份......
  • Veeam Backup & Replication v12.1 (Windows) - 备份和恢复
    VeeamBackup&Replicationv12.1(Windows)-备份和恢复VeeamDataPlatform|面向混合云和多云的备份和恢复监控和分析恢复编排请访问原文链接:https://sysin.org/blog/veeam-backup-12/,查看最新版。原创作品,转载请保留出处。作者主页:sysin.org全球首屈一指的备份和......
  • linux-ELK安装配置
    前言:  ELK是三个开源项目的首字母缩写,这三个项目分别是:Elasticsearch、Logstash和Kibana。   •Elasticsearch是一个搜索和分析引擎。   •Logstash是服务器端数据处理管道,能够同时从多个来源采集数据,转换数据,然后将数据发送到诸如Elasticsearch等存储库中。......
  • vscode-go语言插件,调试器协议分析(二)
    版本信息Server:{"Commands":["gopls.add_dependency","gopls.add_import","gopls.add_telemetry_counters","gopls.apply_fix","gopls.change_signature","gopls.check_u......
  • UML类图解析总结-2023/12/07
    一、概述 类图是描述类、接口以及它们之间关系的图,是一种静态模型,显示了系统中各个类的静态结构。类图根据系统中的类以及各个类的关系描述系统的静态视图,可以用某种面向对象的语言实现类图中的类。   二、类之间的关系    其中由若到强的关系: 依赖—......
  • JavaSe(11) - 常用API(上)
    JavaSe(11)-常用API(上)P155Math基本数学计算的工具类,包含执行基本数学运算的方法,例如指数,对数,平方根,三角函数...方法名说明publicstaticintabs(inta)获取绝对值ceil(doublea)向上取整floor(doublea)向下取整round(floata)四舍五入......
  • a-table(AntDesign Vue)实现表格行上下拖动排序
    参考链接:https://blog.csdn.net/song_de/article/details/125218350https://blog.csdn.net/m0_61342618/article/details/132556739?utm_medium=distribute.pc_relevant.none-task-blog-2defaultbaidujs_baidulandingword~default-1-132556739-blog-125218350.235v39pc_releva......
  • 2023-2024-120231329《计算机基础与程序设计》第11周学习总结
    作业信息这个作业属于哪个课程https://edu.cnblogs.com/campus/besti这个作业要求在哪里https://www.cnblogs.com/rocedu/p/9577842.html#WEEK11这个作业的目标计算机科学概论第15,16章并完成云班课测试《C语言程序设计》第10章并完成云班课测试作业正文https:/......