uniapp设置title

设置页面标题的方法

在UniApp中，可以通过多种方式设置页面标题（即浏览器标签页或微信小程序的顶部标题）。以下是常用的几种方法：

全局配置 在pages.json文件中配置每个页面的标题：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    }
  ]
}

动态修改标题 在页面逻辑中使用uni.setNavigationBarTitle方法：

uni.setNavigationBarTitle({
  title: '新标题'
})

条件设置 可以在页面的onLoad或onShow生命周期中根据条件设置标题：

onLoad(options) {
  if(options.type === '1') {
    uni.setNavigationBarTitle({ title: '类型1' })
  } else {
    uni.setNavigationBarTitle({ title: '默认标题' })
  }
}

微信小程序特殊处理 微信小程序中可能需要额外配置：

// manifest.json
"mp-weixin": {
  "navigationBarTitleText": "默认标题",
  "navigationBarBackgroundColor": "#ffffff"
}

注意事项

• 动态设置的标题会覆盖静态配置的标题
• 部分平台可能对标题长度有限制
• 在H5环境中，修改的是浏览器标签页标题
• 小程序环境中，修改的是顶部导航栏标题

兼容性解决方案

对于多端兼容的需求，可以使用条件编译：

// #ifdef H5
document.title = 'H5专属标题'
// #endif

// #ifdef MP-WEIXIN
uni.setNavigationBarTitle({ title: '微信标题' })
// #endif