○ 前言
- 小程序初始化的源码中,赋予显示的标题默认设置为 “
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()
的动态赋值.