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

老规矩,先上效果图

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

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

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

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

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啦

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

(0)

相关推荐

  • 微信小程序与php 实现微信支付的简单实例

    微信小程序与php 实现微信支付的简单实例 小程序访问地址: payfee.PHP: include 'WeixinPay.php'; $appid=''; $openid= $_GET['id']; $mch_id=''; $key=''; $out_trade_no = $mch_id. time(); $total_fee = $_GET['fee']; if(empty($total_fee)) //押金 { $body = "充值押金"; $total_fee = float

  • 微信小程序组件 marquee实例详解

    微信小程序组件 marquee实例详解 1. marquee标签 html是有marquee标签的,可以实现跑马灯效果,但小程序没有,所以要实现.这里考虑使用css3的animation实现. html的marquee是这样使用的. <marquee direction="left" behavior="scroll" scrollamount="1" scrolldelay="0" loop="-1"

  • 微信小程序图片宽100%显示并且不变形

    微信小程序图片宽100%显示并且不变形 按照HTML习惯进行写,代码: <view class="meiti"> <image src="http://10.0.0.171:9001/images/2017/0619/20170619115150713_progressive.jpg" style="width:100%;"></image> </view> 效果如下: 很明显变形了 找到一篇关于微

  • 微信小程序图片自适应支持多图实例详解

    微信小程序图片自适应支持多图实例详解 微信小程序图片自适应,是一个比较常见的需求,平时我们在WEBView中,只需要设置max-width:100%.在微信里面虽然widthFix也能实现,但有一个缺陷就是图片的宽度值要大于或者等于设定的值,否则就会发生拉伸变形,本文通过另外一种来适应. 首先我们来看看图片组件给的一些说明: 属性名 类型 默认值 说明 src String 图片资源地址 mode String 'scaleToFill' 图片裁剪.缩放的模式 binderror HandleE

  • 详解微信小程序 同步异步解决办法

    详解微信小程序 同步异步解决办法 小程序中函数体还没有完成,下一个函数就开始执行了,而且两个函数之间需要传参.那是因为微信小程序函数是异步执行的.但微信小程序增加了ES6的promise特性支持,微信小程序新版本中移除了promise的支持,需要自己使用第三方库来自行实现ES6的promise特性. WxService.js import Tools from 'Tools' import es6 from '../assets/plugins/es6-promise' class Servic

  • 微信小程序 密码输入(源码下载)

    设计支付密码的输入框 效果如下: 实例代码: <view class="pay"> <view class="title">支付方式</view> <view catchtap="wx_pay" class="wx_pay"> <i class="icon {{payment_mode==1?'active':''}}" type="Strin

  • 微信小程序 获取二维码实例详解

     微信小程序 获取二维码实例详解 理论: 接口A: 适用于需要的码数量较少的业务场景 接口地址:(永久有效,数量有限,进入path对应的页面) https://api.weixin.qq.com/wxa/getwxacode?access_token=ACCESS_TOKEN path String 不能为空,最大长度 128 字节 width Int 430(默认) 二维码的宽度 auto_color .. line_color .. 接口B:适用于需要的码数量极多,或仅临时使用的业务场景(永

  • 详解微信小程序 登录获取unionid

    详解微信小程序 登录获取unionid 首先公司开发了小程序, 公众号网页和app等, 之前都是用的openid来区分用户, 但openid只能标识用户在当前小程序或公众号里唯一, 我们希望用户可以在公司各个产品(比如公众号, 小程序, app里的微信登录)之间, 可以保持用户的唯一性, 还好微信给出了unionid. 下面分两步介绍一下 微信小程序 获取unionid的过程. 1. 首先 在微信公众平台注册小程序 , 然后在小程序上模拟登录流程. 注 : 这里只是简单登录流程, 实际中需要维护

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

    老规矩,先上效果图 个人对夜间模式这个功能情有独钟 晚上黑灯瞎火的看手机,屏幕亮度就算调到最低依然很是刺眼呀 所以我一直用某浏览器,因为有夜间模式 言归正传,依然是分析功能点 1.点击按钮,切换一套css(这个功能很简单) 2.把皮肤设置保存到全局变量,在访问其它页面时也能有效果 3.把设置保存到本地,退出应用再进来时,依然加载上次设置的皮肤 先从切换开始吧,switch很少用,还是贴一下吧 <switch bindchange="switchChange" color =&qu

  • 微信小程序实现天气预报功能

    本文实例为大家分享了微信小程序实现天气预报功能的具体代码,供大家参考,具体内容如下 这个案例是仿UC中天气界面做的中间也有点出入,预留了显示当前城市名字和刷新图标的位置,自己可以写下,也可以添加搜索城市.值得注意的是100%这个设置好像已经不好使了,可以通过获取设备的高度通过数据绑定设置高度.地址:weather 界面主要分为四部分: 第一部分 这里是预留的一块可以自行添加补充下 <view class="newTopView"> <!--左边添加当前城市名字,点击跳

  • 微信小程序换肤功能实现代码(思路详解)

    在手机.电脑使用频率如此高的当下,应用可以更换皮肤,以提升美观性,并减轻屏幕对眼睛的刺激,无疑对用户体验有很大的帮助 实现功能 要实现如上更换皮肤的效果,有几个思路: 1.准备皮肤相关的wxss,引入到app.wxss中,方便每个页面使用: 2.设置皮肤时,动态改变wxml中元素的类名或id,使页面应用对应的皮肤: 3.将选中皮肤的值保存在小程序本地缓存中,保证其他页面及下一次打开小程序时,页面展示正确的皮肤: 下面介绍一些实现的细节 wxml <view class="page"

  • uniapp微信小程序打卡功能的详细实现流程

    目录 一.vue后台地图选地点 step1| 注册账号并申请Key step2| 设置 JSAPI 安全密钥的脚本标签 step3| 地图选点页面demo 二.uniapp微信小程序打卡 step1| 获取key step2| manifest.json中配置权限 step3| 获取定位地址与经纬度 三.核心流程描述 总结 一.vue后台地图选地点 step1| 注册账号并申请Key 请参考链接注册账号并申请Key 部分 step2| 设置 JSAPI 安全密钥的脚本标签 注意事项: 必须在vu

  • 微信小程序 在线支付功能的实现

    微信小程序 在线支付功能 最近需要在微信小程序中用到在线支付功能,于是看了一下官方的文档,发现要在小程序里实现微信支付还是很方便的,如果你以前开发过服务号下的微信支付,那么你会发现其实小程序里的微信支付和服务号里的开发过程如出一辙,下面我就具体说一下小程序里微信支付的开发流程和注意点. 1.开通微信支付和微信商户号 这个过程就和开通服务号的微信支付过程一样,没有什么可以说的. 2.获得用户的openid 首页我们需要在小程序的客户端js中获取当前用户的openid,通过调用wx.login方法可

  • 微信小程序 五星评价功能的实现

    微信小程序 五星评价功能 话不多说,我们来看一下效果图: 要实现的效果:点击到第几颗星,就要显示到第几颗星, 接下来直接查看源码: <view class="l-evalbox row"> <text class="l-evaltxt">满意度:</text> <view class="l-evalist flex-1" bindtap="chooseicon"> <ico

  • Android中微信小程序支付倒计时功能

    看效果 由于web 经验弱爆- -  一开始我的思路是找事件,但是看了半天API 基本都是点击触摸,通过物理触发- - 我居然忽略了生命周期,生命周期+线程不就完全OK吗- 事实证明,线程还是王道啊,一开始就应该这么搞嘛- 度娘上面也看了很多都是用js写的,but,可能刚做没几天吧,我对js与微信小程序掌握还不够熟练 思路: onLoad:function(options)调用倒计时方法函数 定义线程进行数据动态现实 1. 日期转化成毫秒 2.定义线程动态显示 3.渲染倒计时 1.毫秒转成固定格

  • 微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析

    本文实例讲述了微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法.分享给大家供大家参考,具体如下: 微信小程序为2017年1月9日打下了一个特殊的标签,迅速刷爆了网络和朋友圈,最近我也写了一个demo程序体验一把.微信小程序和vuejs有些像,都是数据驱动视图&单向数据绑定,而其体验要比H5页面好很多,这得益于微信环境的支持以及首次运行时同时加载所有页面的处理.本文将分享微信小程序列表的下拉刷新和上划加载的实践. 效果图 首先来看看程序效果图,以下四张图从左至右依次是:下来刷新动画.下拉刷

  • 微信小程序显示下拉列表功能【附源码下载】

    本文实例讲述了微信小程序显示下拉列表功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 app.json文件: { "pages":[ "views/views", "views/navigators/navigator1/navigator1", "views/navigators/navigator2/navigator2", "views/navigators/navigator3/naviga

  • 微信小程序实现日历功能

    本文实例为大家分享了微信小程序实现日历功能的具体代码,供大家参考,具体内容如下 效果图: 代码: <view class="calendar"> <view class="selectDate"> <view class="goleft iconfont icon-jianzuo" bindtap="prevMonth"></view> <view class="

随机推荐