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>
打完收工!
uniapp---wap2app去掉系统自带的导航栏的更多相关文章
- Android开发——去掉系统自带标题栏的几种方式
https://blog.csdn.net/qq_28585471/article/details/75991613 今天在练习自定义标题栏(Android初级开发(四)——补充3)的过程中遇到了隐藏 ...
- uni-app h5端跳转到底部导航栏的时候使用方法uni.switchTab跳转刷新页面更新数据
h5端的uni-app项目 需求:uni-app h5端跳转到底部导航栏的时候使用方法uni.switchTab跳转刷新页面更新数据 百度的方法如下: uni.switchTab({ url: '/p ...
- c# winform 让Form去掉系统自带的关闭
在桌面系统时我们有时候想把winform 自带的关闭按钮和最大化最小化都去掉,我遇到了类似的情况,在网上一查也有很多答案,但是最后找到了一个最简单的答案,一句话的事,今天记录一下,就是让大家都简单的实 ...
- 04 uni-app框架学习:禁用顶部原生导航栏
1.在pages.json中配置 比如要首页禁用 就在首页这个选项里 加上这几句代码 2.效果如下
- iOS 自定义导航栏笔记
一.UINavigationBar的结构 导航栏几乎是每个页面都会碰到的问题,一般两种处理方式:1.隐藏掉不显示 2.自定义 1. 添加导航栏 TestViewController * mainVC ...
- Android去掉listView,gridView等系统自带阴影
当我们使用listView的时候,拉到顶,或是拉到底部的时候,我们会发现有系统自带的阴影效果出现,不同手机出现的颜色可能还会不一样. 在以前我始终都有注意到此问题,一直以为是系统自带的,不能去掉.也没 ...
- 03 uniapp自定义导航栏的开发
在我眼里自定义导航分2类: 原生基础上 || 非原生基础上 总结:项目当中能原生就原生,提高性能 区别 uni-app 自带原生导航栏,在pages.json里配置. 原生导航的体验更好,渲染新页面时 ...
- Android中实现全屏、无标题栏的两种办法(另附Android系统自带样式的解释)
在进行UI设计时,我们经常需要将屏幕设置成无标题栏或者全屏.要实现起来也非常简单,主要有两种方法:配置xml文件和编写代码设置. 1.在xml文件中进行配置 在项目的清单文件AndroidManife ...
- 关于uni-app开发的微信小程序顶部导航条机型适配
背景: 小程序顶部导航栏那里的样式和功能都是小程序自带的,当我们在pages.json里的pages里新加一条页面配置时,会自动生成一个带顶部导航栏的空白页面,当然也可以再配置里"navig ...
- iOS10 的适配问题,你遇到了吗?导航栏标题和返回按钮神奇的消失了
苹果系统升级后好多应用都发了新版本来适配,今天就来分享一下我的适配历程. 首先是出现的问题: 1.push一个控制器,返回按钮和标题神奇的消失了,打开三维视图(比较坑的是有的版本老到打不开三维视图 ) ...
随机推荐
- elasticsearch中的数据类型search_as_you_type及查看底层Lucene索引
search_as_you_type字段类型用于自动补全,当用户输入搜索关键词的时候,还没输完就可以提示用户相关内容.as_you_type应该是说当你打字的时候.它会给索引里的这个类型的字段添加一些 ...
- Flutter系列文章-Flutter在实际业务中的应用
不同场景下的解决方案 1. 跨平台开发: 在移动应用开发中,面对不同的平台(iOS和Android),我们通常需要编写两套不同的代码.而Flutter通过一套代码可以构建适用于多个平台的应用,大大提高 ...
- Lazada详情接口的应用
Lazada是东南亚电商领域的一家知名企业,Lazada商品详情接口是Lazada提供的一种获取Lazada平台商品详细信息的接口.本文将介绍Lazada商品详情接口的使用方法和相关注意事项. 第一步 ...
- 问题总结:浮点数之间的等值判断,基本数据类型不能用==来比较,包装数据类型不能用equals来判断
浮点数之间的等值判断,基本数据类型不能用==来比较,包装数据类型不能用equals来判断. 说明:浮点数采用"尾数+阶码"的编码方式,类似于科学计数法的"有效数字+指数& ...
- python基础:元组(tuple)列表(list)介绍
一,元组 1.元组的创建(可以把元组看作一个容器,任何数据类型都可以放在里面)通过赋值方法创建元组In [5]: t = ("hello",2.3,2,True,{1:" ...
- 【目标检测】Fast R-CNN算法实现
一.前言 2014年,Ross Girshick提出RCNN,成为目标检测领域的开山之作.一年后,借鉴空间金字塔池化思想,Ross Girshick推出设计更为巧妙的Fast RCNN(https:/ ...
- 个人理解strcpy
char * strcpy(char *dst,const char *src) { if((dst==NULL)||(src==NULL)) return NULL; char *ret = dst ...
- Go基础之变量和常量
Go基础之变量和常量 目录 Go基础之变量和常量 一. 标识符.关键字.内置类型和函数 1.1 标识符 1.2 关键字 1.3 保留字 1.4 内置类型 1.4.1 值类型: 1.4.2 引用类型:( ...
- python第一章 学习笔记 计算机基础知识 Sublime Text 3
## 计算机是什么 在现实生活中,越来越无法离开计算机了 电脑.笔记本.手机.游戏机.汽车导航.智能电视 ... 计算机就是一个用来计算的机器! 目前来讲,计算机只能根据人类的指令来完成各种操作,人让 ...
- July 2023 (version 1.81)
July 2023 (version 1.81) 更新后显示发行说明 Update 1.81.1: The update addresses these issues. Welcome to the ...