微信小程式框架wepy踩坑記錄（與vue對比）

摘要： wepy框架借鑑了vue的語法風格和功能特性，但是在使用過程中還是發現與vue有很大的不同。現在總結一下自己開發中遇到的問題，共大家參考一下。如果第一次用wepy開發，強烈建議仔細閱讀一下這篇文章，一定對你有幫助，會幫你節約很多寶貴的時間。開發過程中也建議大家時不時的回來閱讀一次，鞏固加強記憶...

wepy框架借鑑了vue的語法風格和功能特性，但是在使用過程中還是發現與vue有很大的不同。現在總結一下自己開發中遇到的問題，共大家參考一下。如果第一次用wepy開發，強烈建議仔細閱讀一下這篇文章，一定對你有幫助，會幫你節約很多寶貴的時間。開發過程中也建議大家時不時的回來閱讀一次，鞏固加強記憶。

• wepy中的元件

元件裡面的坑還不是一般的多！

首先來說說元件間的資料共享。在vue中你也能做到這一點，只要把data 寫成一個物件就可以了，當然你不想讓所有的子元件都共享同一份資料，vue中的解決方案是給data 寫成一個函式就好了，return出來所有的資料，這樣元件間的資料就不會共享了。

但是wepy中不能。文件中介紹：WePY中的元件都是靜態元件，是以元件ID作為唯一標識的，每一個ID都對應一個元件例項，當頁面引入兩個相同ID的元件時，這兩個元件共用同一個例項與資料，當其中一個元件資料變化時，另外一個也會一起變化。

所以如果同一個頁面引用多個元件，你只能給每個元件定義不同的ID，類似這樣

import Child from '../components/child';

export default class Index extends wepy.page {
components = {
//為兩個相同元件的不同例項分配不同的元件ID，從而避免資料同步變化的問題
child: Child,
anotherchild: Child
};
}

看起來是不是很蠢。但是沒辦法，你只能這麼用。

如果頁面中只引用兩三個同類型元件還好，但是如果我是一個迴圈，我也不知道我要引用多少元件，該怎麼辦？

接下來再說說元件的迴圈。

wepy官方文件中說明：當需要迴圈渲染WePY元件時(類似於通過wx:for迴圈渲染原生的wxml標籤)，必須使用WePY定義的輔助標籤<repeat> 。但是不支援在repeat 的元件中去使用props ,computed ,watch 等等特性。什麼？props 都不讓用？？那父元件如何給子元件傳參？？

後來實踐發現，如果props 中的資料在template 中是能取到的，但是在method 或者event 中就取不到了，你說神不神奇！

所以最後的解決辦法是用的wepy-redux ，類似vuex，放在store 中實現的。

• 檢視的渲染之非同步資料

非同步資料的獲取後需要手動呼叫this.$apply() 方法才能重新渲染檢視，這一點也一定要記得。剛開始做的時候是在頁面data 中寫的假資料，渲染的好好的。但是資料換成從介面讀取後，死活檢視出不來。琢磨了半天才想起來需要手動呼叫this.$apply() 。而 vue 是不需要這麼做的。

• 方法定義

wepy中頁面中的事件需要些在methods 中，元件之間的處理函式需要寫在events 中，而自己寫的自定義方法需要寫在與methods 同級中。不像vue，可以寫在methods 裡。在events 中寫的函式，不需要在呼叫子元件的時候寫在子元件中，子元件$emit 會自動去events 中尋找同名方法執行。這點也與vue不同。

• 事件傳參

wepy優化了原生小程式在事件中的傳參形式。比如頁面中有一個方法，叫getIndex ，目的是取一個迴圈的index 屬性，在原生中需要額外定義一個data-index 屬性，然後在getIndex 中通過event.currentTarget.dataset.index 來獲取。而wepy中可以直接在事件裡傳遞，但需要加上{{}} ，寫成getIndex({{index}}) 這樣，這點也與vue不同。

• 資料繫結

這個是小程式原生方法中的不好點，wepy不能幫忙背這個鍋。資料繫結也是使用{{}} ，但是{{}} 裡面只能進行簡單的運算，具體支援哪些運算可以看官方文件 。需求是一個列表，選中的變個樣式，正常的思路就是選中的時候觸發一個方法，將index 賦值給currentActive ，在{{}} 中判斷如果currentActive == index 就應用active 樣式，命名很簡單的一個需求。但是寫好了就是不好使，找了半天也沒發現哪錯了，最後看文件，原來是根本就不支援這種寫法！！只支援簡單的運算，這種不屬於簡單的範圍！！最後的解決辦法是弄了一個數組arr ，選中將對應位置置為true ，在{{}} 判斷arr[index] 是否為true 解決了這個問題。總結一句話：{{}} 一點也不強大。

• 動態繫結class

wepy中需要遵循小程式原生的繫結方式，與vue中也不同。在vue中，動態的和非動態的需要分別寫，類似這樣：<div class="class-a" :class="{true ? 'class-b': 'class-c'}"></div> 。但是在wepy中，動態和非動態的可以寫在一起，類似這樣：<view class="class-a {{true ? 'class-b' : 'class-c'}}">

• mixin混合

wepy中的mixin 分為兩種。對於元件data資料，compontents 元件，events 事件及其他自定義方法採用預設式混合，即如果元件中未定義這些東西，那麼mixin 中的將生效，如果元件中已經定義了，將以元件中定義的為主，mixin 中定義的不會生效。但對於methods 事件及小程式頁面事件，將採用相容式混合，只要定義了就都會生效。但是先響應元件中定義的，再響應mixin 中定義的。而vue元件中methods 裡的事件如果與mixin 中的重名，會採用元件中的事件。而生命週期的鉤子函式則是先響應mixin 中的，在響應元件中的。

注：以上問題均是採用wepy1.7.2的版本，祝大家開發愉快，少踩些坑。