使用wepy框架搭建微信小程序採坑記（一）

1.什麼是wepy

這個框架是騰訊內部出的一個類MVVM的小程序開發框架。大致上來講語法是類VUE的，因此若是有VUE開發經驗的話遷移成本會低一些。至於具體的怎麼使用我就不贅言了，有問題查文檔（官方文檔）

2.爲何會出現wepy

我雖然尚未在實際項目中完整開發過一個APP，但本身看着文檔敲着DEMO再道聽途說一下也都知道，小程序是有不少限制的，小項目可能以爲無所謂，可業務稍微複雜一點，寫起來和維護起來都是很是蛋疼的。主要表如今如下幾個方面：

• 組件化支持能力太弱(幾乎沒有)
• 不能使用 less、jade 等
• 沒法使用 NPM 包及 ES 高級語法
• request 併發次數限制
  而wepy的出現基本上彌補上了這些問題，而且wepy的的開發模式更貼近於現有的MVVM框架開發模式，不過雖然大部分模式參考了現有的MVVM類框架，尤爲是VUE，但也仍是有很多不一樣的地方，因此記錄一下遇到的坑

3.使用感覺(遇到的坑)

3.1 語法問題

• 由於wepy是支持ES6/ES7的一些特性的，並且官方DEMO中都是採用的最新的語法，因此最好對ES6的語法有些瞭解，包括async/awit等

3.2 和VUE的比較

• 咋一看wepy也是組件化開發的，.wpy的組件和.vue的文件是很相似的，但仍是存在不少語法上的卻別的。例如在VUE的for循環中能夠將下標直接傳入方法中
  ```
  

  
  <li v-for="(item, index) in items" @click="smFun(index)">
  {{ item.message }}
  
  

  而在wepy中是對於普通循環來講是基本沿用了小程序原生的模式，而且傳值都要帶上{{}}

  <view wx:for="{{ items }}" @tap="smFun({{index}})">{{ item }}
  ```
• 對於組價的渲染，wepy必須經過一個新增的標籤： ，而vue仍然可使用v-for
• 對於樣式類名的渲染，語法也不同，在wepy中固定類名和動態類名是混合在一塊兒的：
  <view class="tab {{ isTrue ? 'active' : '' }}"></view>
  而在vue中是分開寫的：
  <div class="tab" :class="{'active': isTrue}"></div>

• 固然這兩者之間還有不少不一樣的地方，這裏就不一一列舉了，整體來講仍是以爲vue寫法更加方便一些，大致上來講wepy在語法上只是對原生小程序的語法作了一次再封裝而已

3.3 wepy組件之傳值的那些坑

wepy組件之間傳值大致上是沿用的vue的模式，尤爲是vue1.0版本以前的模式，基本上來講父子組件之間通訊就是子組件用props接收參數，而後子組件用$emit傳遞給父組件。值得一提的是wepy新增了一個$invoke方法用於組件之間通訊。

• 首先有個問題須要明確的就是wepy框架自帶了wepy.component，wepy.page等幾個基類，以後咱們本身寫的那些個組件或者page都是繼承自這幾個基類，不能定義錯了，由於他們各自帶的方法不同,例如在一個組件中這樣寫是不管如何都拿不到父組件傳遞過來的參數的,由於wepy.page這個基類中就不存在props這個屬性。

export default class Com extends wepy.page {
    props = {
        xxx: String
    }
    
    onload () {
        console.log(xxx)    
    }

}

• 而後一個很簡單也很容易被忽略的一點，就是引用組件以後及時的註冊。由於wepy自己的錯誤反饋機制並無vue那麼完善，因此有的時候報的錯根本就不明確，仍是要養成良好的編程習慣來避免一些低級錯誤。
• 還有一點就是在props傳值過程當中父級要動態傳值給子級，必定要加上.sync修飾符，這樣就至關於達到了一個從父級到子級的單向數據綁定

// parent.wpy

<child :title="parentTitle" :syncTitle.sync="parentTitle" :twoWayTitle="parentTitle"></child>

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屬性值，當在父組件中改變時，會同時改變子組件對應的值。
}

4.後記

說實話，我也是最近入職了新公司纔開始接觸wepy這個框架，目前答題使用了兩週左右了，記錄一些工做中遇到的坑，留着之後查閱，有相同經歷的小夥伴也能夠參考一下或者提出更好的解決方案。以後遇到新的坑會繼續整理更新的……

參考文章：

• wepy官方文檔：https://tencent.github.io/wepy/document.html#
• 像VUE同樣寫微信小程序-深刻研究wepy框架：https://zhuanlan.zhihu.com/p/28700207