微信小程序动态更改标题栏_微信小程序如何设置个性化标题
微信小程序动态更改标题栏_微信小程序如何设置个性化标题
在实际开发项目过程中，我们一般需要对微信小程序的标题文字、颜色、背景颜色等进行个性化设置。本文将介绍如何个性化自己的微信小程序标题。
- 改变标题的文字
微信小程序的默认文字是WeChart，一般情况下，我们需要对小程序的标题进行相应的改变。我们首先介绍如何静态的改变微信小程序的标题。
我们只需要找到app.json文件，改变其中参数navigationBarTitleText的值，
“window”:{
“backgroundTextStyle”:“light”,
“navigationBarBackgroundColor”: “#fff”,
“navigationBarTitleText”: “百家号”,
“navigationBarTextStyle”:“black”},
如图1-1所示：
图1-1 app.json文件中改变标题栏
得到的效果图如图1-3所示：
图1-2 默认标题
图1-3 改变之后
- 改变标题文字的颜色和背景颜色
直接上代码：在app.json文件中设置window参数：
“window”:{
“backgroundTextStyle”:“light”,
“navigationBarBackgroundColor”: “#ff0000”,
“navigationBarTitleText”: “百家号”,
“navigationBarTextStyle”:“white”},
如图所示：
图2-1 改变标题颜色和背景颜色的代码
下面再给出代码演示后的效果图：
图2-2 改变颜色效果图
- 动态的改变标题字体和背景颜色
动态的改变标题中的文字，直接给出代码：
.wxml文件：
改变标题1
改变标题2
改变标题3
.wxss文件：
button{margin: 10px}
.js文件：
Page({
data: {},
modalcnt1: function() {
wx.setNavigationBarTitle({
title: ‘——百家号(标题1)——’,});
},
modalcnt2: function() {
wx.setNavigationBarTitle({
title: ‘百家号(标题2)’,});
},
modalcnt3: function() {
wx.setNavigationBarTitle({
title: ‘++++++百家号(标题3)++++++’,});
},})
下面给出运行的效果图：
图3 动态改变标题的demo
4.动态的改变标题背景颜色
直接给出代码：
.wxml文件：
改变标题背景颜色为米白
改变标题背景颜色为灰色
改变标题背景颜色为雅红
.wxss文件：
button{margin: 10px}
.js文件：
const app = getApp()
Page({
data: {},
modalcnt1: function() {
wx.setNavigationBarColor({
frontColor: ‘#000000’,
backgroundColor: ‘#ffa’,
animation: {
duration: 500,
timingFunc: ’linear’}});},
modalcnt2: function() {
wx.setNavigationBarColor({
frontColor: ‘#000000’,
backgroundColor: ‘#ccc’,
animation: {
duration: 500,
timingFunc: ’linear’}});},
modalcnt3: function() {
wx.setNavigationBarColor({
frontColor: ‘#000000’,
backgroundColor: ‘#f20’,
animation: {
duration: 500,
timingFunc: ’linear’}});},})
下面给出运行的效果图：
图4 改变标题颜色的demo
总结
本文介绍如何个性化设计自己的微信小程序的标题，包含标题的内容、颜色、背景颜色等。分别从动态和静态作了分析。
希望对您的学习有所帮助！