这是我参与更文挑战的第2天,活动详情查看: 更文挑战
1. 前言
最近在做个小功能: A页面分享的时候会携带页面标题、落地到B页面的时候, 期望B页面的标题动态获取页面跳转传过来的.
接下来看看如何实现?
2. 手动修改标题
A. 修改app.json中的window属性里的navigationBarTitleText属性值
该属性值代表的是小程序的名称, 若页面无指定该属性值、则默认都展示app.json下设置的名称.
子页面设置的标题会覆盖通用设置的标题(及: 页面.json的标题优先级高于app.json的标题优先级)
// app.json
{
"window": {
"navigationStyle": "default",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "微信组件demo",
"navigationBarTextStyle": "black"
}
}
先看看效果图:
接下来我们看看若页面有设置navigationBarTitleText、是怎么个效果呢?
// 页面json文件
{
"navigationBarTitleText": "我是页面的json文件标题",
}
先看看效果图: Tips: 若全局app.json中&&页面.json中同时设置了标题, 那么在用户体验上会有一晃而过的效果(先出现app.json中定义的标题、然后一晃到页面定义的标题), 实际项目不建议这么使用.
3. 动态修改标题
通过wx.setNavigationBarTitle() API设置
微信小程序官网提供了如下使用说明:
那我们就实际演示下:
// 接收页面跳转传进来的title值、实现动态修改页面标题的效果
onLoad(options){
const { title } = options
if(title){
wx.setNavigationBarTitle({
title
})
}
},
wx.setNavigationBarTitle要在onReady之后设置, 不然没法拿到页面传进来的options参数.
4. 应用场景
1.若该页面功能比较固定、则可以采取在页面的json文件中配置标题;
eg: 常见的个人中心页、购物车页面;
2.若该页面功能与实际业务关联性比较强, 则采取页面加载的时候动态设置标题;
eg: 前言中提到的B页面标题;
页面多tab的、期望tab切换时展示的页面标题跟随着变化;
5. 写在最后
若有错误之处, 恳请留言, 定会及时更正!
若觉着对您有帮助的话恳请点个赞或着收藏吧!