微信小程序wepy框架詳解（一）

時間 2019-11-10

標籤微信程序 wepy 框架詳解简体版

原文原文鏈接

wepy——微信小程序的一種框架

簡述

因爲項目緣由，我於兩個多月前轉到微信端用wepy進行開發。
wepy開發風格接近於 Vue.js，支持組件 Props 傳值，自定義事件、組件分佈式複用Mixin、Redux、計算屬性函數computed、模板內容分發slot等等，支持ES6/7部分語法以及less/sass等樣式語言。javascript

wepy官方文檔地址：wepy官方文檔java

wepy的基本用法我就再也不贅述，請自行看官方文檔。
值得一提的是初學者記得在微信開發者工具的項目設置中以下配置，不然極可能項目報錯沒法運行git

1、生命週期

應用的生命週期

屬性	描述	如何觸發
onLaunch	監聽小程序初始化	當小程序初始化完成後觸發，可理解爲清空後臺運行程序後打開小程序時觸發
onShow	監聽小程序顯示	當小程序初始化後，或從後臺切換到前臺後觸發（後臺切換到前臺後面會詳細說明）
onHide	監聽小程序隱藏	當小程序從前臺切換到後臺時（前臺切換到後臺後面會詳細說明）

正常觸發順序

1 onLaunch：用戶打開小程序
2 onShow：初始化結束或用戶曾在後臺運行小程序，如今又打開了小程序
3 onHide：用戶切換到其餘應用（小程序在後臺運行）github

頁面的生命週期

屬性	描述	如何觸發
onLoad	監聽頁面加載	當某頁面首次加載時觸發，每一個頁面只觸發一次
onReady	監聽頁面初次渲染完成	當頁面加載並渲染完成後觸發，每一個頁面觸發一次
onShow	監聽頁面顯示	通常在onLoad執行後執行，能夠執行屢次，當前頁面一旦顯示便會執行
onHide	監聽頁面隱藏	當小程序變爲後臺運行或跳轉到其餘頁面時觸發
onUnload	監聽頁面卸載	當小程序從前臺切換到後臺時（前臺切換到後臺後面會詳細說明）

正常觸發順序

1 onLoad：用戶初次打開某頁面，每一個頁面只觸發一次
2 onShow：頁面一旦顯示即觸發，包括用戶來回切換頁面
3 onReady：頁面初次渲染完成，每一個頁面只觸發一次
4 onHide：小程序被切換到後臺運行或者用戶切換到其餘頁面
5 onUnload：當使用重定向方法wx.redirectTo(OBJECT)或關閉當前頁返回上一頁wx.navigateBack()，觸發onUnload。小程序

2、事件傳值

Template：微信小程序

<text alt="添加" class="plus-icon" id="plus" @tap="goodsChange({{ item }}, {{'add'}})" >Plus</text>

JavaScript：sass

goodsChange(data, status) {
      // doSomething
      }

注意事件函數要寫在methods裏

3、Watcher監聽器

example：微信
```
watch = {
  someName(newValue, oldValue) {
    // doSomething
  }
}
```
- someName爲被監聽的某數據
- newValue爲新值，oldValue爲舊值
- someName一旦變化即觸發該函數
- 監聽函數須要寫在watch屬性裏

4、組件通訊方法

組件有三種通訊方法微信開發
- $broadcast：由父組件發起，全部子組件都會收到此廣播事件，除非事件被手動取消。
  若是Page_Index組件發起一個$broadcast事件，那麼按前後順序採用廣度優先遍歷依次接收到該事件的組件爲：
  ComA、ComB、ComC、ComD、ComE、ComF、ComG、ComH
- $emit：與$broadcast正好相反，事件是向上傳遞的。
  事件發起組件的全部祖先組件會依次接收到$emit事件。
  以下圖所示，若是組件ComE發起一個$emit事件，那麼接收到事件的前後順序爲：組件ComA、頁面Page_Index。
- $invoke：是一個頁面或組件對另外一個組件中的方法的直接調用。
  經過傳入組件相對路徑找到相應的組件，而後再調用其方法。app
- - 好比Page_Index組件中想要調用ComA組件中的一個名爲someMethod方法的事件
```
this.$invoke('ComA', 'someMethodInComA', 'someArguments');
```
  - 再好比再組件ComA中調用組件ComG的某個方法
```
this.$invoke('./../ComB/ComG', 'someMethodInComG', 'someArguments')
```

