微信小程序修改标题

原创已于 2024-06-13 16:37:57 修改 · 4.1k 阅读

CC 4.0 BY-SA版权

文章标签：

于 2024-06-13 15:46:41 首次发布

要修改微信小程序页面的标题和调整字体大小，你需要对 app.json 和页面对应的 json 文件进行配置。

修改页面标题

打开 app.json 文件，找到 pages 字段，确认需要修改的页面路径。
打开对应页面的 .json 文件（例如，pages/example/example.json），添加或修改 navigationBarTitleText 字段。
示例：
json

复制代码

{ "navigationBarTitleText": "新的页面标题" }

调整标题字体大小

微信小程序的 navigationBarTitleText 只允许设置文字内容，并不直接支持字体大小的设置。但可以通过自定义导航栏来实现这一功能。

自定义导航栏步骤：
隐藏原生导航栏：在 app.json 或页面的 .json 文件中，设置 navigationStyle 为 custom。

示例：
json
复制代码

{ "navigationStyle": "custom" }
自定义导航栏组件：创建一个自定义的导航栏组件。

在 components 目录下新建一个导航栏组件（例如，custom-nav-bar），创建以下文件：
custom-nav-bar/custom-nav-bar.json：
json
复制代码

{ "component": true }
custom-nav-bar/custom-nav-bar.wxml：
html
复制代码

<view class="custom-nav-bar"> <text class="title">{{title}}</text> </view>
custom-nav-bar/custom-nav-bar.wxss：
css
复制代码

.custom-nav-bar { width: 100%; height: 40px; /* 这里可以根据需要调整 */ background-color: #fff; /* 背景颜色 */ display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .title { font-size: 20px; /* 这里设置字体大小 */ font-weight: bold; }
custom-nav-bar/custom-nav-bar.js：
javascript
复制代码

Component({ properties: { title: { type: String, value: '默认标题' } } })
使用自定义导航栏组件：在页面的 wxml 文件中引入和使用该组件。

示例：
pages/example/example.wxml：
html
复制代码

<custom-nav-bar title="新的页面标题"></custom-nav-bar> <view class="page-content">  </view>
pages/example/example.json：
json
复制代码

{ "usingComponents": { "custom-nav-bar": "/components/custom-nav-bar/custom-nav-bar" }, "navigationStyle": "custom" }
通过以上步骤，你可以自定义页面标题并调整其字体大小。这样，每次进入页面时就能看到对应的标题，并且字体大小也可以根据需要进行调整。

要在自定义导航栏中添加返回按钮，并且保持微信小程序默认的导航栏返回功能，需要在自定义导航栏中添加一个返回按钮，并在点击时调用 wx.navigateBack 方法。

调整后的自定义导航栏组件：
custom-nav-bar/custom-nav-bar.wxml：添加返回按钮的 WXML 代码：
html
复制代码

<view class="custom-nav-bar"> <view class="back-button" bindtap="goBack"> <text class="back-text">< 返回</text> </view> <text class="title">{{title}}</text> </view>
custom-nav-bar/custom-nav-bar.wxss：添加返回按钮的样式：
css
复制代码

.custom-nav-bar { width: 100%; height: 44px; /* 与微信小程序默认导航栏高度相同 */ background-color: #00AA88; /* 背景颜色 */ display: flex; align-items: center; justify-content: center; position: relative; /* 确保绝对定位生效 */ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .back-button { position: absolute; left: 10px; top: 0; height: 44px; display: flex; align-items: center; } .back-text { color: #ffffff; /* 字体颜色 */ font-size: 16px; /* 字体大小 */ } .title { font-size: 18px; /* 字体大小 */ font-weight: bold; color: #ffffff; /* 字体颜色 */ margin-bottom: 2px; /* 文字距离底部的间距 */ }
custom-nav-bar/custom-nav-bar.js：添加返回按钮的事件处理方法：
javascript
复制代码

Component({ properties: { title: { type: String, value: '默认标题' } }, methods: { goBack: function() { wx.navigateBack({ delta: 1 // 返回上一级页面 }); } } })
页面配置文件（例如 pages/example/example.json）：

确保使用自定义导航栏并配置了使用自定义组件：
json

复制代码

{ "usingComponents": { "custom-nav-bar": "/components/custom-nav-bar/custom-nav-bar" }, "navigationStyle": "custom" }

页面文件（例如 pages/example/example.wxml）：

使用自定义导航栏组件：
html

复制代码

<custom-nav-bar title="{{navTitle}}"></custom-nav-bar> <view class="page-content">  </view>

页面文件（例如 pages/example/example.js）：

无需修改，保持之前的代码。

通过以上调整，你会在自定义导航栏中看到一个返回按钮，点击返回按钮会调用 wx.navigateBack 返回上一页。这样可以实现与微信小程序默认导航栏相同的返回功能，同时保持自定义样式。