WeChat mini-programs enable skin replacement and Wechat mini-Programs

The applet implements the skin replacement function and the applet skin replacement

It is relatively simple to enable the skin replacement function on PCs or mobile terminals, that is, the css that requires skin replacement, and the normal css; Save the current skin type to the local device; then, read and judge which css set should be loaded by using js.

Since the applet does not operate the wxss api, the implementation method is a bit different, roughly as follows:

1. The wxss to be replaced is normal.

2. a skin-changing wxss is introduced to each page (because each page needs to be changed ).

3. Set the default skin type in globalData of app. js.

4. When onload is performed on each page, read the data in storage and set the current skin type value.

Example:

Step 1: Structure

<view class='page' id='{{SkinStyle}}'> <view class='header'>  <view class='h-skin iconfont {{SkinStyle!=="normal"?"icon-moon":"icon-sun"}}' bindtap='bgBtn'></view>   </view></view>

Note: Because you cannot directly operate the applet's root node page, to modify the full screen background color, you can only imitate a div (view) with a width of 100% ). The above is the div (view) with the class as the page ).

Id = '{SkinStyle}'. Set the id to make the weight of the skin wxss style greater than that of the normal wxss style based on the current skin type! Important.

For the root node page, you must set width: 100%; height: 100% in wxss. Set the div (view) width and height of the class to page to 100%. This is equivalent to a root node page that can be operated.

{SkinStyle! = "Normal "? "Icon-moon": "icon-sun"} indicates the current skin type. If it is normal, it is icon-sun. Otherwise, it is icon-moon.

Step 2:Style wxss

Skin wxss:

#dark { background: #333;}#dark .header .h-skin{ color: white;}

Normal wxss:

.page .header .h-skin { color: #060505; padding: 0 32rpx; font-size: 40rpx;}

Public wxss:

page { height: 100%; width: 100%;}.page { width: 100%; height: 100%;}

Note: These are three files respectively. The skin is theme. wxss, normally index. wxss, public is com. wxss

Because skin rejuvenation changes all pages, we recommend that you load the skin's wxss file @ import "../theme-bg/theme"; into the com. wxss file. Then, the wxss on each page @ import the public com. wxss file.

Step 3:Js

First, in the app. js file, set skin: "normal" in globalData in the Page, that is, the default value is normal skin.

Then, on the switch skin button page, add the switch button click event bgBtn:

Var app = getApp (); Page ({data: {SkinStyle: "normal" // here actually can not}, bgBtn: function () {if (this. data. skinStyle = "normal") {app. globalData. skin = "dark"; // set the skin type in app () this. setData ({SkinStyle: app. globalData. skin // set SkinStyle value}) wx. setStorage ({// set storage key: 'skins', data: app. globalData. skin,})} else {app. globalData. skin = "normal"; this. setData ({SkinStyle: "normal"}) wx. setStorage ({key: 'skins', data: app. globalData. skin ,})}}})

Finally, in each Page, including the onLoad event in the Page of the Page that switches the skin, read the storage and set the value of SkinStyle:

onLoad: function (options) {  var that=this; wx.getStorage({ key: 'skins', success: function(res) {  that.setData({   SkinStyle: res.data  }) }, })}

In this way, the last skin setting can be automatically set at each startup.

Finally:

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.