E企盈营销工具技术服务商 热线:4006-838-530

微信小程序实现换肤功能

E企盈直播平台营销卖货系统

在手机、电脑使用频率如此高的当下,应用可以更换皮肤,以提升美观性,并减轻屏幕对眼睛的刺激,无疑对用户体验有很大的帮助这里闲话少说,先放码出来  github地址:我的年目标-微信小程序演示扫码即可体验,或搜索“我的年目标”    下面为更换皮肤效果图 实现功能要实现如上更换皮肤的效果,有几个思路:准备皮肤相关的wxss,引入到app.wxss中,方便每个页面使用;设置皮肤时,动态改变wxml中元素的类名或id,使页面应用对应的皮肤;将选中皮肤的值保存在小程序本地缓存中,保证其他页面及下一次打开小程序时,页面展示正确的皮肤;下面介绍一些实现的细节wxmlview class=”page” id='{{skin}}’    view class=”container”  …  /view/viewwxml部分比较简单,只需要动态切换id即可,注意因为page无法动态设置背景色,所以这里的最外层需要width: 100%;height: 100%;,否则将无法使皮肤铺满页面。wxss/* app.wxss主题颜色 *//* 深黑 */#dark-skin{  background: #000;}#dark-skin .bColor{  background: #333;  color: #999;}#dark-skin .borderColor{  border-color:#999;}/* 粉红 */#red-skin{  background: #f9e5ee;}#red-skin .bColor{  background: #f9e5ee;  color: #8e5a54;}#red-skin .borderColor{  border-color:#8e5a54;}/* 橘黄 */#yellow-skin{  background: #f6e1c9;}#yellow-skin .bColor{  background: #f6e1c9;  color: #8c6031;}#yellow-skin .borderColor{  border-color:#8c6031;}…写好皮肤对应的颜色样式,直接放入app.wxss中即可,如果样式过多,可以使用单独的wxss文件,方便管理@import “style/skin/dark.wxss”;js存储选中的皮肤值//wxmlview bindtap=”setSkin” data-flag=’yellow’橘黄/view //bindtap事件函数  setSkin:function(e){    var skin = e.target.dataset.flag;    this.setData({      skin: skin + ‘-skin’,      openSet:false    })    wx.setStorage({      key: “skin”,      data: skin + ‘-skin’    })    app.setSkin(this);  }这里使用setData使页面立即切换id,使用wx.setStorage存储值,app.setSkin是定义在app.js上的公共方法,下面会有介绍//app.jsApp({  data: {  },  setSkin:function(that){    wx.getStorage({     key: ‘skin’,     success: function(res) {       if(res){         that.setData({          skin: res.data        })         var fcolor = res.data == ‘dark-skin’ ? ‘#ffffff’ : ‘#000000’,             obj = {               ‘normal-skin’:{                 color:’#000000′,                 background:’#f6f6f6′               },               ‘dark-skin’: {                 color: ‘#ffffff’,                 background: ‘#000000’               },               ‘red-skin’: {                 color: ‘#8e5a54’,                 background: ‘#f9e5ee’               },               ‘yellow-skin’: {                 color: ‘#8c6031’,                 background: ‘#f6e1c9’               },               ‘green-skin’: {                 color: ‘#5d6021’,                 background: ‘#e3eabb’               },               ‘cyan-skin’: {                 color: ‘#417036’,                 background: ‘#d1e9cd’               },               ‘blue-skin’: {                 color: ‘#2e6167’,                 background: ‘#bbe4e3’               }             },           item = obj[res.data],           tcolor = item.color,           bcolor = item.background;         wx.setNavigationBarColor({           frontColor: fcolor,           backgroundColor: bcolor,         })         wx.setTabBarStyle({           color: tcolor,           backgroundColor: bcolor,         })       }     }   })    }})app.setSkin提供给所有页面调用,并通过已有的皮肤颜色,设置头部和导航区域的背景及文字颜色打开一个普通wxml页面,并设置皮肤const app = getApp();Page({  data: {    skin: ‘normal-skin’,  },  onLoad: function() {    app.setSkin(this);   },  onShow:function(){  app.setSkin(this);   }})在onLoad及onShow触发时设置皮肤,这里的onShow是为了避免重新设置皮肤时,页面还显示上一次的皮肤,由于首次加载会设置两次,onLoad里的app.setSkin其实可以去掉至此,一个精美的设置皮肤功能就实现了,小伙伴们快去试一试吧最后新的2019,新的人生目标,欢迎体验微信小程序“我的年目标”,如有建议,望告知或pull requests,tks该小程序的其他介绍:你的年目标实现了吗,记一次开发微信小程序

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序实现换肤功能
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