위 챗 애플 릿 전단 소스 상세 설명 및 사례 분석

위 챗 애플 릿 전단 소스 논리 와 워 크 플 로
위 챗 애플 릿 의 전단 코드 를 보고 정말 피 가 끓 었 습 니 다.코드 논리 와 디자인 을 한눈 에 알 수 있 고 불필요 한 것 이 없 었 습 니 다.정말 큰 길 에서 간단 한 길 이 었 습 니 다.
쓸데없는 말 은 그만 하고 전단 코드 를 직접 분석 하 다.개인 적 인 관점 에 누락 이 있 을 수 밖 에 없 으 니 참고 하 시기 바 랍 니 다.
파일 기본 구성:

먼저 입구 app.js 를 보고 app(obj)에 작은 프로그램 을 등록 합 니 다.작은 프로그램의 생명주기 함수 등 object 인 자 를 받 아들 입 니 다.다른 파일 은 전역 적 인 방법 으로 getApp()을 통 해 app 인 스 턴 스 를 가 져 와 속성 이나 방법 을 직접 호출 할 수 있 습 니 다.예 를 들 어(getApp().globalData)

//app.js
App({
 onLaunch: function () {
  //  API          
  var logs = wx.getStorageSync('logs') || []
  logs.unshift(Date.now())
  wx.setStorageSync('logs', logs)
 },
 getUserInfo:function(cb){
  var that = this
  if(this.globalData.userInfo){
   typeof cb == "function" && cb(this.globalData.userInfo)
  }else{
   //      
   wx.login({
    success: function () {
     wx.getUserInfo({
      success: function (res) {
       that.globalData.userInfo = res.userInfo
       typeof cb == "function" && cb(that.globalData.userInfo)
      }
     })
    }
   })
  }
 },
 globalData:{
  userInfo:null
 }
})

