微信小程序 - 顶部Title的设置方式

远方那座山

于 2019-04-28 17:28:30 发布

阅读量2.1w

点赞数 5

分类专栏：微信小程序文章标签：微信小程序改变顶部title

本文链接：https://blog.csdn.net/qq_20451879/article/details/89642359

版权

微信小程序专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍在小程序开发中，如何通过静态和动态方式设置顶部状态栏的Title，包括全局配置和单页面配置方法，以及动态修改Title的具体步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本篇主要记录在开发小程序过程中如何动、静态改变顶部的Title ~

- - - 静态 - 设置顶部状态栏Title
    - 动态 - 改变顶部状态栏Title

静态 - 设置顶部状态栏Title

实现效果
实现方式

统一配置 Title： app.json （意思是全局共用一个title：一般设置为项目名

//统一配置Title
    "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  }

单对单配置Title： 对应页面的 .json

  "navigationBarTitleText": "首页",
  "navigationBarBackgroundColor": "white",
  "navigationBarTextStyle": "black"

动态 - 改变顶部状态栏Title

1.首先判断对应的 .json文件是否设置 navigationBarTitleText
在这里插入图片描述
2.如果存在请删除对应属性设置，然后进行Title设置

 wx.setNavigationBarTitle({
        title: '你的顶部Title写这里即可'
      })