위챗 애플릿-wepy 학습노트

wepy 문서: https://tencent.github.io/wepy/
전역 설치 wepy: npm i -g wepy-cli초기화 항목: wepy init standard myproject프로젝트 디렉토리로 전환: cd myproject설치 의존도: npm installwepy 프로젝트 디렉토리
기본 사항-dist//패키지화된 파일 기본 사항 - src//개발 파일 디렉토리 기본 사항 - components//구성 요소 디렉토리 기본 사항 - images//이미지 파일 디렉토리 기본 사항 - mixins//공통 함수 – mocks//아날로그 데이터 디렉토리 기본 사항 - pages//애플릿 단일 페이지 디렉토리 기본 사항 - store///redux 저장 데이터(페이지 전송)│ ├── app.wpy//입구 파일 (설정 페이지의 이동)\기본 사항 - index.html//모델 파일 기본 사항 --wepy.config.js//프로필
중요 알림

위챗 개발자 도구 -->프로젝트를 추가하려면 프로젝트 디렉터리dist 디렉터리를 선택하십시오.

위챗 개발자 도구 -->프로젝트 -->ES6에서 ES5로 전환합니다.중요: 이 항목을 빠뜨리면 실행 오류가 발생합니다.

위챗 개발자 도구 -->프로젝트 -->업로드 코드를 닫을 때 스타일 자동 완성.중요: 일부 상황에서 이 항목을 빠뜨리면 오류 보고가 실행됩니다.

위챗 개발자 도구 -->프로젝트 -->코드 압축 업로드를 닫습니다.중요: 켜면 실제 컴퓨터,props를 초래할 수 있습니다.sync 등의 속성이 유효하지 않습니다.(주: 압축 기능은 Wepy에서 제공하는build 명령으로 대체할 수 있습니다. 자세한 내용은 뒷부분의 설명과 Demo 프로젝트 루트 디렉터리의 wepy.config.js와package.json 파일을 보십시오.)

로컬 프로젝트 루트 디렉터리에서 npm run dev(wepy build --watch)를 실행하고 실시간 컴파일을 시작합니다.(참고: 위챗 개발자 도구 --> 설정 --> 편집기에서 파일 저장 시 자동으로 애플릿을 컴파일하면 실시간으로 미리 볼 수 있어 매우 편리합니다.)

개발 안내
index.template.html: 모듈 파일
그중에서 통과하다wepy.app 포털 파일을 생성합니다.wepy.page 페이지 파일을 만듭니다.wepy.component 어셈블리 파일을 생성합니다.
app.wpy: config, 글로벌 데이터, constructor, 생명주기를 포함하는 입구 파일.config에서 라우팅 구성

config: 페이지, window,tabBar를 구성합니다.각각 페이지 루트 설정, 페이지 내비게이션 표시줄 설정, 페이지 밑에 표시줄 설정입니다.상세 구성: 애플릿 프레임워크 구성

글로벌 데이터: 전역 파라미터 설정으로 여러 페이지의 공용 파라미터에 사용됩니다.

constructor: 차단기의 설정.

라이프 사이클 사용

그 중에서 페이지 개발에 async/await가 필요하다면 app에 필요합니다.wpy에서 import'wepy-async-function'불러오는 모듈을 사용합니다. 그렇지 않으면 컴파일한 후 페이지에서 오류가 발생하여 async/await를 사용할 수 없습니다.

//     ，   ，   
config = {
    pages: [
        'pages/main',
        'pages/admin-center'
    ],
    window: {
        backgroundTextStyle: 'light',
        navigationBarBackgroundColor: '#fff',
        navigationBarTitleText: 'WeChat',
        navigationBarTextStyle: 'black'
    },
    tabBar = {
        color: '#AEADAD',
        selectedColor: '#049BFF',
        backgroundColor: '#fff',
        borderStyle: 'black',
        list: [{
            pagePath: 'pages/index',
            text: '  '，
            "iconPath": "images/ico-home.png",
            "selectedIconPath": "images/ico-home-d.png"
        }, {
            pagePath: 'pages/admin-center',
            text: '  '，
            "iconPath": "images/ico-setting.png",
            "selectedIconPath": "images/ico-setting-d.png"
        }]
    }
}
//     （           ）
globalData = {
    prizeList: [],                  //        
}
//      ，intercept      
constructor () {
    super()
    intercept(this)
}
//     
onLaunch(res) {
    console.log(res)
}

