집 > 기사 > 위챗 애플릿 > WeChat 애플릿의 스킨 변경 기능을 구현하는 방법

WeChat 애플릿의 스킨 변경 기능을 구현하는 방법

小云云원래의: 2018-03-16 09:07:352721검색

PC나 모바일 단말기에서 스킨 변경 기능을 구현하는 것은 비교적 간단합니다. 변경해야 할 것은 대략 CSS이며, 일반 CSS는 현재 스킨 유형을 로컬에 저장한 다음 js를 통해 읽고 어떤 세트인지 결정합니다. 현재 CSS가 로드되어 있어야 합니다. 이 글은 주로 WeChat 애플릿의 스킨 변경 기능을 자세히 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

WeChat 애플릿에는 wxss를 작동하는 API가 없으므로 구현 방법이 약간 다릅니다. 대략 다음과 같습니다.

　　1. 스킨을 다시 입혀야 하는 Wxss, 일반 wxss.

　 2. 각 페이지마다 스킨 체인징 wxss를 소개합니다. (스킨 체인징을 위해서는 모든 페이지를 변경해야 하기 때문입니다.)

　 3. app.js의 globalData에서 기본 스킨 유형을 설정합니다.

　　4. 각 페이지가 로딩되면 저장소에 있는 데이터를 읽어 현재 피부 타입의 값을 설정합니다.

예:

1단계: 구조

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

참고: WeChat 애플릿의 루트 노드 페이지는 직접 조작할 수 없으므로 전체 화면 배경색을 수정하려면 높이와 너비만 모방하면 됩니다. 100%. 위는 수업페이지가 있는 p(view) 입니다.

　id='{{SkinStyle}}', id를 설정하는 것은 현재 피부 타입에 따라 스킨의 wxss 스타일 가중치를 일반 wxss 스타일 가중치보다 크게 만들기 위한 것이므로 때로는 추가할 필요가 없을 때도 있습니다. 그것! 중요한.

　루트 노드 페이지는 wxss에서 너비:100%;높이:100%를 설정해야 합니다. 그런 다음 클래스가 페이지인 p(뷰)의 너비와 높이를 100%로 설정합니다. 이는 작동 가능한 루트 노드 페이지를 갖는 것과 같습니다.

　　{{SkinStyle!=="normal"?"icon-moon":"icon-sun"}} 현재 피부 타입을 판단하는 문장이 노멀이면 아이콘-썬, 아니면 아이콘입니다. -달.

두 번째 단계: 스타일 wxss

스킨 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 파일에. 그런 다음 각 페이지의 wxss는 이 공개 com.wxss 파일을 @가져옵니다.

3단계: js

첫 번째: app.js 파일의 페이지에서 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: &#39;skins&#39;,
  　　 　　data: app.globalData.skin,
  　　 })
  }else{
   app.globalData.skin="normal";
   this.setData({
    SkinStyle: "normal"
   })
   wx.setStorage({
  　　 　　key: &#39;skins&#39;,
  　　 　　data: app.globalData.skin,
  　　 })   
  }  
 }
})

마지막으로: 스킨을 전환하는 페이지를 포함하여 각 페이지의 페이지에 있는 onLoad 이벤트에서 저장소를 읽고 SkinStyle 값을 설정합니다.

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

이렇게 하면 마지막에 설정한 스킨이 시작할 때마다 자동으로 설정됩니다.

최종 렌더링:

WeChat 애플릿의 스킨 변경 기능을 구현하는 방법

관련 기사