微信小程序导航栏标题配置navigationBarTitleText及动态设置setNavigationBarTitle方法

本文详细介绍微信小程序中导航栏标题的三种设置方法:全局配置、页面配置及动态设置。全局配置通过app.json文件实现,页面配置在对应json文件中进行,动态设置则通过js调用wx.setNavigationBarTitle方法完成。

小程序包含一个描述整体程序的 app 和 多个描述各自页面的 page,它的主体部分由 app.jsapp.jsonapp.wxss 三个存放在项目根目录的文件组成,而小程序具体的页面由 jswxmljsonwxss四个存放在相应页面目录的文件组成。

导航栏标题文字内容 这些我们按照实际的需求去具体设置,比如如果需要对微信小程序进行 全局配置,我们就在小程序根目录下 app.json 文件里设置,如果只是对本页面的窗口设置可以直接在页面目录下 json 文件进行配置,另外我们还可以在相关的 js 文件里调用 wx.setNavigationBarTitle 方法动态设置导航栏标题。

1. 全局配置

当需要微信小程序进行 全局配置 导航栏标题时

//	在根目录 app.json 里设置 navigationBarTitleText
{
	"window":{
		"navigationBarTitleText" : "设置 全局 导航栏标题文字"
	}
}

2.页面配置

直接需要指定 页面配置 导航栏标题时就到页面对应的目录下的 json 文件设置就好了

{
	"navigationBarTitleText" : "设置 指定页面 导航栏标题文字"
}

ps: 页面配置中相关设置对应全局配置 app.json 中 window 对应的配置项,如果在指定页面目录的 json 文件设置了就会在指定页面覆盖 app.json 中 window 对应的配置项,另外由于上述内容对应 app.json 中的 window 属性的原因在指定页面目录的 json 文件里是不需要写 window 这个属性。

3.动态设置

在所需动态配置导航栏标题处可以 js 动态设置当前页面的标题

wx.setNavigationBarTitle({
	title:"动态设置 指定页面 导航栏标题文字"
})

哈哈,发现没,文字很多会很超出去
在这里插入图片描述
值得注意的是,在动态设置导航栏标题文字时要在 生命周期onReady 之后

onReady()
页面初次渲染完成时触发。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。

附上 setNavigationBarTitle 方法详细参数信息
Object object

属性类型默认值必填说明
titlestring页面标题
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)
求关注
在这里插入图片描述
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值