wpy 모듈의 속성

export default class Index @extends wepy.page{
    customData = {}  //      

    customFunction ()　{}  //     

    onLoad () {}  //  Page Component         

    onShow () {}  //   Page            

    config = {};  //   Page          ，      page.json  

    data = {};  //              ，         

    components = {};  //            ，             

    mixins = [];  //         Mixin  

    computed = {};  //       （      ）

    watch = {};  //     watcher（      ）

    methods = {};  //     wxml          。  ，         wxml    bind、catch  ，                 

    events = {};  //              
}

등록 정보
설명
config
페이지 설정 대상, 원생 페이지에 대응.json 파일, app와 유사합니다.wpy의 config
components
페이지 구성 요소 목록 대상, 페이지에 도입된 구성 요소 목록 성명
data
페이지 렌더링 데이터 객체, 페이지 템플릿 바인딩에 사용할 수 있는 렌더링 데이터 저장
methods
xml 이벤트 처리 함수 대상은 wxml에서 포획된 이벤트에 응답하는 함수를 저장합니다. 예를 들어bindtap,bindchange는 사용자 정의 방법을 설명하는 데 사용할 수 없습니다.
events
WePY 구성 요소 이벤트 처리 함수 대상, 응답 구성 요소 간에 $broadcast, $emit, $invoke를 통해 전달된 이벤트의 함수를 저장합니다
기타
애플릿 페이지의 생명주기 함수, 예를 들어 onLoad, onReady 등과 기타 사용자 정의 방법과 속성
wpy에서 사용자 정의 함수는methods와 같은 위치에 써야 하며,methods에 쓰지 않아도 됩니다.
페이지의 점프
페이지의 이동은 app.wpy의 config에 있는 pages에 페이지의 경로를 설정하고 페이지에서navigateTo를 통해 해당 페이지로 이동해야 한다.wepy에서.페이지의 스크립트에서 this.$navigate({url:""})를 통해 페이지의 이동을 실현할 수 있습니다.wepy에서.component의 구성 요소 중 this.$parent.$navigate({url:""}) 또는 wepy.navigateTo를 통해 실현할 수 있습니다.

wepy.navigateTo({
  url: '/pages/info'
})

wepy의 생명주기
wepy의 생명주기의 갈고리 함수는 다음과 같다. onLoad，onReady，onShow，onPrefetch ， onReady，onShow，onPrefetchwepy만 있다.페이지에서만 유용합니다.wepy.component는 onLoad만 지원하며 다른 것은 트리거하지 않습니다.

