手把手教你实现小程序换肤~

小程序换肤功能

UI图的设计是，换肤更换背景图片、边框颜色、文字颜色，自己本地实现了一个简单的换肤功能，还没有连接服务端
为了连接服务端做准备，采用了对象.属性的方式，服务端下发时，下发同样格式的json就可以

/**
* 设置皮肤，写在了app.js里，方便全局使用
*/
setSkin(page) {
let skin_info = {}
skin_info.big_bg_skin = '/images/skin/bg_skin.png'//背景图片
skin_info.constellation_ame_skin= 'constellation-ame_skin'//css类名
skin_info.list_more_skin = '/images/skin/list_more.png'//背景图片
skin_info.app_item_skin="app_item_skin"//css类名
skin_info.font_color_skin = 'font_color_skin'//css类名

page.setData({
skinSwitch: this.globalData.skinSwitch,
skin_info
});
},

<view class="container {{skinSwitch?skin_info.font_color_skin:''}}">
<image class="card-bg" src="{{skinSwitch?skin_info.big_bg_skin:'/images/card-bg.png'}}"></image>//因为wxss只能使用网络资源的图片不方便动态换肤的功能，背景图片是定位的，内容也是定位的
<view class="card-content">
//一些代码
</view>
/

data:{
skinSwitch: false, //皮肤设置
skin_info: {},
}

onShow: function () {
app.setSkin(this)//调用换肤api,传入当前页面的this
},

写在后面
换肤的css与背景图片可以存放在单独的文件夹下，方便维护，与后期服务端下发皮肤样式，背景图片能更好的契合