위 챗 애플 릿 스킨 케 어 기능 구현 코드(사고 상세 설명)

휴대 전화,컴퓨터 의 사용 빈도 가 이렇게 높 은 현재 응용 은 피 부 를 바 꾸 어 미관 성 을 향상 시 키 고 화면 이 눈 에 미 치 는 자극 을 줄 일 수 있어 사용자 체험 에 큰 도움 이 될 것 이다.
기능 을 실현 하 다
위 와 같이 피 부 를 바 꾸 는 효 과 를 실현 하려 면 몇 가지 생각 이 있다.
1.피부 관련 wxss 를 준비 하여 app.wxss 에 도입 하여 각 페이지 에서 사용 하기에 편리 합 니 다.
2.피 부 를 설정 할 때 wxml 에 있 는 요소 의 유형 이나 id 를 동적 으로 변경 하여 페이지 에 해당 하 는 피 부 를 적용 합 니 다.
3.선택 한 피부의 값 을 애플 릿 로 컬 캐 시 에 저장 하고 다른 페이지 와 다음 에 애플 릿 을 열 때 페이지 가 올 바른 피 부 를 보 여 줍 니 다.
다음은 실현 의 세부 사항 을 소개 한다.
wxml

<view class="page" id='{{skin}}'> 
 <view class="container">
 	...
 </view>
</view>

wxml 부분 은 비교적 간단 합 니 다.동적 전환 id 만 있 으 면 됩 니 다.page 는 배경 색 을 동적 으로 설정 할 수 없 기 때문에 이곳 의 가장 바깥쪽 은 width:100%가 필요 합 니 다.height: 100%;，그렇지 않 으 면 피 부 를 페이지 에 가득 채 울 수 없습니다.
wxss

/* app.wxss     */
 
/*    */
#dark-skin{
 background: #000;
}
#dark-skin .bColor{
 background: #333;
 color: #999;
}
#dark-skin .borderColor{
 border-color:#999;
}
/*    */
#red-skin{
 background: #f9e5ee;
}
#red-skin .bColor{
 background: #f9e5ee;
 color: #8e5a54;
}
#red-skin .borderColor{
 border-color:#8e5a54;
}
/*    */
#yellow-skin{
 background: #f6e1c9;
}
#yellow-skin .bColor{
 background: #f6e1c9;
 color: #8c6031;
}
#yellow-skin .borderColor{
 border-color:#8c6031;
}

피부 에 해당 하 는 색상 스타일 을 적 고 app.wxs 에 직접 넣 으 면 됩 니 다.스타일 이 너무 많 으 면 단독 wxs 파일 을 사용 하여 관리 할 수 있 습 니 다.

@import "style/skin/dark.wxss";

js
선택 한 피부 값 저장

//wxml
//<view bindtap="setSkin" data-flag='yellow'>  </view> 
//bindtap    
 setSkin:function(e){
  var skin = e.target.dataset.flag;
 
  this.setData({
   skin: skin + '-skin',
   openSet:false
  })
 
  wx.setStorage({
   key: "skin",
   data: skin + '-skin'
  })
  app.setSkin(this);
 }

여기 서 setData 를 사용 하여 페이지 를 즉시 id 로 전환 시 키 고 wx.setStorage 저장 값 을 사용 합 니 다.app.setSkin 은 app.js 에 정 의 된 공공 방법 입 니 다.다음은 소개 합 니 다.

//app.js
App({
 data: {
 },
 setSkin:function(that){
  wx.getStorage({
   key: 'skin',
   success: function(res) {
    if(res){
     that.setData({
     skin: res.data
    })
     var fcolor = res.data == 'dark-skin' ? '#ffffff' : '#000000',
       obj = {
        'normal-skin':{
         color:'#000000',
         background:'#f6f6f6'
        },
        'dark-skin': {
         color: '#ffffff',
         background: '#000000'
        },
        'red-skin': {
         color: '#8e5a54',
         background: '#f9e5ee'
        },
        'yellow-skin': {
         color: '#8c6031',
         background: '#f6e1c9'
        },
        'green-skin': {
         color: '#5d6021',
         background: '#e3eabb'
        },
        'cyan-skin': {
         color: '#417036',
         background: '#d1e9cd'
        },
        'blue-skin': {
         color: '#2e6167',
         background: '#bbe4e3'
        }
       },
      item = obj[res.data],
      tcolor = item.color,
      bcolor = item.background;
 
     wx.setNavigationBarColor({
      frontColor: fcolor,
      backgroundColor: bcolor,
     })
 
     wx.setTabBarStyle({
      color: tcolor,
      backgroundColor: bcolor,
     })
    }
   }
  })
  }
})

app.setSkin 은 모든 페이지 에 호출 을 제공 하고 기 존의 피부 색 을 통 해 머리 와 네 비게 이 션 구역 의 배경 과 텍스트 색 을 설정 합 니 다.
일반 wxml 페이지 를 열 고 피 부 를 설정 합 니 다.

const app = getApp();
 
Page({
 data: {
  skin: 'normal-skin',
 },
 onLoad: function() {
  app.setSkin(this); 
 },
 onShow:function(){
  app.setSkin(this); 
 }
})

onLoad 및 onShow 가 실 행 될 때 피 부 를 설정 합 니 다.이 onShow 는 피 부 를 다시 설정 하지 않도록 페이지 에 이전 피 부 를 표시 합 니 다.첫 번 째 로 딩 은 두 번 설정 되 기 때문에 onLoad 의 app.setSkin 은 제거 할 수 있 습 니 다.
이로써 피부 기능 을 아름 답 게 설정 할 수 있 게 되 었 습 니 다.여러분,어서 가서 해 보 세 요!
총결산
위 챗 애플 릿 스킨 케 어 기능 구현 코드(사고 상세 설명)에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 위 챗 애플 릿 스킨 케 어 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!