文 | 跨屏互联

跨屏互联从事建站十多年，小程序开发多年，分享一些干货，今天不绕弯子，直接给大家讲小程序页面标题设置的2种核心方法，简单好懂、复制就能用，新手也能快速上手，避开常见坑。

两种方法覆盖所有场景，静态标题用一种，动态标题用另一种，不用翻官方文档，看完直接操作。

方法一：修改page.json文件（静态标题专用）

适合标题固定不变的页面（如首页、我的页面），操作最简单，零代码门槛。

实操步骤+示例

1. 打开对应页面的page.json文件（无则新建，与js、wxml同级）；

2. 粘贴以下代码，修改标题即可：

{
  "navigationBarTitleText": "豆瓣 - 电影"
}

避坑重点

json文件不能写注释，标题控制在10字内，无法动态修改。

方法二：JS动态设置（标题需变化专用）

适合商品详情页、文章页等（标题随数据变化），核心是找对调用时机。

核心场景+代码（直接复制）

场景1：标题为路由参数（如商品名）

onReady() { // 必须在onReady里调用，避免失败
  const that = this;
  wx.setNavigationBarTitle({
    title: that.data.mername, // 路由参数对应标题
    fail: (err) => console.log('设置失败', err)
  })
}

场景2：标题为接口返回数据

onReady() {
  const that = this;
  wx.request({
    url: '你的接口地址',
    success: (res) => {
      wx.setNavigationBarTitle({ title: res.data.title })
    }
  })
}

避坑重点

1. 严禁在onLoad里调用；2. tab页不能用JS改标题；3. 可加兼容性判断（可选）。

总结

静态标题→改page.json，简单高效；动态标题→JS设置，认准onReady。两种方法够用，复制代码直接改，不用浪费时间调试。

---END---
欢迎关注【跨屏互联】，了解更多建站、小程序、SEO、GEO等互联网知识。

申明：若有来源错误或者侵犯您的合法权益，您可以通过邮箱与我们取得联系，我们将及时进行处理，邮箱地址：info@kuaping.com

原文链接：https://www.kuaping.com/article/show15201.html

看到这里了，顺便了解下 跨屏互联 建站Saas系统吧

注册地址：http://kuaping.com/business/register.php

市面上已经有不少自建站Saas系统了，为什么还要做跨屏Saas建站系统？这是一个外行不清楚，内行心知肚明的事情，市面上建站系统大多是拖拽式生成，这种做出来的网站代码很乱，对于seo很不好友。从事建站十多年，我见到太多了。

坚守品质，始终采用更利于seo的手写代码开发

我希望打破这个常规，跨屏互联7年自主开发的Saas建站系统，是一个费时费力的事情，我们所有模板都是手写代码开发，虽说是自助建站，但是和定制是一模一样的流程，所以出来的品质也是一模一样。而是自适应终端适配效果非常好。

对其wordpress，好过wordpress

我们是Wordpress十几年的使用者，对于wordpress我们非常熟悉，也非常喜欢，所以开发跨屏Saas建站系统的时候，汲取了来自wordpress的体验和思路。如果你也喜欢wordpress，跨屏互联的Saas建站后台你会感到熟悉。相比于wordpress，它的优势是无需购买服务器部署源码，注册账号就可以拥有前台后台，可以选择模板。

有软著 无风险，和钓鱼CMS建站系统彻底说拜拜

我们申请了软著-计算机软件著作权登记号：2017SR675691，相比于市面上有钓鱼的CMS建站系统，先免费等你下载使用，然后在起诉，选择跨屏互联SAAS建站系统，也省去了侵权风险。

我们的价格幅度从680~4980不等，不同模板不同价格，按工作量定价，让所有人都可以做得起网站，做放心的网站，做优质的网站，做价格透明的网站。