WeChat applet implements night mode for skin

This article mainly introduces you to the relevant information about using WeChat applet to realize skin function, that is, to realize night mode. The article introduces it in detail through sample code, which has certain reference and learning value for everyone. Friends who need it Let’s take a look together below.

Old rule, show the renderings first

##I personally have a soft spot for the night mode function

Looking at the phone in the dark at night, even if the screen brightness is adjusted to the lowest, it is still very dazzling

So I have been using a certain browser because it has a night mode

Closer to home, we are still analyzing the function points

1. Click the button to switch a set of css (this function is very simple)

2. Save the skin settings to global variables, It can also be effective when visiting other pages

3. Save the settings locally, and when you exit the application and come back in, the skin you set last time will still be loaded

Let’s start with switching. , switch is rarely used, so let’s post it

<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
 })
 }
})

The button function is OK, now let’s go Write style

like this black style skin, use #000

for the large background color, #333 for the small background, and #999 for the text, I’m too lazy Use the color picker

Since we need a set of skins, let’s go outside the folder and write a style file

Just create a new skin directory and write a dark.wxss below.

Then

We copy the wxss in normal mode and paste it in

Leave the attributes related to the color , delete others

like background, border, color, etc. . Don’t worry about anything else. In the end, I found out that this was all that was left. .

/*夜间模式*/
/****个人信息页面****/
.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;
}
/****个人信息页面结束****/

Everyone noticed that my style names all have dark-box

This dark-box is the outermost and largest box (except the default page)

my-box is the normal mode, dark-box is the night mode

<view class="my-box {{skinStyle}}-box">

Of course you can also You can write a skin style, yellow, red, or blue. . .

Now with this way of writing, we can change the skin style just by controlling the value of the variable skinStyle

We can also write a blue-box skin and then set the variable Just set skinStyle to blue

There is another crucial step, introduce this skin file into the page to be displayed in the wxss file

@import "../../skin/dark.wxss";

Continue Come to the second step, it's easy. .

To set it to a global variable, just getApp() first and then pass it over

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
 })
 }
})

Now I am visiting other pages When the time comes, the dark skin will also be transferred in

I only wrote one page, so only this page will change

Now is the third step, save it to 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
 })
 }
})

Are you done? not at all. .

We need to get the skin settings when the program is opened

So we need to get the skin-related information in app.js

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

Now we set the black skin, and then exit. After entering, it is not black

Because we did not set it when the page was loaded

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

Now let’s take a look

The skin is OK

The status of the result button is closed, but the skin is open

Because the switch has been reset

This is left to everyone to solve. Just make a judgment when starting up

The above is the entire content of this article, I hope It will be helpful for everyone’s learning. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Introduction to vidao’s video playback and barrage functions in WeChat Mini Program

WeChat Mini Program Develop a circular menu (imitation of the CCB circular menu)

The above is the detailed content of WeChat applet implements night mode for skin. For more information, please follow other related articles on the PHP Chinese website!