wepy框架借鑒了vue的語(yǔ)法風(fēng)格和功能特性，但是在使用過(guò)程中還是發(fā)現(xiàn)與vue有很大的不同。現(xiàn)在總結(jié)一下自己開(kāi)發(fā)中遇到的問(wèn)題，共大家參考一下。如果第一次用wepy開(kāi)發(fā)，強(qiáng)烈建議仔細(xì)閱讀一下這篇文章，一定對(duì)你有幫助，會(huì)幫你節(jié)約很多寶貴的時(shí)間。開(kāi)發(fā)過(guò)程中也建議大家時(shí)不時(shí)的回來(lái)閱讀一次，鞏固加強(qiáng)記憶。

wepy中的組件

組件里面的坑還不是一般的多！

首先來(lái)說(shuō)說(shuō)組件間的數(shù)據(jù)共享。在vue中你也能做到這一點(diǎn)，只要把 data 寫(xiě)成一個(gè)對(duì)象就可以了，當(dāng)然你不想讓所有的子組件都共享同一份數(shù)據(jù)，vue中的解決方案是給 data 寫(xiě)成一個(gè)函數(shù)就好了，return出來(lái)所有的數(shù)據(jù)，這樣組件間的數(shù)據(jù)就不會(huì)共享了。

但是wepy中不能。文檔中介紹：WePY中的組件都是靜態(tài)組件，是以組件ID作為唯一標(biāo)識(shí)的，每一個(gè)ID都對(duì)應(yīng)一個(gè)組件實(shí)例，當(dāng)頁(yè)面引入兩個(gè)相同ID的組件時(shí)，這兩個(gè)組件共用同一個(gè)實(shí)例與數(shù)據(jù)，當(dāng)其中一個(gè)組件數(shù)據(jù)變化時(shí)，另外一個(gè)也會(huì)一起變化。
所以如果同一個(gè)頁(yè)面引用多個(gè)組件，你只能給每個(gè)組件定義不同的ID，類似這樣

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

  export default class Index extends wepy.page {
    components = {
      //為兩個(gè)相同組件的不同實(shí)例分配不同的組件ID，從而避免數(shù)據(jù)同步變化的問(wèn)題
      child: Child,
      anotherchild: Child
    };
  }

看起來(lái)是不是很蠢。但是沒(méi)辦法，你只能這么用。

如果頁(yè)面中只引用兩三個(gè)同類型組件還好，但是如果我是一個(gè)循環(huán)，我也不知道我要引用多少組件，該怎么辦？
接下來(lái)再說(shuō)說(shuō)組件的循環(huán)。

wepy官方文檔中說(shuō)明：當(dāng)需要循環(huán)渲染W(wǎng)ePY組件時(shí)(類似于通過(guò)wx:for循環(huán)渲染原生的wxml標(biāo)簽)，必須使用WePY定義的輔助標(biāo)簽<repeat>。但是不支持在 repeat 的組件中去使用 props, computed, watch 等等特性。什么？props 都不讓用？？那父組件如何給子組件傳參？？

后來(lái)實(shí)踐發(fā)現(xiàn)，如果 props 中的數(shù)據(jù)在 template 中是能取到的，但是在 method 或者event 中就取不到了，你說(shuō)神不神奇！
所以最后的解決辦法是用的 wepy-redux，類似vuex，放在 store 中實(shí)現(xiàn)的。

視圖的渲染之異步數(shù)據(jù)

異步數(shù)據(jù)的獲取后需要手動(dòng)調(diào)用 this.$apply() 方法才能重新渲染視圖，這一點(diǎn)也一定要記得。剛開(kāi)始做的時(shí)候是在頁(yè)面 data 中寫(xiě)的假數(shù)據(jù)，渲染的好好的。但是數(shù)據(jù)換成從接口讀取后，死活視圖出不來(lái)。琢磨了半天才想起來(lái)需要手動(dòng)調(diào)用 this.$apply()。而 vue 是不需要這么做的。

方法定義

