위챗 애플릿으로 피부 변화 기능 구현-JS 튜토리얼-php.cn

위챗 애플릿으로 피부 변화 기능 구현

亚连

풀어 주다： 2018-05-30 10:54:58

원래의

2265명이 탐색했습니다.

이 글은 주로 WeChat 애플릿의 스킨 변경 기능을 자세히 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.

스킨 변경 기능을 PC나 모바일 단말기에서 구현하는 것은 비교적 간단합니다. 대략 다음과 같습니다. 일반 CSS와 마찬가지로 스킨을 다시 지정해야 합니다. 현재 스킨 유형을 로컬에 저장한 다음 js를 통해 읽고 현재 로드해야 하는 CSS 세트를 결정합니다.

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>

로그인 후 복사

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

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

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

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

2단계: 스타일 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
  })
 },
 })
}

로그인 후 복사

이렇게 하면 마지막으로 설정한 스킨을 설정할 때마다 자동으로 시작될 수 있습니다.

최종 렌더링: