微信小程序动态修改page背景颜色

效果   

实现思路

• 使用微信小程序的 page-meta 标签中的page-style属性来动态修改page背景颜色

代码

wxml代码
<page-meta page-style="background:{{bgColor}}"></page-meta>

<button bind:tap="changeColor" data-color="#7FFF00">设置颜色1</button>
<button bind:tap="changeColor" data-color="#00FFFF">设置颜色2</button>
<button bind:tap="changeColor" data-color="#7FFFD4">设置颜色3</button>

js代码
Page({
data: {
  bgColor:'',
},
changeColor(e){
  console.log(e);
  this.setData({
    bgColor:e.target.dataset.color
  })
}
});