微信小程序动态更改标题栏_微信小程序如何设置个性化标题

在实际开发项目过程中，我们一般需要对微信小程序的标题文字、颜色、背景颜色等进行个性化设置。本文将介绍如何个性化自己的微信小程序标题。

1. 改变标题的文字

微信小程序的默认文字是WeChart，一般情况下，我们需要对小程序的标题进行相应的改变。我们首先介绍如何静态的改变微信小程序的标题。

我们只需要找到app.json文件，改变其中参数navigationBarTitleText的值，

"window":{

"backgroundTextStyle":"light",

"navigationBarBackgroundColor": "#fff",

"navigationBarTitleText": "百家号",

"navigationBarTextStyle":"black"},

如图1-1所示：

图1-1 app.json文件中改变标题栏

得到的效果图如图1-3所示：

图1-2 默认标题

图1-3 改变之后

2. 改变标题文字的颜色和背景颜色

直接上代码：在app.json文件中设置window参数：

"window":{

"backgroundTextStyle":"light",

"navigationBarBackgroundColor": "#ff0000",

"navigationBarTitleText": "百家号",

"navigationBarTextStyle":"white"},

如图所示：

图2-1 改变标题颜色和背景颜色的代码

下面再给出代码演示后的效果图：

图2-2 改变颜色效果图

3. 动态的改变标题字体和背景颜色

动态的改变标题中的文字，直接给出代码：

.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

总结

本文介绍如何个性化设计自己的微信小程序的标题，包含标题的内容、颜色、背景颜色等。分别从动态和静态作了分析。

希望对您的学习有所帮助！