微信小程序之设置不同的顶部导航栏名称

一、背景

首先是，我们知道在app.json中，有一个window属性，这个规定了全局的顶部导航栏目的显示：

  "window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "哈哈","navigationBarTextStyle": "black"},

但是这里有个问题，那就是咱们会有多个页面。每个页面对应的顶部当行栏目也应该不一样。因此只是简单的设置app.json是不对的。

二、设置不同页面的导航文字

在微信小程序的文档中，我们知道，如果需要单独设置每个页面特殊的配置，需要在每个页面对应的目录下新建.json文件，这样程序在加载的时候，就会自动找到这个json文件。

1、例如：device 目录代表设备新建device.json文件

2、注意：页面的.json只能设置window相关的配置项，以决定本页面的窗口表现，所以无需写window这个键，如：

 {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "设备","navigationBarTextStyle": "black"}

这里并不需要像app.json一样，不需要写window这个词。
结果：

这样，我们就可以在自己的每个页面，也就是新建文件的.json文件中，加上不同的导航栏目名称了。

end

微信小程序之设置不同的顶部导航栏名称相关推荐

微信小程序：去除自带顶部导航栏
app.json 全局设置 "window": {"navigationStyle": "custom", } page.json 局部设置 ...
微信小程序文字下标_微信小程序开发中，怎么给导航栏图标下面加上文本？...
微信小程序头部叫导航栏,底端的叫标签,他们的设置都在app.json. 导航栏设置在window里: "window": { "backgroundTextStyle&q ...
【微信小程序入门到精通】— window 导航栏配置
目录前言一.全局配置的常用配置项二 .window 导航栏 2.1 navigationBarTitleText 配置项 2.2 下拉刷新的配置总结前言对于目前形式,微信小程序是一个热门, ...
[微信小程序] 动态设置页面标题、导航条 navigationBarTitleText
前言 navigationBarTitleText用于小程序设置当前页面标题,可以给每个页面设置独立的标题,但是这样不能满足一些特殊业务场景:比如说商城,商品详情页面的标题,会根据获取到的数据动态修改 ...
uni-app小程序onShow执行两次；微信小程序onShow重复执行原因；导航栏tabBar页的onLoad函数不执行；App.vue页的onShow执行原因；onShow莫名其妙执行
1.只有五种情况会触发导航栏tabBar页的onLoad函数,分别是: –1.1:首次进入到导航栏tabBar页面: –1.2:从微信分享进入的导航栏tabBar页面: –1.3:识别二维码跳转到小程 ...
微信小程序之子页面动态修改导航栏标题文字内容
在实际的项目开发中,一般我们页面导航栏的标题文字都不是固定的,而是根据场景需要动态设置的,这个如何实现呢.微信官方提供的方法如下: 1.设置动态的 onLoad: function (options) ...
微信小程序使用vant weapp 的侧边导航栏的问题
今天在使用侧边导航栏的时候,发现导航栏的高度无法更改,最后暴力出奇迹,在最外层套个<view id="page"></view>,然后给page加全局高度解 ...
微信小程序轮子 - 自定义中间凸起底部导航栏（只需渲染一次组件 | 性能高 | 灵活）
效果图相比其他组件式 , 它只需要渲染一次, 后续无需渲染提高性能! 如果想直接获取这个示例的 demo ,请直接移步文章最底部.
微信小程序开发——设置默认图片、错误加载图片
wxml: <image src='{{imgArr[index]==""?defaultImg:imgList[index]}}' binderror="erro ...

微信小程序之设置不同的顶部导航栏名称

一、背景

二、设置不同页面的导航文字

微信小程序之设置不同的顶部导航栏名称相关推荐

最新文章

热门文章