At a time when mobile phones and computers are used so frequently, apps can change the skin to improve the appearance and reduce the irritation of the screen to the eyes, which is undoubtedly a great help to the user experience.

Here without further ado, first put out the code

Github address: my annual goal – wechat small program

demo

Just scan the code to experience it, or search for “My year goal”.


Below is the effect picture of the replacement skin

Realize the function

To achieve the effect of skin replacement as above, there are several ideas:

  1. Prepare skin-related WXSS to be introduced into app.wXSS for easy use on every page;
  2. When setting the skin, dynamically change the class name or ID of the element in WXML so that the page applies the corresponding skin;
  3. The value of the selected skin is saved in the local cache of the small program to ensure that the correct skin is displayed on other pages and when the small program is opened next time.

Here are some implementation details

wxml

<view class="page" id='{{skin}}'>  
  <view class="container">.</view>
</view>
Copy the code

Width: 100%; width: 100%; width: 100%; height: 100%; Otherwise, you will not be able to skin the page.

wxss

/* app.wxss theme color */

/ * black * /
#dark-skin{
  background: # 000;
}
#dark-skin .bColor{
  background: # 333;
  color: # 999;
}
#dark-skin .borderColor{
  border-color:# 999;
}
/ * * / pink
#red-skin{
  background: #f9e5ee;
}
#red-skin .bColor{
  background: #f9e5ee;
  color: #8e5a54;
}
#red-skin .borderColor{
  border-color:#8e5a54;
}
/ * * / orange
#yellow-skin{
  background: #f6e1c9;
}
#yellow-skin .bColor{
  background: #f6e1c9;
  color: #8c6031;
}
#yellow-skin .borderColor{
  border-color:#8c6031; }...Copy the code

Write the corresponding color style of the skin and put it directly into app.wXSS. If there are too many styles, you can use a separate WXSS file for easy management.

@import "style/skin/dark.wxss";
Copy the code

js

Stores the selected skin value

//wxml
//
      
//bindtap event function
  setSkin:function(e){
    var skin = e.target.dataset.flag;

    this.setData({
      skin: skin + '-skin'.openSet:false
    })

    wx.setStorage({
      key: "skin".data: skin + '-skin'
    })
    app.setSkin(this);
  }
Copy the code

Here, setData is used to make the page switch id immediately, wx.setStorage is used to store the value, and app.setskin is a public method defined on app.js, described below

//app.js
App({
  data: {},setSkin:function(that){
    wx.getStorage({
     key: 'skin'.success: function(res) {
       if(res){
         that.setData({
          skin: res.data
        })
         var fcolor = res.data == 'dark-skin' ? '#ffffff' : '# 000000',
             obj = {
               'normal-skin': {color:'# 000000'.background:'#f6f6f6'
               },
               'dark-skin': {
                 color: '#ffffff'.background: '# 000000'
               },
               'red-skin': {
                 color: '#8e5a54'.background: '#f9e5ee'
               },
               'yellow-skin': {
                 color: '#8c6031'.background: '#f6e1c9'
               },
               'green-skin': {
                 color: '#5d6021'.background: '#e3eabb'
               },
               'cyan-skin': {
                 color: '# 417036'.background: '#d1e9cd'
               },
               'blue-skin': {
                 color: '#2e6167'.background: '#bbe4e3'
               }
             },
           item = obj[res.data],
           tcolor = item.color,
           bcolor = item.background;

         wx.setNavigationBarColor({
           frontColor: fcolor,
           backgroundColor: bcolor,
         })

         wx.setTabBarStyle({
           color: tcolor,
           backgroundColor: bcolor,
         })
       }
     }
   })
    }
})

Copy the code

App.setskin is available for all page calls and sets the background and text color of the header and navigation area using the existing skin color.

Open a normal WXML page and set the skin

const app = getApp();

Page({
  data: {
    skin: 'normal-skin',},onLoad: function() {
    app.setSkin(this); 
  },
  onShow:function(){
    app.setSkin(this); }})Copy the code

Set the skin when onLoad and onShow are triggered. OnShow is used to avoid resetting the skin and showing the previous skin. Since the first load will be set twice, app.setskin in onLoad can actually be removed.

At this point, a beautiful set skin function is realized, partners quickly go to try it!

The last

New 2019, new life goals, welcome to experience wechat mini program “My Annual Goals”, if you have suggestions, please let me know or pull requests, TKS.


Have you achieved your annual goal? Remember to develop wechat mini program once