微信小程序顶部(navigationBar)设置为透明

我记得在微信小程序中导航栏的颜色可以在app.json.  window里面添加navigationBarBackgroundColor属性,但是颜色只能为纯色.不能使用rgb,或者rgba的色号.

但是今天做页面时,发现设计稿如下

但是我的页面如下:

这个顶部的navigationBar有点丑啊,搜了搜怎么解决,经过我一顿砸键盘终于找到了答案

结果:

  在app.json里面的window增加navigationStyle:custom ,顶部导航栏就会消失,只保留右上角胶囊状的按钮.

原文地址:https://www.cnblogs.com/suihang/p/10565257.html

时间: 2024-08-30 11:05:58

微信小程序顶部(navigationBar)设置为透明的相关文章

微信小程序的网络设置,及网络请求:wx.request(OBJECT)

所有文章会优先在:微信公众号"颜家大少"中发布转载请标明出处? 微信小程序要实现网络请求,首先要对其进行设置,下面以"微信web开发者工具V1.01.170913"为例 一:对于服务器网站没有备案,或只需要做本地测试的用户 在"微信web开发者工具"的"设置"->"项目设置"->"项目设置"中选:不校验安全域名.TLS 版本以及 HTTPS 证书,如下图 二:对已有备案的网站

微信小程序:nginx 设置HTTPS

微信小程序需要HTTPS服务. 程序是NGINX做前段代理,现将NGINX设置HTTPS做个总结 微信小程序需要HTTPS服务,并且有相关要求: 开发通过https://www.qcloud.com/product/ssl#userDefined10 检测SSL,显示之前配置的https未能通过.主要是算法和域名没通过. 具体操作命令如下 1 先生成key,并设置密码 openssl genrsa -des3 -out server_new.key 2048 2 通过key 再生成csr ope

微信小程序 text属性设置 WXSS样式

>微信小程序的布局css样式 参考自  珺L 文字 width: fit-content;font-size:20px;      /*设置文字字号*/color:red;           /*设置文字颜色*/font-weight:bold;    /*设置字体加粗*/border:1px solid red;/*添加边框样式(粗细为1px, 颜色为红色的实线)*/ font-family:"宋体";   /*设置字体为宋体*/ ----------------------

微信小程序开发:设置消息推送

开发设置中,启用并设置消息推送配置后,用户发给小程序的消息以及开发者需要的事件推送,都将被微信转发至该服务器地址中. 不过照着说明去操作,即使按照最简单的明文方式去设置,还是提示Token验证失败.仔细研究说明,其实服务器验证过程很简单,用Get发来一个连接,然后在自己的页面中去检验,不想做也可以先不做,直接返回echostr即可.关键在,怎么返回,开始我还以为必须要按照xml或者json返回,试了半天,其实很简单,清空所有其他输出,直接返回echostr即可. Response.Clear()

学习微信小程序之css4设置颜色,单位表示,字体样式

颜色的设置可以通过RGB设置 可以直接通过英文单词设置 可以通过16进制来设置 长度单位: 字体样式: 设置字体样式 字体粗细 设置字体风格 设置字间距

微信小程序全局变量的设置、使用、修改

1. 全局变量的设置 在miniprogram > app.js 文件中设置,globalData对象就是存储全局变量的. App({ globalData: { hasLogin: false, openid: null }, onLaunch: function () { } }) 2.全局变量的使用 在app.js文件中,直接使用,如: this.globalData.hasLogin 在其他非app.js文件中使用,需要先申明app变量,如: var app = getApp() app

微信小程序 setData动态设置数组中的数据

setdata传递动态数据值必须为对象(只能是key:value) 语法如下 this.setData({ filter: 1212 }) 如果setdata要传递数组呢? 首先相到的是 this.setData({ filter.a: 12 filter.b: 32 }) 这样回报语法错误 既然语法规定不能在里面写数组,那就把数组定义到外面 filter.selectArea1 = 1, filter.selectArea2 = 2, filter.selectArea3 = 3, this.

微信小程序导航键设置

<utils >文件夹下app.json插入代码 { "pages": [ "pages/index/index", "pages/logs/logs" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "

微信小程序正式上线 可置于聊天窗口顶部

文/腾讯科技 韩依民 历经一年的等待后,小程序在2017年1月9日凌晨终于揭开神秘面纱,正式上线. 微信小程序推广海报 随着小程序正式上线,用户现在可以通过二维码.搜索等方式体验到开发者们开发的小程序了. 用户只要将微信更新至最新版本,体验过小程序后,便可在发现页面看到小程序TAB,但微信并不会通过这个地方向用户推荐小程序. 值得一提的是,小程序提供了显示在聊天顶部的功能,这意味着用户在使用小程序的过程中可以快速返回至聊天界面,而在聊天界面也可快速进入小程序,实现小程序与聊天之间的便捷切换. 微