微信小程序框架wepy的示例分析

這篇文章將為大家詳細講解有關微信小程序框架wepy的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

wepy框架借鑒了vue的語法風格和功能特性，但是在使用過程中還是發現與vue有很大的不同?，F在總結一下自己開發中遇到的問題，共大家參考一下。

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 解決了這個問題?？偨Y一句話：{{}} 一點也不強大。

動態綁定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的版本

關于“微信小程序框架wepy的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。