微信小程序实现皮肤的夜间模式

老规矩，先上效果图

所以我一直用某浏览器，因为有夜间模式

3.把设置保存到本地，退出应用再进来时，依然加载上次设置的皮肤

先从切换开始吧，switch很少用，还是贴一下吧

<switch bindchange="switchChange" color ="#F39C89" class="switch"/>

Page({  data: {  skinStyle: ""  },  onLoad: function (options) {  },  switchChange:function(e){  var that =this  var style  //如果开启  if(e.detail.value == true){   style="dark"  }else{   //否则   style.skin = ""  }  //保存信息  that.setData({   skinStyle: style  })  } })

小背景用#333，文字用#999吧，我也懒得用取色器了

像background呀，border，color等。。其它统统不要

最后发现就剩这么点了。。

/*夜间模式*/ /****个人信息页面****/ .dark-box{  background: #000 !important; } /*用户信息部分*/ .dark-box .user-box{  background: #333 !important;  color: #999; } /*列表部分*/ .dark-box .extra-box{  background: #333 !important; } .dark-box .extra-box .extra-item{  border-bottom: 1px solid #000 !important; } .dark-box .extra-box .item-head{  color: #999; } .dark-box .between-box{  background: #333 !important; } .dark-box .between-left{  background: #333 !important; } .dark-box .between-left .item-head{  color: #999; } /****个人信息页面结束****/

这个dark-box就是最外面，也是最大的盒子（除了默认的page哈）

my-box是普通模式，dark-box就是夜间模式

<view class="my-box {{skinStyle}}-box">

我们还能写个blue-box的皮肤，然后设置变量为skinStyle为blue就行了

还有关键一步，在wxss文件中把这个皮肤文件引入要显示的页面

@import "../../skin/dark.wxss";

设置到全局变量嘛，先getApp(),然后传过去就行了

var app=getApp() Page({  data: {  skinStyle: ""  },  onLoad: function (options) {  },  switchChange:function(e){  var that =this  //设置全局变量  if(e.detail.value == true){   app.globalData.skin="dark"  }else{   app.globalData.skin = ""  }  that.setData({   skinStyle: app.globalData.skin  })  } })

我只写了一个页面哈，所以只有这个页面会有变化

现在第三步了，保存到localstroge中

var app=getApp() Page({  data: {  skinStyle: ""  },  onLoad: function (options) {   },  switchChange:function(e){  var that =this   //设置全局变量  if(e.detail.value == true){   app.globalData.skin="dark"  }else{   app.globalData.skin = ""  }  that.setData({   skinStyle: app.globalData.skin  })  //保存到本地  wx.setStorage({   key: "skin",   data: app.globalData.skin  })  } })

所以要在app.js去get与皮肤相关的信息

  getSkin:function(){  var that =this  wx.getStorage({   key: 'skin',   success: function (res) {   that.globalData.skin=res.data   }  })  }

  onLoad: function (options) {   var that =this    that.setData({   skinStyle: app.globalData.skin   })  }

现在再来看看

皮肤没问题了

这个就交给大家自己解决啦，启动时判断一下就OK啦

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

微信小程序中vidao实现视频播放和弹幕功能的介绍

微信小程序开发圆形菜单(仿建行圆形菜单)

以上就是微信小程序实现皮肤的夜间模式的详细内容，更多内容请关注技术你好其它相关文章！