微信小程序中顶部导航栏全局切换

简介: 微信小程序中顶部导航栏全局切换

一、场景

微信小程序和企业微信小程序共用一个,从不同入口进入小程序显示不同的顶部导航栏

二、思路

1、app.json中全局设置只能写死一个,无法实现
2、app.js中直接使用wx.setNavigationBarColor不能全局生效,只能更改当前页面
3、每个页面都去做判断然后写wx.setNavigationBarColor不现实
4、app.js中全局监听页面的跳转,跳转一个页面执行一次wx.setNavigationBarColor从而达到期望效果

三、实现

    // app.js中通过wx.getSystemInfo判断小程序的环境,然后对应执行如下代码
  wx.onAppRoute(function (res) {
     wx.setNavigationBarColor({
        frontColor: '#000000', 
        backgroundColor: '#3a75c5'
     })
  })
相关文章
|
6月前
|
编解码 小程序 前端开发
微信小程序自定义顶部导航栏并适配不同机型
自定义导航栏是小程序中不可或缺的一个组件,它能够为用户提供清晰的页面结构和功能指引,提高用户体验和操作效率。在实现自定义导航栏时,需要考虑不同机型的适配问题,确保导航栏在不同设备上都能正常显示和使用。同时,还需要注意导航栏的设计风格与页面整体风格的一致性,以及导航项的布局和交互方式等细节问题。
406 4
微信小程序自定义顶部导航栏并适配不同机型
|
6月前
|
小程序 JavaScript
【微信小程序】之顶部选项卡自定义tabs(不用mp-tabs扩展组件,太难用了)
【微信小程序】之顶部选项卡自定义tabs(不用mp-tabs扩展组件,太难用了)
|
6月前
|
移动开发 小程序 前端开发
uniapp开发小程序H5页面顶部导航栏navigationBar如何隐藏?三种解决办法
uniapp开发小程序H5页面顶部导航栏navigationBar如何隐藏?三种解决办法
|
6月前
|
小程序
小程序页面顶部标题栏、导航栏navigationBar如何隐藏、变透明?
小程序页面顶部标题栏、导航栏navigationBar如何隐藏、变透明?
|
4月前
|
小程序 API
【微信小程序-原生开发】实用教程07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字)
【微信小程序-原生开发】实用教程07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字)
89 0
|
4月前
|
小程序
uniapp如何隐藏默认的页面头部导航栏,uniapp开发小程序如何隐藏默认的页面头部导航栏
uniapp如何隐藏默认的页面头部导航栏,uniapp开发小程序如何隐藏默认的页面头部导航栏
517 0
|
6月前
|
小程序 程序员
【uniapp微信小程序】自定义导航栏:非首页展示的实现方式(极为快捷方式)
【uniapp微信小程序】自定义导航栏:非首页展示的实现方式(极为快捷方式)
161 0
|
6月前
|
小程序
【微信小程序】-- 全局配置 -- window - 导航栏(十五)
【微信小程序】-- 全局配置 -- window - 导航栏(十五)
|
6月前
|
小程序 网络安全 API
mpaas小程序问题之原生导航栏返回拦截如何解决
mPaaS小程序是阿里巴巴移动平台服务(mPaaS)推出的一种轻量级应用解决方案,旨在帮助开发者快速构建跨平台的小程序应用;本合集将聚焦mPaaS小程序的开发流程、技术架构和最佳实践,以及如何解决开发中遇到的问题,从而助力开发者高效打造和维护小程序应用。
119 0
|
6月前
|
运维 小程序 API
社区每周丨支付宝小程序导航栏升级及人脸认证计费规则更新
社区每周丨支付宝小程序导航栏升级及人脸认证计费规则更新
184 0