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


Posted in Javascript onJune 18, 2017

老规矩,先上效果图

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

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

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

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

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

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

      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啦

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

Javascript 相关文章推荐
你所不了解的javascript操作DOM的细节知识点(一)
Jun 17 Javascript
jquery使整个div区域可以点击的方法
Jun 24 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
Jul 27 Javascript
JS日期格式化之javascript Date format
Oct 01 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 Javascript
JS上传组件FileUpload自定义模板的使用方法
May 10 Javascript
微信小程序实战之自定义抽屉菜单(7)
Apr 18 Javascript
Angular.js中数组操作的方法教程
Jul 31 Javascript
深入理解ES6 Promise 扩展always方法
Sep 26 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
Oct 29 Javascript
countup.js实现数字动态叠加效果
Oct 17 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
Aug 04 Javascript
关于javascript作用域的常见面试题分享
Jun 18 #Javascript
Angular.js中下拉框实现渲染html的方法
Jun 18 #Javascript
Webpack打包css后z-index被重新计算的解决方法
Jun 18 #Javascript
利用JavaScript对中文(汉字)进行排序实例详解
Jun 18 #Javascript
JavaScript ES6中const、let与var的对比详解
Jun 18 #Javascript
jquery DataTable实现前后台动态分页
Jun 17 #jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 #jQuery
You might like
php实现过滤表单提交中html标签的方法
2014/10/17 PHP
php使用指定编码导出mysql数据到csv文件的方法
2015/03/31 PHP
PHP session 会话处理函数
2016/06/06 PHP
golang 调用 php7详解及实例
2017/01/04 PHP
php使用gd2绘制基本图形示例(直线、圆、正方形)
2017/02/15 PHP
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
2010/10/11 Javascript
js中关于一个分号的崩溃示例
2013/11/11 Javascript
JavaScript动态修改网页元素内容的方法
2015/03/21 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
2015/08/20 Javascript
基于node实现websocket协议
2016/04/25 Javascript
js替换字符串中所有指定的字符(实现代码)
2016/08/17 Javascript
jQuery使用deferreds串行多个ajax请求
2016/08/22 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
2020/11/16 Javascript
详解jQuery lazyload 懒加载
2016/12/19 Javascript
JS中Attr的用法详解
2017/10/09 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
Vue封装Swiper实现图片轮播效果
2018/02/06 Javascript
原生javascript实现连连看游戏
2019/01/03 Javascript
vue计算属性get和set用法示例
2019/02/08 Javascript
vue中nextTick用法实例
2019/09/11 Javascript
Node.js实现简单管理系统
2019/09/23 Javascript
[00:42]《辉夜杯》—职业组预选赛12月3日15点 正式打响
2015/12/03 DOTA
Python中for循环和while循环的基本使用方法
2015/08/21 Python
小小聊天室Python代码实现
2016/08/17 Python
分享6个隐藏的python功能
2017/12/07 Python
Django 限制用户访问频率的中间件的实现
2018/08/23 Python
Tesserocr库的正确安装方式
2018/10/19 Python
numpy中三维数组中加入元素后的位置详解
2019/11/28 Python
python 实现将小图片放到另一个较大的白色或黑色背景图片中
2019/12/12 Python
Sneaker Studio乌克兰:购买运动鞋
2018/03/26 全球购物
初中三年毕业生的自我评价分享
2014/02/14 职场文书
2014年关于两会精神的心得体会
2014/03/17 职场文书
个人政风行风自查自纠报告
2014/10/21 职场文书
小学教师读书笔记
2015/07/01 职场文书
决心书格式范文
2015/09/23 职场文书
社区挂职锻炼个人工作总结
2015/10/23 职场文书