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

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

动态设置背景颜色

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

<pre> <code class="prism language-javascript">page {
[id_225023315]-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"

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>
这样就可以动态的修改背景颜色了！

		自动登录	找回密码
密码			立即注册