用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

微信小程序实现皮肤功能(夜间模式)

Rolan 2017-6-19 00:39

这篇文章主要给大家介绍了关于利用微信小程序实现皮肤功能,也就是实现夜间模式的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。 ... ...

老规矩,先上效果图

个人对夜间模式这个功能情有独钟

晚上黑灯瞎火的看手机,屏幕亮度就算调到最低依然很是刺眼呀

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

言归正传,依然是分析功能点

  1.点击按钮,切换一套css(这个功能很简单)


  2.把皮肤设置保存到全局变量,在访问其它页面时也能有效果


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

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

  1. bindchange="switchChange" color ="#F39C89" class="switch"/>
  1. Page({
  2. data: {
  3. skinStyle: ""
  4. },
  5. onLoad: function (options) {
  6. },
  7. switchChange:function(e){
  8. var that =this
  9. var style
  10. //如果开启
  11. if(e.detail.value == true){
  12. style="dark"
  13. }else{
  14. //否则
  15. style.skin = ""
  16. }
  17. //保存信息
  18. that.setData({
  19. skinStyle: style
  20. })
  21. }
  22. })

按钮功能OK了,现在我们去写样式

像这种黑的风格的皮肤,大背景色用#000

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

既然需要一套皮肤,那我们就去文件夹外面写一个样式文件

就新建一个skin目录,下面写一个dark.wxss吧

然后呢

我们把普通模式下的wxss复制一份,贴进来

把和颜色有关的属性留下来,其它删除

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

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

  1. /*夜间模式*/
  2. /****个人信息页面****/
  3. .dark-box{
  4. background: #000 !important;
  5. }
  6. /*用户信息部分*/
  7. .dark-box .user-box{
  8. background: #333 !important;
  9. color: #999;
  10. }
  11. /*列表部分*/
  12. .dark-box .extra-box{
  13. background: #333 !important;
  14. }
  15. .dark-box .extra-box .extra-item{
  16. border-bottom: 1px solid #000 !important;
  17. }
  18. .dark-box .extra-box .item-head{
  19. color: #999;
  20. }
  21. .dark-box .between-box{
  22. background: #333 !important;
  23. }
  24. .dark-box .between-left{
  25. background: #333 !important;
  26. }
  27. .dark-box .between-left .item-head{
  28. color: #999;
  29. }
  30. /****个人信息页面结束****/

大家发现,我这些样式名称都有dark-box

这个dark-box就是最外面,也是最大的盒子(除了默认的page哈)

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

  1. class="my-box {{skinStyle}}-box">

当然你也可以在写一个皮肤样式,黄、红、蓝。。。

现在这个写法,我们只用控制变量 skinStyle的值就能改变皮肤样式了

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

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

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

接下来第二步,这就简单了。。

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

  1. var app=getApp()
  2. Page({
  3. data: {
  4. skinStyle: ""
  5. },
  6. onLoad: function (options) {
  7. },
  8. switchChange:function(e){
  9. var that =this
  10. //设置全局变量
  11. if(e.detail.value == true){
  12. app.globalData.skin="dark"
  13. }else{
  14. app.globalData.skin = ""
  15. }
  16. that.setData({
  17. skinStyle: app.globalData.skin
  18. })
  19. }
  20. })

现在在访问其它页面的时候,dark皮肤也会传进去

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

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

  1. var app=getApp()
  2. Page({
  3. data: {
  4. skinStyle: ""
  5. },
  6. onLoad: function (options) {
  7. },
  8. switchChange:function(e){
  9. var that =this
  10. //设置全局变量
  11. if(e.detail.value == true){
  12. app.globalData.skin="dark"
  13. }else{
  14. app.globalData.skin = ""
  15. }
  16. that.setData({
  17. skinStyle: app.globalData.skin
  18. })
  19. //保存到本地
  20. wx.setStorage({
  21. key: "skin",
  22. data: app.globalData.skin
  23. })
  24. }
  25. })

完了吗?并没有。。

我们要在程序打开时就获取皮肤设置

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

  1. getSkin:function(){
  2. var that =this
  3. wx.getStorage({
  4. key: 'skin',
  5. success: function (res) {
  6. that.globalData.skin=res.data
  7. }
  8. })
  9. }

现在我们设置黑色皮肤,然后退出,进去之后不是黑色 
因为我们在页面加载时没设置

  1. onLoad: function (options) {
  2. var that =this
  3. that.setData({
  4. skinStyle: app.globalData.skin
  5. })
  6. }

现在再来看看

皮肤没问题了

结果按钮的状态是关闭,皮肤却是开着

因为开关重置了

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

鲜花
鲜花 (1)
鸡蛋
鸡蛋

刚表态过的朋友 (1 人)

分享至 : QQ空间
收藏
原作者: 明月半倚深秋_f45e 来自: 简书

相关阅读