WeChat mini program implements skin function (night mode), mini program night

The applet implements the skin function (night mode), and the applet implements the skin function at night.

Old rule, first

I personally have a special liking for the function of night mode.

When you watch your phone in the dark at night, even if the screen brightness is adjusted to a minimum, it is still very dazzling.

So I have been using a browser because of the night mode.

Still the analysis feature

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

2. Save skin settings to global variables, which can also be effective when accessing other pages.

3. Save the settings to the local device. When you exit the application, the last configured skin is still loaded.

Start with switching. switch is rarely used. paste it.

<switch bindchange="switchChange" color ="#F39C89" class="switch"/>

Page ({data: {skinStyle: ""}, onLoad: function (options) {}, switchChange: function (e) {var that = this var style // if the if (e. detail. value = true) {style = "dark"} else {// otherwise style. skin = ""} // Save the information that. setData ({skinStyle: style })}})

The button function is OK. Now let's write the style

Black-style skin with a large background color #000

Small background #333, text #999, I am too lazy to use a color filter.

Since we need a set of skins, we can write a style file out of the folder.

Create a new skin directory. Write a dark. wxss file below.

Then

Copy and paste the wxss in normal mode.

Leave the color-related attributes and delete other attributes.

Such as background, border, and color .. Nothing else

This is the last point ..

/* Night mode * // ***** personal information page *****/. dark-box {background: #000! Important;}/* user Information Section */. dark-box. user-box {background: #333! Important; color: #999;}/* list part */. 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;}/***** end of the personal information page ****/

We found that my style names all contain dark-box

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

My-box is in normal mode, and dark-box is in night mode.

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

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

Now, we only need to control the value of the skinStyle variable to change the skin style.

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

Another key step is to introduce this skin file into the page to be displayed in the wxss file.

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

Next step 2, this is simple ..

To set the global variable, first getApp () and then pass it over.

Var app = getApp () Page ({data: {skinStyle: ""}, onLoad: function (options) {}, switchChange: function (e) {var that = this // set the global variable if (e. detail. value = true) {app. globalData. skin = "dark"} else {app. globalData. skin = ""} that. setData ({skinStyle: app. globalData. skin })}})

When accessing other pages, dark skin will also be passed in

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

Now step 3 is saved to localstroge

Var app = getApp () Page ({data: {skinStyle: ""}, onLoad: function (options) {}, switchChange: function (e) {var that = this // set the global variable if (e. detail. value = true) {app. globalData. skin = "dark"} else {app. globalData. skin = ""} that. setData ({skinStyle: app. globalData. skin}) // save it to the local wx. setStorage ({key: "skin", data: app. globalData. skin })}})

Are you finished? No ..

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

Therefore, get skin-related information in app. js

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

Now let's set the black skin and exit. It's not black after going in.
Because we didn't set it during page loading.

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

Now let's take a look.

No problems with skin

The result button is closed, but the skin is open.

Because the switch is reset

You can solve this problem by yourself. When you start it, you can determine it.

The above is all the content of this article. I hope the content of this article will help you in your study or work. If you have any questions, please leave a message, thank you for your support.