組件有兩種通訊方式

默認通訊方式

exapmle using $emit：

super

// events對象中所聲明的函數爲用於監聽組件之間的通訊與交互事件的事件處理函數
events = {
'some-event': (p1, p2, p3, p4,  $event) => {
 console.log($event) // 打出觸發some-event的事件對象
 console.log(p1, p2, p3, p4)
  }
};

sub

methods = {
    selectType(data) { // 子組件中的某點擊事件
    this.$emit('some-event', 1, 2, 3, 4) // 向父組件的some-event監聽事件發送參數
  }
};

自定義通訊方式（1.48版本新增方式，注意兼容問題）

example:

@customEvent.user="myFn"

@表示時間修飾符
customEvent表示事件名稱

.user表示事件後綴，共有三種

@tap.default: 綁定小程序冒泡型事件，.default後綴可省略不寫
能夠理解爲普通的原生冒泡機制
example:

<view @tap.default="wrapperView">
 <view @tap.default="middleView">
   <view @tap.default="centerView">
        this is a Concentric circle
   </view>
 </view>
</view>

methods = {
 centerView(data) {
   console.log('center-view has benn taped')
 },
 middleView() {
   console.log('middle-view has been taped')
 },
 wrapperView() {
   console.log('wrapper-view has been taped')
 }
  };

輸出是這樣的

@tap.stop:綁定小程序捕獲型事件
能夠理解爲原生js的阻止冒泡機制e.stopPropagation()/e.cancelBubble = true
example:

<view @tap.default="wrapperView">
<view @tap.stop="middleView">
  <view @tap.default="centerView">
       this is a Concentric circle
  </view>
</view>
</view>

methods = {
 centerView(data) {
   console.log('center-view has benn taped')
 },
 middleView() {
   console.log('middle-view has been taped')
 },
 wrapperView() {
   console.log('wrapper-view has been taped')
 }
  };

輸出是這樣的

能夠理解爲tap.stop是在tap.default函數末尾添加了如下代碼

e.stopPropagation() // w3c規定的阻止冒泡機制
e.cancelBubble = true // ie的阻止冒泡機制

@eventName.user:綁定用戶自定義組件事件，經過$emit觸發。
注意，若是用了自定義事件，則events中對應的監聽函數不會再執行。
example:

In parentNode

<!--分類側邊欄-->
 <SideTab @change.user="selectTypeInParentNode" />

methods = {
   selectTypeInParentNode(data) {
   console.log('in methods')
   console.log(data)
  // do something
 }
}
events = {
  'change': (data) => {
   console.log('in events')
   console.log(data)
 }
}

In childNode

<view @tap="selectTypeInChildNode({{ item }})"></view>

methods = {
   selectTypeInChildNode(data) {
       this.$emit('change', data) 
       // 會調用父組件中的<SideTab />組件的@change屬性所指的事件函數
       // 而非調用父組件events裏面的監聽事件
 }
}

自定義方式輸出

兩種方式的區別

默認冒泡方式

in parentNode

<Child />

events = {
    'change': (data) => {
    console.log('in events')
    console.log(data)
}
    }

in childNode

<view @tap="selectType({{ item }})"></view>

selectType(data) {
    console.log('center-view has benn taped')
    this.$emit('change', data)
  },

printf

自定義方式能夠看上面詳細說明
- printf

5、組件化和Props傳值

此處以動態傳值爲例

父組件中

<repeat for="{{tradeList}}" key="index" index="index" item="item">
      <GoodsItem :parentToChildData.sync="item" @parentToChildFunction.user="goodsSelectChange"></GoodsItem>
 </repeat>

methods = {
  async goodsSelectChange(data, status) { // 傳遞給子組件的函數
   // doSomething
  },

子組件中

<text alt="添加" class="plus-icon" id="plus" @tap="goodsChange({{ item }}, {{'add'}})" >+</text>

props = { // 接收父組件傳遞下來的數據
 parentToChildData: {}
};
methods = {
 goodsChange(data, status) {
   this.$emit('parentToChildFunction', data, status) // $emit爲向上傳值，具體可參考官方文檔的組件傳值
   // 給父組件的parentToChildFunction屬性的函數（goodsSelectChange）傳遞參數（data，status）
 }
};

本文參考

謝謝

本文章內容有任何問題請留言提問，如有錯誤歡迎糾正
本人郵箱 xbc18304999858@gmail.com

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。