app.js 가 입구 에 파일 을 초기 화 하 는 것 도 전역 API 확장 을 제공 하 는 곳 이라는 것 을 이해 합 니 다.아래 에서 자체 적 으로 가지 고 있 는 몇 가지 방법 과 속성 을 분석 하 다.
onLaunch 갈고리 함 수 는 애플 릿 초기 화 완료 후 자동 으로 실 행 됩 니 다.그리고 애플 릿 수명 주기 에 onLaunch 를 주동 적 으로 호출 하지 않 으 면 실행 되 지 않 습 니 다.
var logs=wx.getStorageSync('logs')|[]로 컬 캐 시 에 있 는 logs 속성 을 가 져 옵 니 다.값 이 비어 있 으 면 logs=[]를 설정 하면 HTML 5 의 localStorage 와 비슷 합 니 다.
logs.unshift(Date.now())현재 로그 인 시간 을 배열 에 추가 합 니 다.
wx.setStorageSync('logs',logs)는 데 이 터 를 로 컬 캐 시 에 저장 합 니 다.wx 는 전체 대상 이기 때문에 다른 파일 에서 wx.getStorageSync('logs')를 직접 호출 하여 로 컬 캐 시 데 이 터 를 가 져 올 수 있 습 니 다.
getUser Info 함 수 는 말 그대로 로그 인 사용자 정 보 를 얻 는 것 입 니 다.이 함수 가 사용자 정 보 를 얻 는 인 터 페 이 스 를 제공 하 는 것 과 같 습 니 다.다른 페이지 가 호출 되 지 않 으 면 자 연 스 럽 게 실행 되 지 않 습 니 다.다른 페이지 는 getApp().getUserInfo(function(userinfo){console.log(userinfo);}을 통 해이런 방식 으로 이 방법 을 호출 하여 사용자 정 보 를 얻는다.

getUserInfo:function(cb){//   cb,     
  var that = this
  if(this.globalData.userInfo){//       
   typeof cb == "function" && cb(this.globalData.userInfo)//    cb      ，    cb,      ；
  }else{//        ，         getUserInfo，         。
   wx.login({
    success: function () {
     wx.getUserInfo({
      success: function (res) {
　　　　　　　　 console.log(res)
       that.globalData.userInfo = res.userInfo//       globalData，      getUserInfo     ，         
       typeof cb == "function" && cb(that.globalData.userInfo)//    cb     ，  cb,      
      }
     })
    }
   })
  }
 }

 globalData 대상 은 전역 데 이 터 를 저장 하고 다른 곳 에서 호출 합 니 다.
그 다음 에 app.json 파일 을 간략하게 분석 해 야 합 니 다.이 파일 의 역할 은 위 챗 애플 릿 을 전역 적 으로 설정 하고 페이지 파일 의 경로,창 표현,네트워크 시간 초과 설정,다 중 tab 설정 등 입 니 다.
가장 중요 한 것 은 pages 속성 입 니 다.반드시 작성 해 야 합 니 다.배열 입 니 다.배열 안의 요 소 는 문자열 파일 경로 입 니 다.작은 프로그램 이 어떤 페이지 로 구성 되 는 지 지정 합 니 다.첫 번 째 항목 은 작은 프로그램의 초기 페이지 여야 합 니 다.

{
 "pages":[
  "pages/index/index",
  "pages/logs/logs"
 ],
 "window":{
  "backgroundTextStyle":"light",
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "WeChat",
  "navigationBarTextStyle":"black"
 }
}

그리고 항목 index 와 logs 폴 더 를 보 세 요.위 챗 애플 릿 초기 프로젝트 는 각 페이지 와 관련 된 js,wxss,wxml 를 각자 의 파일 에 두 면 구조 가 뚜렷 하고 밝 아 보인다.
먼저 index 폴 더,즉 애플 릿 초기 페이지 를 봅 니 다.index 폴 더 아래 는 index.js,index.wxml,index.wxss 세 개의 작은 파일 입 니 다.애플 릿 은 js,css,html 코드 를 분리 하여 자신의 파일 에 넣 고 각자 맡 습 니 다.js 와 스타일 시트 파일 이름 은 현재 폴 더 의 wxml 파일 이름과 일치 해 야 js 와 스타일 시트 의 효과 가 페이지 에 나타 날 수 있 습 니 다.나 는 이러한 디자인 이념 이 정연 하고 획일 적 이 며 직책 이 명확 하 며 코드 디자인 의 복잡 도 를 줄 이 는 것 을 매우 좋아한다.
index.wxml,이것 은 흔히 볼 수 있 는 템 플 릿 파일 입 니 다.데이터 구동 입 니 다.전단 mvc,mvvm 프로젝트 가 개발 한 것 은 이것 에 대해 낯 설 지 않 을 것 입 니 다.이것 은 react 를 바탕 으로 개발 한 것 이기 때 문 입 니 다.　　

<!--index.wxml-->
<view class="container">//    
 <view bindtap="bindViewTap" class="userinfo">//bindtap           ，        bindViewTap      ，bindViewTap  index.js page()    
  <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>//          index.js data         ，      
  <text class="userinfo-nickname">{{userInfo.nickName}}</text>
 </view>
 <view class="usermotto">
  <text class="user-motto">{{motto}}</text>
 </view>
</view>

index.js 는 reaact 의 용법 과 거의 다 르 지 않 으 며,국 을 바 꾸 고 약 을 바 꾸 지 않 습 니 다.페이지()를 등록 합 니 다.지정 한 페이지 의 초기 데이터,생명주기 함수,이벤트 처리 함수 등 OBJECT 인 자 를 받 습 니 다.

var app = getApp() //       app     
Page({
 data: {
  motto: 'Hello World',
  userInfo: {}
 },
 //         ，  .userinfo        
 bindViewTap: function() {
  wx.navigateTo({//    wx       
   url: '../logs/logs'
  })
 },
 onLoad: function () {//       ，           
  console.log('onLoad')
  var that = this
  //               
  app.getUserInfo(function(userInfo){
   //    ，      
   that.setData({
    userInfo:userInfo
   })
  })
 }
})

index.wxss 파일 은 현재 소속 페이지 만 렌 더 링 하고 전역 app.wxs 같은 스타일 을 덮어 씁 니 다.
  　  logs 로그 폴 더 를 분석 한 다음 에 logs 폴 더 아래 는 logs.wxml,logs.js,logs.wxss,logs.json 이 고 같은 이치 로 동명 을 보증 해 야 효과 렌 더 링 을 완성 할 수 있 습 니 다.
  　  logs.wxml 파일

<!--logs.wxml-->
<view class="container log-list">
 <block wx:for="{{logs}}" wx:for-item="log">//block    ，       。wx:for  ：  logs  ，     ，block        ，for-item    <br>          ，    。<br>
  <text class="log-item">{{index + 1}}. {{log}}</text>
 </block>
</view>

logs.js 파일

//logs.js
var util = require('../../utils/util.js') //util.js        ，                            
Page({
 data: {
  logs: []
 },
 onLoad: function () {
  this.setData({
   logs: (wx.getStorageSync('logs') || []).map(function (log) {//  wx.getStorageSync       logs    
    return util.formatTime(new Date(log))//     
   })
  })
 }
})

logs.json 파일

{
  "navigationBarTitleText": "      "  //        ，  window                
}

　　
기본 페이지 구조 와 논 리 는 이렇게 간단 해서 우리 에 게 드 러 난 이해 하기 어 려 운 것 이 하나 도 없다.
애플 릿 은 우리 가 깊이 파고 들 기 를 기다 리 는 공식 구성 요소 와 API 도 많이 제공 합 니 다.화 이 팅 하 세 요,소년!애플 릿 공식 문서 주소
이 글 을 통 해 여러분 을 도 울 수 있 기 를 바 랍 니 다.여러분 의 본 사이트 에 대한 지지 에 감 사 드 립 니 다!