위 챗 애플 릿 체험

머리말
최근 에 회사 에서 위 챗 애플 릿 을 조사 연구 하려 고 하 는데 기술 축적 을 하 는 것 이 라 고 한다.
그런데 저 는 iOS 개발 자 입 니 다. 억지로 하 세 요. 2 주 동안 의 조사 결 과 를 정리 하 세 요.
1, 초기 설정

테스트 프로그램 은 일반적으로 테스트 번 호 를 신청 하면 됩 니 다. 바로 wx AppId 입 니 다.

그리고 기초 구조 개발 도 구 는 자동 으로 구축 된다.

2. 프로젝트 구조 설명
하나의 Project 애플 릿 구 조 는 다음 과 같다.

peoject.config.json: 설정 파일, 기본적으로 무시 할 수 있 습 니 다

그 다음 에 비슷 한 html 세 가지 큰 덩어리: js, json, wxml, wxss

js: 스 크 립 트 파일

json: 페이지 프로필

wxml: 페이지 레이아웃 파일

wxss: 페이지 스타일 파일

3, app 모듈

구 조 를 보면 app.js iOS 와 유사 한 AppDelegate 파일 이 있 고 그 안에 기본 적 인 Onlaunch 함수 가 iOS 와 같은 didFinishLaunchingWithOptions 방법 이 있다.

파일 자동 등록 페이지 경로, 설정 app.json 스타일, 설정 window 등 경로 페이지

전역 설정 tabBar 에서 app.wxss 프레임 워 크 를 사용 하면 가 져 올 수 있 습 니 다 styles

코드 는 다음 과 같 습 니 다:

App({
  onLaunch: function () {
    //         
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    //   
    wx.login({
      success: res => {
        console.log("login success")
        //    res.code       openId, sessionKey, unionId
      }
    })
})
//        

{
  "pages": [
  //        
  ],
  "window": {
    "backgroundTextStyle": "light",
  },
  "tabBar": {
    "color": "#6e6d6b",
    "selectedColor": "#FF5A4B",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "",
        "selectedIconPath": "",
        "text": ""
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

/**app.wxss**/
@import 'style/weui.wxss';

page{
    background-color: #EDEDED;
    font-size: 16px;
    font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
}

4, 페이지 모듈
페이지 하면 먼저 프레임 워 크 를 말 해 야 한다. 내 가 사용 하 는 것 은 weui 이다. 물론 다른 것 도 사용 할 수 있다. 다만 style/weui.wxss 스타일 과 weui 가 더욱 가 까 울 뿐이다.weui 봉 인 된 구성 요소 iOS, weui, cell 등 을 사용 하지 않 아 도 된다 cells.
1) 기초 UI 페이지 구축
구성 요 소 를 사용 하여 Actionsheet 에 설정 합 니 다.

{
  "usingComponents": {
    "billView":"../components/mine_bill",
    "cardType":"../components/cardType",
    "colorBtn":"../components/colorBtn",
    "mineLimit":"../components/limit_info",
    "cardView":"../components/card/card"
  },
  "navigationBarTitleText":"  "
}

동시에 weui-wxss 에서 사용 합 니 다.

  
  
    
  

   
            ( ):1252.0
       
    

  
    
    
        
    

    
    
    
                 
      
    
    
    
    
          
      
        
        
        
      
    
  

index.json 안 에는 말 하지 않 겠 습 니 다. 다른 css 와 어 울 리 는 것 과 다 를 바 없습니다.
2) 페이지 상호작용
예 를 들 면

 gotoSee:function(){
    wx.showToast({
      title: '   ',
      icon: 'success',
      duration: 3000
  })
  },
  goToMineBill:function(){
    wx.navigateTo({
      url:"../repayment/repayment"
    })
  },

index.wxml 안에 index.wxss

3) 구성 요소 의 구축
구성 요소 의 구조 에서 index.js 파일 은 기본적으로 같 고 index.wxml 파일 은 일부 차이 가 있 습 니 다.

Component({
  /**
   *        
   */
  properties: {
    title:String,
    subTitle:String,
    btnTitle:String,
    showBill:{
      type:Boolean,
      value: true
    },
    color:String
  },
  /**
   *        
   */
  data: {
  },
  /**
   *        
   */
  methods: {
    _btnAction(){
      this.triggerEvent("btnAction");
    },
    _billAction(){
      this.triggerEvent("billAction");
    }
  }
})

bind 에서 wxml 방법 과 속성 할당

    {{title}}
    
         {{subTitle}}
    
    {{btnTitle?btnTitle:"   "}}>>

그 중에서 js 는 아무런 의미 가 없고 하나의 블록 구 조 를 나타 낸다.
4) 값 전달 의 문제
첫 번 째 단계: 먼저 wxml 중의 bind 에서 값 을 부여 합 니 다. 예 를 들 어 wxmlbind 파일 에서 data-property function 에서

 goToDetail:function(e){
    if (e.currentTarget.dataset.obj) {
      let a = e.currentTarget.dataset.obj;
      let b = {"name":a.title,"time":a.created_name,"content":a.content};
      wx.navigateTo({
        url:"../home/detail?obj=" + JSON.stringify(b)
      })
    }
  },

두 번 째 단계: 두 번 째 페이지 에서 전송 값 을 받 는 것 은

  /**
   *       --      
   */
  onLoad: function (options) {
    if (options.obj) {
      this.setData({
        obj:JSON.parse(options.obj)
      })
    }
  },

혹은bind:tap="goToDetail" data-obj="{{item}}" 을 이용 하여 데 이 터 를 전달 하 는 것 은 말 할 것 도 없다.
5. 총화

html 기반 이 있어 야 합 니 다. 그렇지 않 으 면 페이지 레이아웃 이 어렵 습 니 다

js 문법 이 익숙 하고 페이지 의 상호작용 과 논리 가 모두 필요 하 다