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

4,241 阅读2分钟

这是我参与更文挑战的第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"
  }
}

先看看效果图:
image.png

接下来我们看看若页面有设置navigationBarTitleText、是怎么个效果呢?

// 页面json文件
{
    "navigationBarTitleText": "我是页面的json文件标题",
}

先看看效果图: image.png Tips: 若全局app.json中&&页面.json中同时设置了标题, 那么在用户体验上会有一晃而过的效果(先出现app.json中定义的标题、然后一晃到页面定义的标题), 实际项目不建议这么使用.

3. 动态修改标题

通过wx.setNavigationBarTitle() API设置
微信小程序官网提供了如下使用说明:
image.png 那我们就实际演示下:

// 接收页面跳转传进来的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. 写在最后

若有错误之处, 恳请留言, 定会及时更正!
若觉着对您有帮助的话恳请点个赞或着收藏吧!