微信小程式框架wepy踩坑記錄(與vue對比)
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的版本,祝大家開發愉快,少踩些坑。