微信小程序动态修改页面标题

 

在做微信小程序的时候,如果通过修改全局设置中的navigationBarTitleText,我们全部页面的标题都会统一改变:

例如:


"navigationBarTitleText": "美图",

在小程序中,每个页面都会单独一个文件夹,文件夹中包含四个文件,这四个文件紧密相连,都是为其中的.wxml服务,例如如下的目录结构:

Page
example.js
example.json
example.wxml
example.wxss
app.js
app.json
app.wxss

可是我们的小程序一般情况下不止一个页面的,如何动态设置单页面标题?了解了上面的微信小程序文件目录,我们可以利用下面两种方法动态设计页面标题。

一、在.json中设置

在.json中设置中设置,这里指的是页面文件夹example.json中设置,用法就像在全局设置那样。例如:


{
"navigationBarTitleText": "个人中心"
}
(不过不知为什么我用这种方法不行,大神却可以,肯定是我的问题)

二、在.js中设置

这里的.js文件也是单页面中的example.js文件,在页面加载时就动态更改页面wx.setNavigationBarTitle( )。 例如:

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
wx.setNavigationBarTitle({
title: "意见建议"
})
},
使用这种方法我可以动态更改微信小程序的标题,不过问题是每个页面都要写一次,变得只是title这个字符串,所以有没有方法只设置一次然后数据绑定动态变化?可以尝试一下。
我的方法是在全局app.js文件中设置加载函数:
onLoad: function (options) {
wx.setNavigationBarTitle({
title: pagetitle
})
},

然后在每个单独页面的js中(例如:example.js)设置data数据绑定:


data: {
pagetitle:个人中心,
},

我的思路是这样,不过貌似不行,因为页面没有js之间没有关联起来。所以还是还需要继续优化。

本文为博主原创文章,知识共享,开源精神,转载注明出处。