摘要：微信小程序的一種框架簡述由于項目原因，我于兩個多月前轉到微信端用進行開發。事件發起組件的所有祖先組件會依次接收到事件。注意，如果用了自定義事件，則中對應的監聽函數不會再執行。

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

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

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

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

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

Template：

  Plus

JavaScript：

 goodsChange(data, status) {
      // doSomething
      }

注意 事件函數要寫在methods里

example：

watch = {
  someName(newValue, oldValue) {
    // doSomething
  }
}

someName為被監聽的某數據

newValue為新值，oldValue為舊值

someName一旦變化即觸發該函數

監聽函數需要寫在watch屬性里

組件有三種通信方法

$broadcast：由父組件發起，所有子組件都會收到此廣播事件，除非事件被手動取消。
如果Page_Index組件發起一個$broadcast事件，那么按先后順序采用廣度優先遍歷依次接收到該事件的組件為：
ComA、ComB、ComC、ComD、ComE、ComF、ComG、ComH

$emit：與$broadcast正好相反，事件是向上傳遞的。
事件發起組件的所有祖先組件會依次接收到$emit事件。
如下圖所示，如果組件ComE發起一個$emit事件，那么接收到事件的先后順序為：組件ComA、頁面Page_Index。

$invoke：是一個頁面或組件對另一個組件中的方法的直接調用。
通過傳入組件相對路徑找到相應的組件，然后再調用其方法。

比如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:

 
   
        this is a Concentric circle
   
 

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:

  
       this is a Concentric circle
  

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

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

In childNode

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

自定義方式輸出

兩種方式的區別

默認冒泡方式

in parentNode

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

in childNode

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

printf

自定義方式可以看上面詳細說明

printf

此處以動態傳值為例

父組件中

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

子組件中

   +

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

WePY 讓小程序支持組件化開發的框架

WePY 生命周期

基于微信小程序的在線商城

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