小程序 动态设置 页面标题

为提高微信小程序的用户体验，原则上设计页面时，页面顶部标题应随内容不同进行修改。

---

微信小程序固定架构

• pages
  
  • example
    
    • example.js
    • example.json
    • example.wxml
    • example.wxss
• utils
• app.js
• app.json
• app.wxss

微信小程序默认架构中存在全局设置文件app.json，用以设置跳转页面链接、窗体格式、TabBar以及网络超时等。

页面标题有两种需求存在：页面功能固定（如：设置功能、个人信息展示功能），该类页面可采用在功能页面配置.json文件的形式；另一类需求为页面内容与业务关联性比较强，需要从数据库中获取数据后方可确定页面标题，该类页面需在功能页面加载时采用动态设置的方式。

1. 页面标题内容固定

1.1示例：

//页面标题代码在example.json文件中的书写格式
{
    "navigationBarTitleText": "充值业务"
}

• 1
• 2
• 3
• 4

1.2示图：

2. 随数据库返回内容动态更新页面标题

//example.js加载时动态设置页面标题
//获取应用实例
var app = getApp();
Page({
  data: {},
  onLoad: function (options) {
    var that = this;
    that.setData({
      mername: options.mername//options为页面路由过程中传递的参数
    })
    wx.setNavigationBarTitle({
      title: that.data.mername//页面标题为路由参数
    })
  },
  onReady: function () {
    // 页面渲染完成
  },
  onShow: function () {
    // 页面显示
  },
  onHide: function () {
    // 页面隐藏
  },
  onUnload: function () {
    // 页面关闭
  }
})

---