The applet dynamically sets the page title

In order to improve the user experience of WeChat Mini Programs, in principle, when designing a page, the title at the top of the page should be modified according to the content.

---

WeChat Mini Program Fixed Architecture

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

There is a global setting file app.json in the default architecture of the WeChat applet, which is used to set the jump page link, form format, TabBar, and network timeout.

There are two kinds of requirements for page title: the function of the page is fixed (such as: setting function, personal information display function), and this type of page can be configured in the form of a .json file on the function page; another kind of requirement is the comparison of page content and business relevance Strong, the title of the page can be determined only after the data is obtained from the database. This type of page needs to be dynamically set when the function page is loaded.

1. Fixed page title content

1.1 Example:

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

• 1
• 2
• 3
• 4

1.2 Diagram:

2. Dynamically update the page title with the content returned from the database

//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 () {
    // 页面关闭
  }
})

---