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

 更新时间:2017年06月18日 16:41:40   作者:明月半倚深秋_f45e  
这篇文章主要给大家介绍了关于利用微信小程序实现皮肤功能,也就是实现夜间模式的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。

老规矩,先上效果图

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

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

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

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

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

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

      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
 })
 }
})

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

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

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

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

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

然后呢

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

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

像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

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

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

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

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

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

我们还能写个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
 })
 }
})

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

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

现在第三步了,保存到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啦

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

相关文章

  • Bootstrap创建可折叠的组件

    Bootstrap创建可折叠的组件

    这篇文章主要为大家详细介绍了Bootstrap创建可折叠组件的对应方法,以实例为大家分享了Bootstrap折叠组件,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • 浅谈javascript属性onresize

    浅谈javascript属性onresize

    这篇文章主要介绍了浅谈javascript属性onresize的详细使用方法,十分的实用,这里推荐给大家,有需要的小伙伴可以参考下。
    2015-04-04
  • JavaScript实现精美个性导航栏筋斗云效果

    JavaScript实现精美个性导航栏筋斗云效果

    这篇文章主要介绍了JavaScript实现精美个性导航栏筋斗云效果,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-10-10
  • 微信小程序自定义弹窗滚动与页面滚动冲突的解决方法

    微信小程序自定义弹窗滚动与页面滚动冲突的解决方法

    这篇文章主要为大家详细介绍了微信小程序自定义弹窗滚动与页面滚动冲突的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • javascript 深拷贝

    javascript 深拷贝

    突然问起我以前的函数,我也会愣一下,心想,真烂!我总是喜欢把最好的东西分享给大家的,以前的大家忘掉吧。
    2010-03-03
  • 基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍

    基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍

    昨天到今天上午都在查一个IE的bug,情形如下:通过异步请求获取json数据,然后拼接成html代码,最后使用innerHTML类似方法插入到文档流中。在chrome下和IE8\9下均表现正常。结果已进入IE7,浏览器就崩溃,更别提IE6了,也是一副死给你看的样子。于是我就把这个bug定位于IE6\7,其实这时候我已经陷入了这个固定思维模式中,浪费了不少时间
    2013-05-05
  • 微信小程序全局配置及常用配置项详解

    微信小程序全局配置及常用配置项详解

    微信小程序中我们创建页面时会自动创建四个文件分别为js文件,wxml文件wxss文件最后还有我们今天的主角配置文件,下面这篇文章主要给大家介绍了关于微信小程序全局配置以及常用配置项的相关资料,需要的朋友可以参考下
    2022-11-11
  • html2canvas图片跨域问题图文详解

    html2canvas图片跨域问题图文详解

    我们在进行图片保存的时候经常会发现图片跨域了,下面下面这篇文章主要给大家介绍了关于html2canvas图片跨域问题的相关资料,需要的朋友可以参考下
    2023-03-03
  • 全面解析JavaScript Module模式

    全面解析JavaScript Module模式

    这篇文章主要介绍了JavaScript Module模式的相关资料,文中讲解非常细致,代码帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-07-07
  • JavaScript正则表达式小结(test|match|search|replace|split|exec)

    JavaScript正则表达式小结(test|match|search|replace|split|exec)

    这篇文章主要介绍了JavaScript正则表达式小结(test|match|search|replace|split|exec)的相关资料,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2016-12-12

最新评论