微信小程序Ⅲ [页面标题设置]

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://cloud.tencent.com/developer/article/1333789

○ 前言

• 小程序初始化的源码中，赋予显示的标题默认设置为 “WeChat“，显然根据业务需求，一定会要求我们可自定义的
• 下面是实现这个小需求的两种方法

● 解决方案

①. 静态标题栏，json文件操作

对于 json 文件的修改也分两种

• （1）. 可以修改项目根目录下的 app.json 文件，找到如下图中的 navigationBarTitleText ，并进行信息编辑，如此一来所有的页面都会默认显示所设置的标题名

• （2）. 多数情况下，每个页面的标题栏都不相同，此时可以在 wxml 页面文件同目录下，对应修改同名 json文件（默认建立目录时，没有对应的 json 文件，可自行创建）

json 文件一旦存在，要求内部信息以 json 数组形式存放（可以为空），我们可以对"navigationBarTitleText"进行标题赋值

【注】：按照项目目录的包含级别，如果下级进行了标题栏的设置，则会 覆写 上级标题，反之则会 继承 上级所设置的标题名

②. 动态标题栏，js 文件操作

• 此种情景多用于文章、对话、商品详情页的标题设置，根据参数获得的数据进行标题栏的赋值

可以在业务逻辑处理的 js 中，调用 wx.setNavigationBarTitle()方法，进行 title 的赋值

 /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
     //console.log(options.id)
     //TODO 详情页的标题栏设置 
    wx.setNavigationBarTitle({
      title: this.data.goodsInfo.title
    })
  },

• 下面是我的一个简单举例，请参考截图

• 提示： 后续可根据自己的处理逻辑灵活运用 比如页面跳转传参后，wx.request 请求服务器后端数据，然后在回调逻辑中，进行动态的标题栏设置即可 简而言之，最后还是需要使用 wx.setNavigationBarTitle()的动态赋值.