js添加关闭功能_微信小程序开发之添加夜间模式功能

使用微信小程序的用户越来越多，因为它使用起来非常方便，而对于开发人员来讲，则需要各种优化布局，使其更利于用户体验。

在微信小程序上，很多小程序都拥有夜间模式，深色模式等功能，今天来讲一下夜间模式的实现。

一、新建开关，利用switch，添加如下代码

显示如下：

二、开关js

data中添加：skinStyle: '',

添加代码：

switchChange:function(e){ var that =this //如果开启 if(e.detail.value == true){ app.globalData.skin="dark" } else { app.globalData.skin="my" } //保存信息 that.setData({ skinStyle: app.globalData.skin }) //保存到本地 wx.setStorage({ key: "skin", data: app.globalData.skin }) },

三、新建样式文件

新建一个目录及样式文件：如dark.wxss

四、引用代码

在对应的wxml文件里，给view添加{{skinStyle}}，使其识别对应样式

(原理：选择开启，则替换该样式，关闭则显示原样式)

在wxss里头部引用：

@import '../../components/skin/dark.wxss';

五、设置全局变量

在app.js中添加：

globalData: { skin: '' },getSkin: function(){ var that =this wx.getStorage({ key: 'skin', success: function (res) { that.globalData.skin = res.data } }) },

六、其他页面添加以下代码即可

onLoad: function (options) {       app.setNavBarBg();//设置标题栏背景色       var that = this       that.setData({           skinStyle: app.globalData.skin,       })   }

七、以上就可以完成白夜间模式切换。

ps：顶部栏可使用app.globalData.skinSwitch值，添加方法与之类似，不在此赘述。

js添加关闭功能_微信小程序开发之添加夜间模式功能相关推荐

小程序分享到朋友圈功能_微信小程序开放分享到朋友圈功能
2020年7月7日(据说是6日深夜),一个很特别的日子,微信低调地放开了一个功能:微信小程序"分享到到朋友圈",这个看似微小的变化,对微信小程序来说意义重大. 用fenng大的话说 ...
微信小程序开发的三种模式
摘要:截止到2018年6月底,正式上线发布的微信小程序已超过100万个.而越来越多的公司也已经在做微信小程序开发,许多人会觉得"微信小程序开发是开发者们的专利".答案是否定的,今天 ...
node.js 微信小程序部署服务器_微信小程序开发入门（一），Nodejs搭建本地服务器...
1. 如何模拟真实环境中,读取服务端数据,首先需要使用Nodejs搭建一个本地服务器的环境. 在搭建web服务器之前,需要先安装node.js(安装版本最好为6.9.x) 安装后node.js,接下 ...
wifi 小程序透传_微信小程序实现的一键连接wifi功能示例
本文实例讲述了微信小程序实现的一键连接wifi功能.分享给大家供大家参考,具体如下: 在已知wifi账号和wifi密码的情况下,一般采用以下的流程来连接wifi Wi-Fi 接口调用: 1.Andro ...
java实现微信、手机号登陆_微信小程序获取手机号授权用户登录功能
小程序中有很多地方都会用到注册用户信息的地方,用户需要填写手机号等,有了这个组件可以快速获取微信绑定手机号码,无须用户填写. 1.getPaDirIrkFhoneNumber这个组件通过button来 ...
微信小程序js数组初始化_微信小程序开发之改变data中数组或对象的某一属性值...
前言:在小程序的开发中,我们在view中便利data中数组或对象时,很多情况下需要在js中动态改变数组或者对象中某一香的属性值. 效果图: 我给大家总结了案例如下: wxml如下: {{item.we ...
api 定位微信小程序精度_微信小程序开发知识点集锦
一小程序的生命周期代码生命周期就是一个对象的生老病死,通常指程序从创建.开始.暂停.唤起.停止.卸载的过程.小程序的生命周期又可分为应用生命周期和页面的生命周期,先单独分析,在结合两者分析应用生 ...
小程序开发用什么编程语言_微信小程序开发教程是什么？费用多少？
微信小程序如今已经非常常见,渗透到了我们日常生活的方方面面,包括生活服务.出行.点餐.电商购物.企业展示--商家可以开发适合自己行业的小程序,以吸引线上用户,同时提高自身服务运营效率.不过这些不同种类 ...
微信小程序wxml如何判断字符串中汉语某字符_微信小程序开发经典案例解析“嗨兔儿”...
嗨兔儿是微信公众号嗨日语歌(hitaici)助手,主要为用户提供,关键词检索,帮助手册等,为外语学习者提供一个便捷的操作方式,能够开心工作,开心生活. 开发过程及注意事项分享视频. 1. 微信小程序开 ...

js添加关闭功能_微信小程序开发之添加夜间模式功能

js添加关闭功能_微信小程序开发之添加夜间模式功能相关推荐

最新文章

热门文章