摘要：微信小程序的一種框架簡述由于項(xiàng)目原因，我于兩個多月前轉(zhuǎn)到微信端用進(jìn)行開發(fā)。事件發(fā)起組件的所有祖先組件會依次接收到事件。注意，如果用了自定義事件，則中對應(yīng)的監(jiān)聽函數(shù)不會再執(zhí)行。

由于項(xiàng)目原因，我于兩個多月前轉(zhuǎn)到微信端用wepy進(jìn)行開發(fā)。
wepy開發(fā)風(fēng)格接近于 Vue.js，支持組件 Props 傳值，自定義事件、組件分布式復(fù)用Mixin、Redux、計(jì)算屬性函數(shù)computed、模板內(nèi)容分發(fā)slot等等，支持ES6/7部分語法以及l(fā)ess/sass等樣式語言。

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

wepy的基本用法我就不再贅述，請自行看官方文檔。
值得一提的是初學(xué)者記得在微信開發(fā)者工具的項(xiàng)目設(shè)置中如下配置，否則很可能項(xiàng)目報錯無法運(yùn)行

1 onLaunch： 用戶打開小程序
2 onShow：初始化結(jié)束或用戶曾在后臺運(yùn)行小程序，現(xiàn)在又打開了小程序
3 onHide：用戶切換到其他應(yīng)用（小程序在后臺運(yùn)行）

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

Template：

  Plus

JavaScript：

 goodsChange(data, status) {
      // doSomething
      }

注意 事件函數(shù)要寫在methods里

example：

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

someName為被監(jiān)聽的某數(shù)據(jù)

newValue為新值，oldValue為舊值

someName一旦變化即觸發(fā)該函數(shù)

監(jiān)聽函數(shù)需要寫在watch屬性里

組件有三種通信方法

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

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

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

比如Page_Index組件中想要調(diào)用ComA組件中的一個名為someMethod方法的事件

this.$invoke("ComA", "someMethodInComA", "someArguments");

再比如再組件ComA中調(diào)用組件ComG的某個方法

this.$invoke("./../ComB/ComG", "someMethodInComG", "someArguments")

注意路徑為相對路徑

組件有兩種通信方式

默認(rèn)通信方式

exapmle using $emit：

super

// events對象中所聲明的函數(shù)為用于監(jiān)聽組件之間的通信與交互事件的事件處理函數(shù)
events = {
"some-event": (p1, p2, p3, p4,  $event) => {
 console.log($event) // 打出觸發(fā)some-event的事件對象
 console.log(p1, p2, p3, p4)
  }
};

sub

methods = {
    selectType(data) { // 子組件中的某點(diǎn)擊事件
    this.$emit("some-event", 1, 2, 3, 4) // 向父組件的some-event監(jiān)聽事件發(fā)送參數(shù)
  }
};

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

example:

@customEvent.user="myFn"

@表示時間修飾符

customEvent表示事件名稱

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

@tap.default: 綁定小程序冒泡型事件，.default后綴可省略不寫
可以理解為普通的原生冒泡機(jī)制
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的阻止冒泡機(jī)制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函數(shù)末尾添加了以下代碼

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

@eventName.user:綁定用戶自定義組件事件，通過$emit觸發(fā)。
注意，如果用了自定義事件，則events中對應(yīng)的監(jiān)聽函數(shù)不會再執(zhí)行。
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) 
       // 會調(diào)用父組件中的組件的@change屬性所指的事件函數(shù)
       // 而非調(diào)用父組件events里面的監(jiān)聽事件
 }
}

自定義方式輸出

兩種方式的區(qū)別

默認(rèn)冒泡方式

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

自定義方式可以看上面詳細(xì)說明

printf

此處以動態(tài)傳值為例

父組件中

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

子組件中

   +

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

WePY 讓小程序支持組件化開發(fā)的框架

WePY 生命周期

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

本文章內(nèi)容有任何問題請留言提問，若有錯誤歡迎糾正
本人郵箱 [email protected]