微信小程序框架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 中的，在響應組件中的。

• wxs是個好東西

wxs是小程序的一套腳本語言。結合wxml，能夠構建出頁面的結構。對於那些props在methods中不能用的狀況，或者稍微複雜一些的語句，通通能夠寫在wxs中。可是它有本身的語法，總體上js的方法都能用，但也須要注意一些。

能夠在一個頁面中單獨定義好所須要的函數，用import引入，在class中定義一下，相似引入組件的方式。而後就能夠在template中愉快的使用了。具體文檔地址：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/

wxs文件內容

module.exports = {
  getClassName : function(item){
      retrun item.className
  }
}

組件內容

<template>
  <view>{{ wxs.getClassName(item) }}</view>
</template>

import wxs from './wxs/wxs.wxs'

export default class demo extends Wepy.component {
  data = {}
  wxs = {
   wxs : wxs
  }
}

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

最後附上官方文檔連接，供你們參考：
小程序官方文檔
wepy官方文檔