wepy中頁(yè)面中的事件需要些在 methods 中，組件之間的處理函數(shù)需要寫(xiě)在 events 中，而自己寫(xiě)的自定義方法需要寫(xiě)在與 methods 同級(jí)中。不像vue，可以寫(xiě)在 methods 里。在 events 中寫(xiě)的函數(shù)，不需要在調(diào)用子組件的時(shí)候?qū)懺谧咏M件中，子組件 $emit 會(huì)自動(dòng)去 events 中尋找同名方法執(zhí)行。這點(diǎn)也與vue不同。

事件傳參

wepy優(yōu)化了原生小程序在事件中的傳參形式。比如頁(yè)面中有一個(gè)方法，叫 getIndex，目的是取一個(gè)循環(huán)的 index 屬性，在原生中需要額外定義一個(gè) data-index 屬性，然后在 getIndex 中通過(guò)event.currentTarget.dataset.index 來(lái)獲取。而wepy中可以直接在事件里傳遞，但需要加上{{}}，寫(xiě)成 getIndex({{index}})這樣，這點(diǎn)也與vue不同。

數(shù)據(jù)綁定

這個(gè)是小程序原生方法中的不好點(diǎn)，wepy不能幫忙背這個(gè)鍋。數(shù)據(jù)綁定也是使用 {{}}，但是{{}} 里面只能進(jìn)行簡(jiǎn)單的運(yùn)算，具體支持哪些運(yùn)算可以看官方文檔。需求是一個(gè)列表，選中的變個(gè)樣式，正常的思路就是選中的時(shí)候觸發(fā)一個(gè)方法，將 index 賦值給 currentActive，在 {{}} 中判斷如果 currentActive == index 就應(yīng)用 active 樣式，命名很簡(jiǎn)單的一個(gè)需求。但是寫(xiě)好了就是不好使，找了半天也沒(méi)發(fā)現(xiàn)哪錯(cuò)了，最后看文檔，原來(lái)是根本就不支持這種寫(xiě)法！！只支持簡(jiǎn)單的運(yùn)算，這種不屬于簡(jiǎn)單的范圍??！最后的解決辦法是弄了一個(gè)數(shù)組 arr，選中將對(duì)應(yīng)位置置為 true，在 {{}} 判斷 arr[index] 是否為 true 解決了這個(gè)問(wèn)題?？偨Y(jié)一句話：{{}} 一點(diǎn)也不強(qiáng)大。

動(dòng)態(tài)綁定class

wepy中需要遵循小程序原生的綁定方式，與vue中也不同。在vue中，動(dòng)態(tài)的和非動(dòng)態(tài)的需要分別寫(xiě)，類似這樣：<div class="class-a" :class="{true ? 'class-b': 'class-c'}"></div>。但是在wepy中，動(dòng)態(tài)和非動(dòng)態(tài)的可以寫(xiě)在一起，類似這樣：<view class="class-a {{true ? 'class-b' : 'class-c'}}">

mixin混合

wepy中的 mixin 分為兩種。對(duì)于組件data數(shù)據(jù)，compontents 組件，events 事件及其他自定義方法采用默認(rèn)式混合，即如果組件中未定義這些東西，那么 mixin 中的將生效，如果組件中已經(jīng)定義了，將以組件中定義的為主，mixin 中定義的不會(huì)生效。但對(duì)于 methods 事件及小程序頁(yè)面事件，將采用兼容式混合，只要定義了就都會(huì)生效。但是先響應(yīng)組件中定義的，再響應(yīng) mixin 中定義的。而vue組件中 methods 里的事件如果與 mixin 中的重名，會(huì)采用組件中的事件。而生命周期的鉤子函數(shù)則是先響應(yīng) mixin 中的，在響應(yīng)組件中的。

注：以上問(wèn)題均是采用wepy1.7.2的版本，祝大家開(kāi)發(fā)愉快，少踩些坑。

最后附上官方文檔鏈接，供大家參考：

小程序官方文檔
wepy官方文檔

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論