WeChat implements skin function (night mode)_javascript skills-JS Tutorial-php.cn

WeChat implements skin function (night mode)_javascript skills

微波

Release： 2017-06-28 13:24:43

Original

2558 people have browsed it

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,

exitWhen you come back in the application, the skin you set last time will still be loaded

Let’s start with switching,

switch is rarely used, let’s post it

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

Copy after login

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

Copy after login

The button function is OK, now let’s write the style

Like this For a black-style skin, use #000

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

Since I need it A set of skins, then let’s go outside the folder and write a style file

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

Then what happens

We copy a copy of wxss in normal mode and paste it in

Leave the

attributes related to color and delete the 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;
}
/****个人信息页面结束****/

Copy after login

Everyone found 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">

Copy after login

Of course you can also write a skin style, yellow, red, 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 key step, introduce this skin file into the page to be displayed in the wxss file

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

Copy after login

Then the second step, this is simple. .

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

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

Copy after login

Now when visiting other pages, the dark skin will also be passed 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
 })
 }
})

Copy after login

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: &#39;skin&#39;,
  success: function (res) {
  that.globalData.skin=res.data
  }
 })
 }

Copy after login

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

Copy after login

Let’s take a look again

The skin is ok
As a result, the status of the button is off, but the skin is on

Because the switch has been reset

Leave it to me Everyone can solve it by themselves, just make a judgment when starting it

The above is the detailed content of WeChat implements skin function (night mode)_javascript skills. For more information, please follow other related articles on the PHP Chinese website!