詳解微信小程序框架wepy踩坑記錄(與vue對比)
wepy框架借鑒了vue的語法風(fēng)格和功能特性,但是在使用過程中還是發(fā)現(xiàn)與vue有很大的不同?,F(xiàn)在總結(jié)一下自己開發(fā)中遇到的問題,共大家參考一下。如果第一次用wepy開發(fā),強烈建議仔細閱讀一下這篇文章,一定對你有幫助,會幫你節(jié)約很多寶貴的時間。開發(fā)過程中也建議大家時不時的回來閱讀一次,鞏固加強記憶。
wepy中的組件
組件里面的坑還不是一般的多!
首先來說說組件間的數(shù)據(jù)共享。在vue中你也能做到這一點,只要把 data 寫成一個對象就可以了,當(dāng)然你不想讓所有的子組件都共享同一份數(shù)據(jù),vue中的解決方案是給 data 寫成一個函數(shù)就好了,return出來所有的數(shù)據(jù),這樣組件間的數(shù)據(jù)就不會共享了。
但是wepy中不能。文檔中介紹:WePY中的組件都是靜態(tài)組件,是以組件ID作為唯一標(biāo)識的,每一個ID都對應(yīng)一個組件實例,當(dāng)頁面引入兩個相同ID的組件時,這兩個組件共用同一個實例與數(shù)據(jù),當(dāng)其中一個組件數(shù)據(jù)變化時,另外一個也會一起變化。
所以如果同一個頁面引用多個組件,你只能給每個組件定義不同的ID,類似這樣
import Child from '../components/child'; export default class Index extends wepy.page { components = { //為兩個相同組件的不同實例分配不同的組件ID,從而避免數(shù)據(jù)同步變化的問題 child: Child, anotherchild: Child }; }
看起來是不是很蠢。但是沒辦法,你只能這么用。
如果頁面中只引用兩三個同類型組件還好,但是如果我是一個循環(huán),我也不知道我要引用多少組件,該怎么辦?
接下來再說說組件的循環(huán)。
wepy官方文檔中說明:當(dāng)需要循環(huán)渲染W(wǎng)ePY組件時(類似于通過wx:for循環(huán)渲染原生的wxml標(biāo)簽),必須使用WePY定義的輔助標(biāo)簽<repeat>。但是不支持在 repeat 的組件中去使用 props, computed, watch 等等特性。什么?props 都不讓用??那父組件如何給子組件傳參??
后來實踐發(fā)現(xiàn),如果 props 中的數(shù)據(jù)在 template 中是能取到的,但是在 method 或者event 中就取不到了,你說神不神奇!
所以最后的解決辦法是用的 wepy-redux,類似vuex,放在 store 中實現(xiàn)的。
視圖的渲染之異步數(shù)據(jù)
異步數(shù)據(jù)的獲取后需要手動調(diào)用 this.$apply() 方法才能重新渲染視圖,這一點也一定要記得。剛開始做的時候是在頁面 data 中寫的假數(shù)據(jù),渲染的好好的。但是數(shù)據(jù)換成從接口讀取后,死活視圖出不來。琢磨了半天才想起來需要手動調(diào)用 this.$apply()。而 vue 是不需要這么做的。
方法定義
wepy中頁面中的事件需要些在 methods 中,組件之間的處理函數(shù)需要寫在 events 中,而自己寫的自定義方法需要寫在與 methods 同級中。不像vue,可以寫在 methods 里。在 events 中寫的函數(shù),不需要在調(diào)用子組件的時候?qū)懺谧咏M件中,子組件 $emit 會自動去 events 中尋找同名方法執(zhí)行。這點也與vue不同。
事件傳參
wepy優(yōu)化了原生小程序在事件中的傳參形式。比如頁面中有一個方法,叫 getIndex,目的是取一個循環(huán)的 index 屬性,在原生中需要額外定義一個 data-index 屬性,然后在 getIndex 中通過event.currentTarget.dataset.index 來獲取。而wepy中可以直接在事件里傳遞,但需要加上{{}},寫成 getIndex({{index}})這樣,這點也與vue不同。
數(shù)據(jù)綁定
這個是小程序原生方法中的不好點,wepy不能幫忙背這個鍋。數(shù)據(jù)綁定也是使用 {{}},但是{{}} 里面只能進行簡單的運算,具體支持哪些運算可以看官方文檔。需求是一個列表,選中的變個樣式,正常的思路就是選中的時候觸發(fā)一個方法,將 index 賦值給 currentActive,在 {{}} 中判斷如果 currentActive == index 就應(yīng)用 active 樣式,命名很簡單的一個需求。但是寫好了就是不好使,找了半天也沒發(fā)現(xiàn)哪錯了,最后看文檔,原來是根本就不支持這種寫法!!只支持簡單的運算,這種不屬于簡單的范圍??!最后的解決辦法是弄了一個數(shù)組 arr,選中將對應(yīng)位置置為 true,在 {{}} 判斷 arr[index] 是否為 true 解決了這個問題??偨Y(jié)一句話:{{}} 一點也不強大。
動態(tài)綁定class
wepy中需要遵循小程序原生的綁定方式,與vue中也不同。在vue中,動態(tài)的和非動態(tài)的需要分別寫,類似這樣:<div class="class-a" :class="{true ? 'class-b': 'class-c'}"></div>。但是在wepy中,動態(tài)和非動態(tài)的可以寫在一起,類似這樣:<view class="class-a {{true ? 'class-b' : 'class-c'}}">
mixin混合
wepy中的 mixin 分為兩種。對于組件data數(shù)據(jù),compontents 組件,events 事件及其他自定義方法采用默認(rèn)式混合,即如果組件中未定義這些東西,那么 mixin 中的將生效,如果組件中已經(jīng)定義了,將以組件中定義的為主,mixin 中定義的不會生效。但對于 methods 事件及小程序頁面事件,將采用兼容式混合,只要定義了就都會生效。但是先響應(yīng)組件中定義的,再響應(yīng) mixin 中定義的。而vue組件中 methods 里的事件如果與 mixin 中的重名,會采用組件中的事件。而生命周期的鉤子函數(shù)則是先響應(yīng) mixin 中的,在響應(yīng)組件中的。
注:以上問題均是采用wepy1.7.2的版本,祝大家開發(fā)愉快,少踩些坑。
最后附上官方文檔鏈接,供大家參考:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript瀑布流的實現(xiàn)你學(xué)會了嗎
這篇文章主要為大家詳細介紹了JavaScript瀑布流的實現(xiàn)方法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-02-02JavaScript函數(shù)執(zhí)行、作用域鏈以及內(nèi)存管理詳解
這篇文章主要介紹了JavaScript函數(shù)執(zhí)行、作用域鏈以及內(nèi)存管理的知識,文章內(nèi)容非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01JavaScript數(shù)組,JSON對象實現(xiàn)動態(tài)添加、修改、刪除功能示例
這篇文章主要介紹了JavaScript數(shù)組,JSON對象實現(xiàn)動態(tài)添加、修改、刪除功能,結(jié)合實例形式分析了JavaScript針對json數(shù)組的添加、刪除、修改操作實現(xiàn)技巧,需要的朋友可以參考下2018-05-05TinyMCE提交AjaxForm獲取不到數(shù)據(jù)的解決方法
這篇文章主要介紹了TinyMCE提交AjaxForm獲取不到數(shù)據(jù)的解決方法,實例分析了對應(yīng)的源碼部分與相應(yīng)的解決方法,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03