onLoad: 페이지가 불러올 때 호출됩니다. 한 페이지는 한 번만 호출됩니다.(루트 점프 시 navigateTo 점프를 통과하면 onload 재실행되고 navigateBack 점프를 통과하면 onLoad 재실행되지 않습니다

onShow: 페이지가 표시될 때 호출됩니다.

onReady: 페이지의 모든 자원이 불러올 때 호출됩니다.

onPrefetch: 페이지가 이동할 때 터치하여 데이터를 미리 불러오고 조회하는 데 사용합니다.

onUnload: 페이지를 마운트 해제할 때 터치(redirectTo, switchTab,navigateBack,reLaunch를 통해 현재 페이지의 onUnload를 터치하지만navigateTo는 터치하지 않습니다).

라이프 사이클 순서: onPrefetch > onLoad > onShow > onReady.onPrefetch 이 생명주기는 wepy에서 확장된 것으로 촉발은 통과해야 한다.this.$navigate 및 기타 wepy 봉인된 점프 방식만 실현할 수 있습니다.설정onPrefetch 이후onLoad에서 변수를 설정하여 획득onPrefetch에서 반환된 값입니다.
사례:

onLoad (params, data) {
  data.prefetch.then((list) => {
    this.adminMath = list.chasucccnt.data.succcnt
    this.recordInfo = list.adminCenter.data.challengeRecList
    this.heightScore = list.adminCenter.data.hs
    this.hadMath = list.adminCenter.data.cc
    this.$apply()
  })
}
// chasucccnt,getAdminCenter        ，        {data:{succcnt:0}。
async onPrefetch () {
  let chasucccnt = await this.chasucccnt()
  let adminCenter = await this.getAdminCenter()
  return new Promise((resolve, reject) => {
    resolve({
      chasucccnt: chasucccnt,
      adminCenter: adminCenter
    })
  })
}

props는 부자 구성 요소 간의 값을 전달합니다
공식 사례:

// parent.wpy

 script    
data = {
    parentTitle: 'p-title'
}

// child.wpy
props = {
    //     
    title: String,

    //          
    syncTitle: {
        type: String,
        default: 'null'
    },

    twoWayTitle: {
        type: Number,
        default: 'nothing',
        twoWay: true
    }
};

onLoad () {
    console.log(this.title); // p-title
    console.log(this.syncTitle); // p-title
    console.log(this.twoWayTitle); // p-title

    this.title = 'c-title';
    console.log(this.$parent.parentTitle); // p-title.
    this.twoWayTitle = 'two-way-title';
    this.$apply();
    console.log(this.$parent.parentTitle); // two-way-title.  --- twoWay true ，   props        ，            
    this.$parent.parentTitle = 'p-title-changed';
    this.$parent.$apply();
    console.log(this.title); // 'c-title';
    console.log(this.syncTitle); // 'p-title-changed' ---  .sync    props   ，         ，            。
}

상례가 있어 알 수 있다:title는 정적 전송값으로 첫 번째만 유효하며 뒤에 값이 바뀌면 서브어셈블리의 title는 바뀌지 않으며 속성 뒤에 추가됩니다.sync 이후, 즉 이 속성이 바뀌면 하위 구성 요소의 상응하는 값이 바뀝니다.props 설정twoWay: true 이후 부자 구성 요소의 양방향 귀속을 실현할 수 있습니다.
구성 요소 간의 데이터 통신
wepy의 통신은 주로 세 가지 방법을 사용한다. $broadcast, $emit, $invoke;

$broadcast: 부모 구성 요소가 모든 하위 구성 요소 (자손 구성 요소 포함) 이벤트를 터치합니다.

$emit: 하위 구성 요소가 모든 부모 구성 요소 (조상 구성 요소 포함) 이벤트를 터치합니다.부모 구성 요소 속성에서 사용합니다.사용자 정의 이벤트를 설정하면 $emit는 사용자 정의 이벤트를 터치하는 데 사용되며 이벤트에서 설명한 함수는 다시 실행되지 않습니다.(vue의 사용법과 달리 vue에서는 부모 구성 요소에 하위 구성 요소의 속성을 설정해야 합니다. 하위 구성 요소에서 터치할 수 있습니다. wepy에서는 필요없습니다. 이벤트에서 설정하는 방법만 있으면 하위 구성 요소에서 터치할 수 있습니다.)

$invoke: 페이지나 하위 구성 요소가 다른 하위 구성 요소 이벤트를 터치합니다.

parent.wpy


export default class Parent extends wepy.page{
    data = {
        name: 'parent'
    }
    events = {
        'some-event': (p1, p2, p3, $event) => {
            //     'parent receive some-event children',$event.source     。
            console.log(`${this.name} receive ${$event.name} from ${$event.source.name}`)
        }
    }
    onLoad () {
            this.$broadcast('getIndex', 1, 4)
    }
    methods = {
        someEvent (...p) {
            //   [1, 2, 3, _class]。
            console.log(p)
        }
    }
}


children.wpy

export default class Parent extends wepy.page{
    data = {
        name: 'children'
    }
    onLoad () {
        // this.$emit('some-event', 1, 2, 3)
        //            
        this.$emit('childFun', 1, 2, 3)
    }
    events = {
        'getIndex': (...p) => {
            console.log(p)        //   [1, 4]
        }
    }
}
             @childFun.user = 'someEvent' ，           this.$emit('childFun', 1, 2, 3)


//$invoke
           ：
  import      ，          
this.$invoke('   ，         ', '       ',  param1,param2,param3.......);
        ：
this.$invoke('        ', '       ',  param1,param2,param3.......);
           ：    './'     ，'../'    ，    。               ，             ，         redux。</code></pre> 
 <blockquote>
          $emit                 。       $broadcast                 。  $emit $broadcast            events ， $invoke      events    ，         components      ，$invoke              components   ，        ，                      ，             ，       ，            ，    ，   redux  。 
 </blockquote> 
 <h3>Mixins  </h3> 
 <ol> 
  <li>     （    data  ，components，events,     ）</li> 
 </ol> 
 <p>  wepy.mixin                 ，             ，mixin          。    ：</p> 
 <pre><code>// mixin.js
export default class TestMixin extends wepy.mixin {
    data = {
        foo: 'foo defined by page',
        bar: 'bar defined by testMix'
    };
    methods: {
    tap () {
      console.log('mix tap');
    }
  }
}
....
import wepy from 'wepy';
import TestMixin from './mixins/test';
export default class Index extends wepy.page {
    data = {
        foo: 'foo defined by index'
    };
    mixins = [TestMixin ];
    onShow() {
        console.log(this.foo); // foo defined by index
        console.log(this.bar); // bar defined by testMix
    }
}</code></pre> 
 <blockquote>
    mixin            mixin     data     。mixin  this        。 
 </blockquote> 
 <ol> 
  <li>     （    ）</li> 
 </ol> 
 <p>  mixin               ，     mixin      ，         。</p> 
 <pre><code>// mixin.js
export default class TestMixin extends wepy.mixin {
    onLoad () {
        console.log(2222)
    }
}
....
import wepy from 'wepy';
import TestMixin from './mixins/test';
export default class Index extends wepy.page {
    data = {
        foo: 'foo defined by index'
    };
    mixins = [TestMixin ];
    onLoad() {
        console.log(11111); 
    }
}
     ： 
2222
11111</code></pre> 
 <h3>wxs   ，     </h3> 
 <p>        wxs   ，        wxs  。      ：</p> 
 <pre><code>//           10000       
module.exports = {
  filter: function (num) {
    if (num < 10000) {
      return num
    } else {
      var reNum = (num / 10000).toFixed(1) 
      return reNum + ' '
    }
  }
}</code></pre> 
 <p>      import      ：</p> 
 <pre><code>// template      ，mywxs    wxs    key 
<view>{{mywxs.filter(mItem.playerCount)}} </view>
.....
import mywxs from '@/wxs/fixed.wxs'
export default class Index extends wepy.page{
......
wxs = {
    mywxs: mywxs
}
.....
}</code></pre> 
 <blockquote>
      wxs     template   ，   js    
 </blockquote> 
 <h3>Promise async/await   （      ）</h3> 
 <pre><code>//   
async endVideo (event) {
  let endTime = event.timeStamp
  let startTime = this.startTime
  this.videoInfo = '2131'
  let video = await new Promise((resolve, reject) => {
    recorderManager.onStop((res) => {
      console.log('recorder stop', res)
      const { tempFilePath } = res
      resolve(tempFilePath)
    })
    recorderManager.stop()
  })
  if ((endTime - startTime) > 1000) {
    this.videoInfo = video
    this.$apply()
  }
}</code></pre> 
 <blockquote>
             ，               ，      $apply()  ，              。 
 </blockquote> 
 <h3>   </h3> 
 <p>              ，        ID。            ，      <code>hideShareMenu</code>           .</p> 
 <blockquote>
      
 </blockquote> 
 <pre><code> wpy     onload   
//           
wepy.showShareMenu({
    withShareTicket: true
})

 onShareAppMessage        ，              wepy.getShareInfo        。          ，             。
onShareAppMessage (res) {
    if (res.from === 'button') {
        console.log(res.target)
    }
    return {
        title: '       ',
        path: '/pages/main',
        success: function(res) {
            let shareId = res.shareTickets[0]
            //     
            wepy.getShareInfo({
                shareTicket: shareId,
                success: (data) => {
                  var appId = '    appID'
                  var encryptedData = data.encryptedData
                  var iv = data.iv
                  wepy.request({
                    url: 'http://localhost:3000/api/decode',
                    method: 'post',
                    data: {
                      appId: appId,
                      encryptedData: encryptedData,
                      iv: iv
                    },
                    success: (info) => {
                      console.log('info:' + info)
                    },
                    fail: (info) => {
                      console.log(info)
                    }
                  })
                  console.log(data)
                },
                fail: (data) => {
                  console.log(data)
                }
            })
            console.log(res)
        },
        fail: function(res) {
            //     
            console.log(res)
        }
    }
}</code></pre> 
 <blockquote>
     onShareAppMessage   wepy.page       ， wepy.component      。 onShareAppMessage  path          
  <code>?ie= </code>，            
  <code>onLoad</code>        
 </blockquote> 
 <h3>            ，      </h3> 
 <p>    express，    ：</p> 
 <pre><code>var express = require('express');
var app = express();
app.listen(3000, function () {
    console.log('listen:3000');
})</code></pre> 
 <p>          ：</p> 
 <pre><code>var router = express.Router();
var bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
router.get('/info', function (req, res) {
    console.log(req.query);
    console.log(req.body);
}
app.use('/api', router)     //     ajax '/api/info'    </code></pre> 
 <p>      （         <a href="https://api.weixin.qq.com/sns/jscode2session%E5%8F%91%E9%80%81%E8%AF%B7%E6%B1%82" rel="nofollow noreferrer">https://api.weixin.qq.com/sns...</a>，                  ）：</p> 
 <pre><code>var request = require('request');
//  '/info'        ,  session_key。
request.get({
    uri: 'https://api.weixin.qq.com/sns/jscode2session',
    json: true,
    qs: {
        grant_type: 'authorization_code',
        appid: '    appID',
        secret: '      ',
        js_code: code
    }
}, (err, response, data) => {
    if (response.statusCode === 200) {
        console.log("[openid]", data.openid)
        console.log("[session_key]", data.session_key)
        session_key = data.session_key
        //TODO:          sessionid   ， openid session_key   ，  redis，       2  
        //   : redisStore.set(sessionid, openid + session_key, 7200)
        res.json({
            openid: data.openid,
            session_key: data.session_key
        });
    } else {
        console.log("[error]", err)
        res.json(err)
    }
})</code></pre> 
 <h3>  </h3> 
 <p>               WXBizDataCrypt.js。<br>            4 ：</p> 
 <pre><code>1. AppID(      id，             ),

2. session_key(            )，

3. encryptedData(        ，             )，

4. iv（      ，           ）。
</code></pre> 
 <p> app.js   WXBizDataCrypt.js:</p> 
 <pre><code>//     
var WXBizDataCrypt = require('./WXBizDataCrypt')

//     
router.post('/decode', function (req, res) {
    var appId = req.body.appId;
    var sessionKey = session_key;
    var encryptedData = req.body.encryptedData;
    var iv = req.body.iv;
    var pc = new WXBizDataCrypt(appId, sessionKey);
    var data = pc.decryptData(encryptedData , iv);
    res.json({data: data});
})</code></pre> 
</article>
                            </div>
                        </div>
                    </div>
                    <!--PC WAP    -->
                    <div id="SOHUCS" sid="1208198222577766400"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js">