微信小程序修改页面导航标题的方式

微信小程序修改页面导航标题的方式

了解如何修改微信小程序的页面导航标题，能让你的小程序更灵活。下面是一个汇总了三种主要方式的表格，方便你快速了解它们的区别和适用场景：

特性方式	适用场景	优点	缺点	优先级
静态配置	固定标题	配置简单，一劳永逸	无法根据页面状态或数据变化动态更新	高
API动态修改	标题需随页面状态或数据动态变化	灵活，可在任意时机调用	代码量稍多，需注意调用时机	中
自定义导航栏	需完全定制样式（如加图标、改字体、换颜色）	极致自由，不受原生导航栏样式限制	实现复杂，需自行处理适配和基础功能（如返回）	低

🗒️ 静态配置：简单稳定
静态配置通过在JSON文件中设置 navigationBarTitleText 来实现。

• 全局设置：在 app.json 的 window 属性中配置，这将作用于所有页面。

  // app.json
  {"window": {"navigationBarBackgroundColor": "#ffffff","navigationBarTextStyle": "black","navigationBarTitleText": "默认标题", // 所有页面默认标题"backgroundColor": "#eeeeee","backgroundTextStyle": "light"}
  }
  

• 页面单独设置：在页面自身的 .json 文件中设置，这会覆盖全局配置。

  // pages/myPage/myPage.json
  {"navigationBarTitleText": "我的页面"
  }
  

🔄 API动态修改：灵活多变
当标题需要根据数据动态变化时，可使用 wx.setNavigationBarTitle API。

// 在页面的.js文件中，如onLoad、onReady或网络请求success回调中
wx.setNavigationBarTitle({title: '新的动态标题', // 支持拼接字符串等复杂操作success: function() {console.log('修改成功');},fail: function(err) {console.log('修改失败', err);}
})

常见动态设置场景：

• 页面加载时设置：如在 onLoad<