微信皮肤css,微信小程序实现皮肤功能(夜间模式)
老规矩,先上效果图
个人对夜间模式这个功能情有独钟
晚上黑灯瞎火的看手机,屏幕亮度就算调到最低依然很是刺眼呀
所以我一直用某浏览器,因为有夜间模式
言归正传,依然是分析功能点
1.点击按钮,切换一套css(这个功能很简单)
2.把皮肤设置保存到全局变量,在访问其它页面时也能有效果
3.把设置保存到本地,退出应用再进来时,依然加载上次设置的皮肤
先从切换开始吧,switch很少用,还是贴一下吧
按钮功能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就是夜间模式
Box {{skinStyle}}-Box">
当然你也可以在写一个皮肤样式,黄、红、蓝。。。
现在这个写法,我们只用控制变量 skinStyle的值就能改变皮肤样式了
我们还能写个blue-Box的皮肤,然后设置变量为skinStyle为blue就行了
还有关键一步,在wxss文件中把这个皮肤文件引入要显示的页面
接下来第二步,这就简单了。。
设置到全局变量嘛,先getApp(),然后传过去就行了
全局变量
if(e.detail.value == true){
app.globalData.skin="dark"
}else{
app.globalData.skin = ""
}
that.setData({
skinStyle: app.globalData.skin
})
}
})
现在在访问其它页面的时候,dark皮肤也会传进去
我只写了一个页面哈,所以只有这个页面会有变化
现在第三步了,保存到localstroge中
},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与皮肤相关的信息
现在我们设置黑色皮肤,然后退出,进去之后不是黑色
因为我们在页面加载时没设置
现在再来看看
皮肤没问题了
结果按钮的状态是关闭,皮肤却是开着
因为开关重置了
这个就交给大家自己解决啦,启动时判断一下就OK啦
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对编程之家的支持。
总结
如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
微信皮肤css,微信小程序实现皮肤功能(夜间模式)相关推荐
- js添加关闭功能_微信小程序开发之添加夜间模式功能
使用微信小程序的用户越来越多,因为它使用起来非常方便,而对于开发人员来讲,则需要各种优化布局,使其更利于用户体验. 在微信小程序上,很多小程序都拥有夜间模式,深色模式等功能,今天来讲一下夜间模式的实现 ...
- 浅析微信头脑王者答题小程序源码功能模块与价格之间关系
随着移动互联网的发展,微信小程序开发日渐成熟.答题小程序头脑王者源码的出现大大的方便了人们的生活.也为部分企业带来了很大的利益,正是因为这样越来越多的企业都会选择去开发一个微信答题小程序自己以来更多的 ...
- 小程序毕设作品之微信校园浴室预约小程序毕业设计成品(3)后台功能
整个项目包含了:开题报告 + 开题报告PPT + 任务书 + 中期报告 + 论文模板 + 答辩PPT等 + 项目源码 主要安介绍了系统在开发过程中所应用到的一些关键的技术,主要包括了前端小程序开发的M ...
- Java实现微信小程序客服功能
微信官方文档 - 小程序 /*** 客服功能 - 自动回复小程序APP链接* Created by Lance on 2020/10/10 17:52*/ @Slf4j @Api(descriptio ...
- php夜间,微信小程序实现皮肤的夜间模式
这篇文章主要给大家介绍了关于利用微信小程序实现皮肤功能,也就是实现夜间模式的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧. 老规矩,先上效果图 ...
- 小程序毕设作品之微信校园浴室预约小程序毕业设计成品(6)开题答辩PPT
整个项目包含了:开题报告 + 开题报告PPT + 任务书 + 中期报告 + 论文模板 + 答辩PPT等 + 项目源码 主要安介绍了系统在开发过程中所应用到的一些关键的技术,主要包括了前端小程序开发的M ...
- 微信小程序 评论留言功能实现 仿知乎
最近沉迷学习无法自拔,太久没有码字,码一个小程序留言功能实现.先上一波最后效果图: (删除按钮,是用户自己的留言时才会显示该按钮) 实现技术 后台:SSM框架 数据库:MySQL数据库 数据库设计 ...
- 微信小程序新闻列表功能(读取文件、template)
微信小程序新闻列表功能(读取文件.template) 在之前的项目基础上进行修改,实现读取文件内容作为新闻内容进行展示. 首先,修改 post.wxml 文件,和 post.js 文件中,某些键值对键 ...
- 微信小程序:常用功能8——小程序视频组件中的弹幕功能
微信小程序:常用功能8--小程序视频组件中的弹幕功能 昨天我们刚说了微信小程序的视频组件和分享功能微信小程序:常用功能8--在小程序添加视频组件,并将页面分享到朋友圈,今天想把弹幕功能说一下,但是感觉 ...
- 黯然微信小程序杂记(三):微信小程序实现倒计时功能 附讲解教学 附源码
黯然微信小程序杂记(三):微信小程序实现倒计时功能 附超详细注释 附源码 一.功能描述 二.界面展示 三.test.wxml代码 四.test.js代码(注释很详细 很易懂) CSDN私信我,有关微信 ...
最新文章
- QuadricSLAM: 面向机器人的物体级语义SLAM系统
- 《妥协的完美主义:优秀产品经理的实践指南(卷二)》一1.2 交互设计不是横空出世...
- r语言将百分数化为小数_C语言入门学习(一)
- Mercurial(Hg)基本操作
- .net宿舍管理系统 mysql_基于.NET CORE的精美后台管理系统-RuoYi C#版
- 2021年程序员1月薪资统计,你在哪一档?
- 一开机就提示脱机工作_「华为手机维修自学教程」华为手机的开机触发电路 华为维修技巧...
- ubuntu apt-get update 失败解决
- 如何实现跨项目代码复用
- 冲上云霄 之一 初识云
- 个人博客网站的设计与实现_使用hexo来搭建个人网站博客(超详细教程)
- 教你让XP等32位操作系统支持4G以上大内存,并且不出错
- 二、云计算-私有云-国产-华为-FusionCloud+HCIE Cloud相关知识点+笔试题库
- python柱状图颜色_echarts柱状图,改变柱状颜色
- 数字内容产业的产业链结构
- STM32初识及运用—GPIO
- densepose与SMPL之IUV坐标转XYZ坐标
- VS6中出现:由于找不到MSVCRTD.DLL,无法继续执行代码
- “蚁景杯”WUSTCTF2021新生赛writeup
- Mysql 日期大小比较