위 챗 애플 릿 피부 교환 기능 실현

pc 또는 모 바 일 에서 스킨 케 어 기능 을 실현 하 는 것 은 비교적 간단 하 다.대체적으로 스킨 케 어 를 해 야 하 는 css,그리고 정상 적 인 css 가 필요 하 다.현재 피부 타 입 을 로 컬 에 저장 하기;그리고 js 를 통 해 현재 어떤 css 를 불 러 와 야 하 는 지 읽 고 판단 합 니 다.
위 챗 애플 릿 이 wxs api 를 조작 하지 않 았 기 때문에 실현 하 는 방식 이 약간 다 릅 니 다.대체적으로 다음 과 같 습 니 다.
1.피부 가 바 뀌 어야 하 는 wxs,정상 적 인 wxss.
2.각 페이지 마다 스킨 케 어 wxss 를 도입 합 니 다.
3.app.js 의 globalData 에 기본 피부 타 입 을 설정 합 니 다.
4.각 페이지 onload 에서 storage 의 데 이 터 를 읽 고 현재 피부 형식의 값 을 설정 합 니 다.
예:
STEP 1:구조

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

비고:위 챗 애플 릿 의 루트 노드 페이지 를 직접 조작 할 수 없 기 때문에 전체 화면 배경 색 의 수정 을 실현 하려 면 높이 너비 가 100%div(view)인 것 만 모방 할 수 있 습 니 다.위 에 클 라 스 가 페이지 인 이 div(view)입 니 다.
id='{{Skin Style}}',id 를 설정 하 는 것 은 현재 피부 유형 에 따라 피부의 wxs 스타일 의 가중치 가 정상 적 인 wxs 스타일 의 가중치 보다 크 도록 하기 위해 서 입 니 다.이 럴 때 추가 할 필요 가 없습니다!중요 해.
루트 노드 page 는 wxss 에 width:100%를 설정 해 야 합 니 다.height:100%。그리고 class 를 page 로 설정 한 div(view)의 너비 와 높이 는 100%입 니 다.이렇게 하면 조작 할 수 있 는 루트 페이지 가 있 는 셈 이다.
　　　{{SkinStyle!=="normal"?"icon-moon":"icon-sun"}이 말 은 현재 피부 타 입 을 판단 하 는 것 입 니 다.normal 이면 icon-sun 입 니 다.그렇지 않 으 면 icon-moon 입 니 다. 
STEP 2:스타일 wxs
피부 wxss:

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

정상 wxss:

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

 공용 wxss:

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

비고:이것 은 각각 세 개의 파일 입 니 다.피 부 는 theme.wxss,정상 은 index.wxss,공용 은 com.wxss
피 부 를 바 꾸 는 것 은 모든 페이지 가 변화 하기 때문에 피부의 wxss 파일@import"../theme-bg/theme"을 제안 합 니 다.  com.wxss 파일 에 불 러 옵 니 다.그리고 각 페이지 의 wxs 는@import 라 는 공용 com.wxs 파일 입 니 다.
STEP 3:js
우선:app.js 파일 에서 Page 의 globalData 에 설정:skin:"normal";노 멀 스킨
그 다음:피부 단 추 를 전환 하 는 페이지 에 전환 단 추 를 추가 하 는 클릭 이벤트 bgBtn:

var app=getApp();
Page({
 data:{
   SkinStyle:"normal"  //        
 }, 
 bgBtn:function(){
  if (this.data.SkinStyle==="normal"){
   app.globalData.skin = "dark"; //  app（）      
   this.setData({
    SkinStyle: app.globalData.skin //  SkinStyle  
   })
   wx.setStorage({   //  storage
  　　 　　key: 'skins',
  　　 　　data: app.globalData.skin,
  　　 })
  }else{
   app.globalData.skin="normal";
   this.setData({
    SkinStyle: "normal"
   })
   wx.setStorage({
  　　 　　key: 'skins',
  　　 　　data: app.globalData.skin,
  　　 })   
  }  
 }
})  

마지막:피 부 를 전환 하 는 페이지 를 포함 한 페이지 마다 onLoad 이벤트 에서 storage 를 읽 고 SkinStyle 의 값 을 설정 합 니 다.

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

이렇게 시작 할 때마다 지난번 에 설 치 된 피 부 를 자동 으로 설정 할 수 있 습 니 다.
최종 효과 도:

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.