摘要：四最后一點點感悟本文總結(jié)的比較淺顯很多地方說的也不是太詳細歡迎大家留言一起交流探討堅持學(xué)習(xí)不斷探索總結(jié)路漫漫其修遠兮吾將上下而求索參考資料官方文檔微信小程序官網(wǎng)開發(fā)文檔官方開發(fā)文檔

微信小程序WePY框架是騰訊官方推出來的框架,類似的框架還有美團的mpvue,京東的Taro等; 目前公司開發(fā)小程序主要用到的是微信原生方法和官方的wepy框架; wepy框架在開發(fā)過程中參考了 Vue 等現(xiàn)有框架的一些語法風(fēng)格和功能特性，對原生小程序的開發(fā)模式進行了再次封裝，更貼近于 MVVM 架構(gòu)模式, 并支持ES6/7的一些新特性。相對更容易上手,提高開發(fā)效率;

WePY的安裝或更新都通過npm進行，全局安裝或更新WePY命令行工具
npm install wepy-cli -g

在開發(fā)目錄中生成Demo開發(fā)項目
wepy new myproject

切換至項目目錄
cd myproject

安裝依賴
npm install

開啟實時編譯
wepy build --watch

WePY項目的目錄結(jié)構(gòu)如下

 ├── dist                   小程序運行代碼目錄（該目錄由WePY的build指令自動編譯生成，請不要直接修改該目錄下的文件）
 ├── node_modules           
 ├── src                    代碼編寫的目錄（該目錄為使用WePY后的開發(fā)目錄）
 |   ├── components         WePY組件目錄（組件不屬于完整頁面，僅供完整頁面或其他組件引用）
 |   |   ├── com_a.wpy      可復(fù)用的WePY組件a
 |   |   └── com_b.wpy      可復(fù)用的WePY組件b
 |   ├── pages              WePY頁面目錄（屬于完整頁面）
 |   |   ├── index.wpy      index頁面（經(jīng)build后，會在dist目錄下的pages目錄生成index.js、index.json、index.wxml和index.wxss文件）
 |   |   └── other.wpy      other頁面（經(jīng)build后，會在dist目錄下的pages目錄生成other.js、other.json、other.wxml和other.wxss文件）
 |   └── app.wpy            小程序配置項（全局?jǐn)?shù)據(jù)、樣式、聲明鉤子等；經(jīng)build后，會在dist目錄下生成app.js、app.json和app.wxss文件）
 └ ── package.json           項目的package配置

搭建好項目后，IDE需配置代碼高亮，文件后綴為.wpy，可共用Vue的高亮規(guī)則，但需要手動設(shè)置，具體配置大家可參考wepy官方文檔

wepy代碼風(fēng)格類似Vue，如computed,data,methods等用法差不多,熟悉vue開發(fā)的同學(xué)看看文檔可以輕松上手，不過還是有很多地方寫法容易混淆，我工作中遇到的總結(jié)幾個,如列表循環(huán),條件渲染,父子組件值傳遞等,下面舉例說明:

    1). wepy和vue列表循環(huán)對比:
     // wepy 列表循環(huán),外面可套一層repeat標(biāo)簽,注意和vue寫法的區(qū)別
     // 不推薦key直接用索引index
        
{{item}}

    
    
    2). wepy和vue條件渲染中,wepy需要加{{}},vue不需要,里面都可以寫表達式進行判斷:
       
       

       
    3). 父子組件值傳遞兩者都在子組件中用props接收, props中可以定義能接收的數(shù)據(jù)類型，如果不符合會報錯,
        wepy可以通過使用.sync修飾符來達到父組件數(shù)據(jù)綁定至子組件的效果，也可以通過設(shè)置子組件props的
        twoWay:true來達到子組件數(shù)據(jù)綁定至父組件的效果。那如果既使用.sync修飾符,同時子組件props中
        添加的twoWay: true時，就可以實現(xiàn)數(shù)據(jù)的雙向綁定了;
        
    // parent.wpy
        
        
        
        data = {
            parentTitle: "p-title"
        };
        
        
        // child.wpy
        
        props = {
            // 靜態(tài)傳值
            title: String,
        
            // 父向子單向動態(tài)傳值
            syncTitle: {
                type: String,
                default: "null"
            },
        
            twoWayTitle: {
                type: String,
                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中的屬性值改變時，會同時改變父組件對應(yīng)的值
            this.$parent.parentTitle = "p-title-changed";
            this.$parent.$apply();
            console.log(this.title); // "c-title";
            console.log(this.syncTitle); // "p-title-changed" --- 有.sync修飾符的props屬性值，當(dāng)在父組件中改變時，會同時改變子組件對應(yīng)的值。

2.wepy支持自定義組件開發(fā),實現(xiàn)組件復(fù)用,減少代碼冗余,提高開發(fā)效率;

3.wepy支持引入npm包,拓展了很多方法;

4.支持Promise,ES2015+特性，如async await 等;

5.支持多種編譯器，Less/Sass/Styus、Babel/Typescript、Pug;

6.支持多種插件處理，文件壓縮，圖片壓縮，內(nèi)容替換等;

7.支持 Sourcemap，ESLint代碼規(guī)范管理等;

8.對小程序wx.request方法參數(shù)進行了修改,返回Promise對象,優(yōu)化了事件參數(shù)傳遞,具體用法如下:

// wx.request原生代碼:
wx.request({
    url: "xxx",
    success: function (data) {
        console.log(data);
    }
});

// WePY 使用方式, 需要開啟 Promise 支持，參考開發(fā)規(guī)范章節(jié)
wepy.request("xxxx").then((d) => console.log(d));

// async/await 的使用方式, 需要開啟 Promise 和 async/await 支持，參考 WIKI
async function request () {
   let d = await wepy.request("xxxxx");
   console.log(d);

// 原生的事件傳參方式:
 Click me! 
Page({
    tapName: function (event) {
        console.log(event.currentTarget.dataset.id)// output: 1
        console.log(event.currentTarget.dataset.title)// output: wepy
        console.log(event.currentTarget.dataset.other)// output: otherparams
    }
});

// WePY 1.1.8以后的版本，只允許傳string。
 Click me! 
methods: {
    tapName (id, title, other, event) {
        console.log(id, title, other)// output: 1, wepy, otherparams
    }
}

本文總結(jié)的比較淺顯,很多地方說的也不是太詳細,歡迎大家留言一起交流探討,堅持學(xué)習(xí),不斷探索總結(jié),路漫漫其修遠兮,吾將上下而求索!
參考資料:wepy官方文檔 ; 微信小程序官網(wǎng)開發(fā)文檔 ; vue官方開發(fā)文檔