搜索
首页微信小程序小程序开发微信小程序实现皮肤的夜间模式
微信小程序实现皮肤的夜间模式Jun 27, 2018 am 11:12 AM
夜间模式微信小程序微信小程序开发

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

老规矩,先上效果图

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

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

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

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

      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: &#39;skin&#39;,
  success: function (res) {
  that.globalData.skin=res.data
  }
 })
 }

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

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

现在再来看看


皮肤没问题了

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

因为开关重置了

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

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

相关推荐:

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

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

以上是微信小程序实现皮肤的夜间模式的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
微信小程序架构原理基础详解微信小程序架构原理基础详解Oct 11, 2022 pm 02:13 PM

本篇文章给大家带来了关于微信小程序的相关问题,其中主要介绍了关于基础架构原理的相关内容,其中包括了宿主环境、执行环境、小程序整体架构、运行机制、更新机制、数据通信机制等等内容,下面一起来看一下,希望对大家有帮助。

微信小程序云服务配置详解微信小程序云服务配置详解May 27, 2022 am 11:53 AM

本篇文章给大家带来了关于微信小程序的相关知识,其中主要介绍了关于云服务的配置详解,包括了创建使用云开发项目、搭建云环境、测试云服务等等内容,下面一起来看一下,希望对大家有帮助。

微信小程序常用API(总结分享)微信小程序常用API(总结分享)Dec 01, 2022 pm 04:08 PM

本篇文章给大家带来了关于微信小程序的相关知识,其中主要总结了一些常用的API,下面一起来看一下,希望对大家有帮助。

浅析微信小程序中自定义组件的方法浅析微信小程序中自定义组件的方法Mar 25, 2022 am 11:33 AM

微信小程序中怎么自定义组件?下面本篇文章给大家介绍一下微信小程序中自定义组件的方法,希望对大家有所帮助!

微信小程序实战项目之富文本编辑器实现微信小程序实战项目之富文本编辑器实现Oct 08, 2022 pm 05:51 PM

本篇文章给大家带来了关于微信小程序的相关知识,其中主要介绍了关于富文本编辑器的实战示例,包括了创建发布页面、实现基本布局、实现编辑区操作栏的功能等内容,下面一起来看一下,希望对大家有帮助。

西安坐地铁用什么小程序西安坐地铁用什么小程序Nov 17, 2022 am 11:37 AM

西安坐地铁用的小程序为“乘车码”。使用方法:1、打开手机微信客户端,点击“发现”中的“小程序”;2、在搜索栏中输入“乘车码”进行搜索;3、直接定位城市西安,或者搜索西安,点击“西安地铁乘车码”选项的“去乘车”按钮;4、根据腾讯官方提示进行授权,开通“乘车码”业务即可利用该小程序提供的二维码来支付乘车了。

微信小程序开发工具介绍微信小程序开发工具介绍Oct 08, 2022 pm 04:47 PM

本篇文章给大家带来了关于微信小程序的相关问题,其中主要介绍了关于开发工具介绍的相关内容,包括了下载开发工具以及编辑器总结等内容,下面一起来看一下,希望对大家有帮助。

简单介绍:实现小程序授权登录功能简单介绍:实现小程序授权登录功能Nov 07, 2022 pm 05:32 PM

本篇文章给大家带来了关于微信小程序的相关知识,其中主要介绍了怎么实现小程序授权登录功能的相关内容,下面一起来看一下,希望对大家有帮助。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。