小程序ui框架系列之 换肤功能

小程序实现换肤功能结构<view class='page' id='{{SkinStyle}}'>
<view class='header'>
<view class='h-skin iconfont {{SkinStyle!=="normal"?"icon-moon":"icon-sun"}}' bindtap='bgBtn'></view>
</view></view>
要模拟一个可修改的根节点page 根据 id='{{SkinStyle}}’ 来配置theme.wxss 每个页面@import 这个theme.wxss#dark .header{}切换按钮全局变量：globalData:{skin:“normal”}. //app.js文件中页面中bgBtn事件bgbtn:function(){ this.setData({
SkinStyle: app.globalData.skin //设置SkinStyle的值
}) wx.setStorage({ //设置storage key: 'skins',　　 　　 data: app.globalData.skin,
})}页面的Page中的onLoad事件里，读取storage并设置SkinStyle的值onLoad: function (options) { var that=this;
wx.getStorage({
key: 'skins',
success: function(res) { that.setData({ SkinStyle: res.data }) }, })}