微信小程序动态设置背景颜色方法：全局变量与函数实现详解

am928 发表于 2025-4-22 04:22:40

动态设置背景颜色

静态设置背影颜色的方式较为简单，只需在 app.wxss 里对 page 样式进行统一设置。

<pre> <code class="prism language-javascript">page {
-color: rgba(250,250,250,0.90);
}
</code></pre>
全局变量的使用

然而我们期望能够动态地设置背景颜色，也就是让用户能够在给定的背景颜色当中进行选择。首先，我们通过对相关资料的查阅，得知微信小程序是可以设置全局变量的，并且需要在 app.js 中进行添加才能够实现，具体的实现方式如下：

<pre> <code class="prism language-javascript">var backcolor = "#3197ed"//设置初始值
var background
globalData: {
background : backcolor
}
</code></pre>
全局变量能够在其他地方进行动态修改，这与我们所期望的效果极为契合。修改动态变量的方式如下：

<pre> <code class="prism language-javascript"> var app = getApp();//在开头这样写
……
red: function () {
background = "#F4A7B9"
https://img1.baidu.com/it/u=1983284678,1528185745&fm=253&fmt=JPEG&app=138&f=GIF?w=1003&h=500

this.setData({
 background: background
})
app.globalData.background = background修改全局变量，此时 app.globalData.background 的值是"#F4A7B9"
},
</code></pre>
修改背景颜色函数的编写

介绍完全局变量之后，就开始进行具体的函数实现了。例如在 js 中，有两个具体的函数：

<pre> <code class="prism language-javascript">red: function () {
background = "#F4A7B9"
this.setData({
 background: background
})
app.globalData.background = background
wx.setNavigationBarColor({//设置导航栏颜色
 frontColor: '#000000',注意，frontColor 的值有两种情况，一种是 000000，另一种是 111111。
 backgroundColor: app.globalData.background
});
},
moren: function () {//还原默认的函数
background = "#3197ed"
this.setData({
 background: background
})
app.globalData.background = background
wx.setNavigationBarColor({
 frontColor: '#000000',
 backgroundColor: app.globalData.background
});
}
</code></pre>
设置完全局变量之后，我们能够在.wxml 中进行调用，通过使用公共属性 style 来实现这一点。

在需要显示背景颜色的页面加入style来动态显示背景颜色

<pre> <code class="prism language-javascript"><view>
<button class='btn1' style="background:#F4A7B9" bindtap="red">变红</button>
</view>
</code></pre>
这样就可以动态的修改背景颜色了！

页: [1]

【宏智网络】's Archiver

微信小程序动态设置背景颜色方法：全局变量与函数实现详解