微信小程序设置不同的顶部导航栏名称以及背景颜色

一、背景
首先是,我们知道在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文件中,加上不同的导航栏目名称了。

加油骚年

你可能感兴趣的:(微信小程序,小程序,js,web,app,css,html)