WeChat applet implementation of skin function (night mode)

The old rules, the first effect map

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

Personal to night mode this function is unique 微信小程序实现皮肤功能(夜间模式)

At night, the black light is watching the phone. The brightness of the screen is still the lowest is still very glare.

So I have been using a browser, because there is night mode

Speaking home, still It is the analysis function point

1. Click the button to switch a set of CSS (this feature is simple)

2. Save the skin to global variables, access other There is also an effect when the page is

3. Save the settings to the local, when you exit the application, then load the last set of skin

first start from the switch, Switch is very Little use, or post it

   PAGE ({DATA: {SkinStyle: "}, online: function (options) {}, switchchange: function (e) {var this = this var style // If IF (E.Detail.Value == true) {} ELSE {/ / Otherwise stYLE.SKIN = "} // Save Information That.SetData ({SkinStyle: style})}}  
button function OK, now We go to write style
  like this black style skin, big background color with # 000  
small background with # 333,Words with # 999, I am too lazy to use the collillary

Since we need a suede, we will write a style file outside of the folder

New Skin Directory, write a Dark.wxss

, then


We put a WXSS in normal mode to copy


Remove the properties related to the colors, other deletion


Like Background, Border, Color, etc. . Others don’t

I haven’t found it. .

/ * Night mode * // **** Personal information page **** /. Dark-Box {Background: # 000! Important;} / * users 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;} / **** profile page End **** /


we found that these style name I have dark-box

The dark- box is the outermost, largest box (except the default page Ha)
 my-box is the normal mode, dark-box is nighttime mode   


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

Now this writing, we are only able to change the skin style used skinStyle the value of the control variables
   we can write blue-box of the skin, and then set variables as skinStyle is blue on the line  
as well as a key step in the introduction of this document wxss skin file to display the page


@import “.. /../skin/dark.wxss”;


Then the second step, which is simple. .

provided to the global variable Well, first getApp (), then pass over the line
   
var app = getApp () Page ({data : {skinStyle: “”}, onLoad: function (options) {}, switchChange: function (e) {var that = this // set a 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 pass


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

The third step is now saved to localStroge
  [ VAR App = GetApp () Page ({Data: {SkinStyle: "}, online: function (options) {}, switchchange: function (e) {var there = this // Set global variable IF (E.Detail .value == true) {app.globaldata.skin = "DARK"} else {app.globaldata.skin = "} That.SetData ({skinStyle: app.globalData.skin}) // Save to Local WX.setStorage ({Key: "Skin", Data: App.globalData.skin})}})  
Is it finished? not at all. .


We have to get skin settings when the program is opened

, so we must go to GET and skin in app.js

Getskin: function () {var this = this wx.getStorage ({key: ‘skin “, Success: fUNTA.S {That.globalData.skin = res. Data}}}}}
   Now we set black skin, then exit, not black after entering 
We did not set when we loaded


ONLOAD: Function (Options) {Var That = this That.SetData ({SkInStyle: App.globalData.skin})}


Now let’s take a look at

 The skin is not problematic   result button state Close, the skin is open 
Because the switch resets


This is handed over to everyone, and it is ok when it starts to start
The above is the full content of this article. I hope this paper will bring a certain help to everyone’s learning or work. If you have any questions, you can leave a message, thank you for your support of Tumi Cloud.
                     
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment