小程序之皮膚色

一、編寫公共的樣式

• 首先寫一套可以用來進行換膚的樣式
  

/* pages/member/skin/skin.wxss */
/* 天空藍 */ 
.blue-box {
  background: #5ba1e7 !important;
}

.extra-blue {
  color: #85bdf3 !important;
}

.blue-item {
  color: #a2cbf3 !important;
}
.blue-border{
  border:1rpx solid  #85bdf3 !important;
}
.blue{
  border-bottom:3px solid #a2cbf3 !important;
}
.blue-three{
  background: #A2CBF3 !important;
}
/*優雅粉*/

.pink-box {
  background: #fc7297 !important;
}

.extra-pink {
  color: #fe95b1 !important;
}

.pink-item {
  color: #feb1c6 !important;
}
.pink-border{
  border:1rpx solid  #feb1c6 !important;
}
.pink{
  border-bottom:3px solid #feb1c6 !important;
}
.pink-three{
  background: #FEB1C6 !important;
}
/*活力橙*/

.orgin-box {
  background: #ff9000 !important;
}

.extra-orgin {
  color: #ffac40 !important;
}

.orgin-item {
  color: #ffc273 !important;
}
.orgin-border{
  border:1rpx solid  #ffc273 !important;
}
.orgin{
  border-bottom:3px solid #ffc273 !important;
}
.orgin-three{
  background: #FFC273 !important;
}

二、根據具體需求進行皮膚色的變換

• 我所在的項目目前是通過後臺的參數來對主題色的更改，實現換膚功能。
• 所以需要在請求接口的時候對皮膚色的初始化進行判斷及存儲

  getData: function() {
    let that = this;
    http.requestLoading('api/services/app/CRMMemberService/GetMyInfo', {}, '').then(res => {
      if (res.data.Result.Code === 0) {
        let skin = ""
        if (res.data.Result.Data.SkinColor == 0) {
          skin = "orgin";
          this.setData({
            skinStyle: "orgin"
          })
        } else if (res.data.Result.Data.SkinColor == 1) {
          skin = "blue"
          this.setData({
            skinStyle: "blue"
          })
        } else {
          skin = "pink"
          this.setData({
            skinStyle: "pink"
          })
        }
        //保存到本地
        wx.setStorageSync('skin', skin)
      }
    })
  },

• 在需要進行換膚的頁面進行引用即可
  js頁面代碼如下：

data: {
    skinStyle: ''
  },
  onShow: function() {
    let skin = wx.getStorageSync("skin");
    this.setData({
      skinStyle: skin
    })
  },

wxml頁面代碼：

<view class="bind_yzm {{skinStyle}}-item {{skinStyle}}-border" bindtap="send" wx:if="{{!unbind}}">
         {{btnText}}
 </view>

• 如果需要手動的設置皮膚色，則可以通過如下方式實現。
  首先定義相關的選擇按鈕：
  
  
  代碼實現 ：

<view class="setting_ms">
    <view class="setting_ms_l">
      <text class="iconfont iconyuanxingweixuanzhong {{skinStyle}}-item"></text>
    </view>
    <view class="setting_ms_r">
      <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
        <view class="picker">
          <text class="setting_ms_r_zl">主題樣式({{array[index]}})</text>
          <text class="iconfont iconxiangshang-copy"></text>
        </view>
      </picker>
    </view>
  </view>

wxss樣式：

.setting_ms {
  width: 750rpx;
  height: 107rpx;
}

.setting_ms_l {
  display: inline-block;
  line-height: 107rpx;
  width: 40rpx;
  height: 100%;
  margin-left: 42rpx;
  margin-right: 40rpx;
}

.setting_ms_r {
  display: inline-block;
  line-height: 107rpx;
  width: 607rpx;
  height: 100%;
  border-bottom: 1rpx solid rgba(228, 228, 228, 0.48);
}

.setting_ms:nth-last-child(1) .setting_ms_r {
  border-bottom: 1rpx solid transparent;
}

.iconzhanghao {
  font-size: 36rpx;
  color: rgba(5, 121, 203, 1);
}

.setting_ms_r_zl {
  font-size: 28rpx;
}

js邏輯實現：

 data: {
    skinStyle: "",
    array: ["活力橙", "天空藍", "優雅粉"],
    index: 0
  },
  bindPickerChange(e) {
    var that = this
    that.setData({
      index: e.detail.value
    })
    //設置全局變量
    let skin = "";
    if (e.detail.value == 2) {
      // app.globalData.skin = "pink"
      skin = "pink"
    } else if (e.detail.value == 0) {
      // app.globalData.skin = "orgin"
      skin = "orgin"
    } else {
      // app.globalData.skin = "blue"
      skin = "blue"
    }
    that.setData({
      skinStyle: skin
    })
    //保存到本地
    wx.setStorageSync('skin', skin)
  },

• 爲了方便可以存儲到全局中，只需把我上面註釋的代碼放出來即可
  app.js中代碼

globalData: {
    skin: ''
  },
  getSkin: function() {
    var that = this
    that.globalData.skin = wx.getStorageSync("skin")
  },

頁面引用：

app.getSkin();

總結：至此皮膚色實現完成，總的來說利用統一的類名進行相應的匹配。