資訊專欄INFORMATION COLUMN
摘要：自制微信小程序通訊起因現(xiàn)在微信小程序開發(fā)基本會(huì)使用到組件的開發(fā)。隨著組件的不斷增加，使得組件之間的通訊越發(fā)頻繁。這個(gè)能使得我們?cè)诮M件和頁面之間隨意通訊，您只需要按照規(guī)范注冊(cè)，使用即可，可以幫你建立任意兩個(gè)組件之間的通信通道。
自制微信小程序通訊JS 起因
現(xiàn)在微信小程序開發(fā)基本會(huì)使用到組件的開發(fā)。隨著組件的不斷增加，使得組件之間的通訊越發(fā)頻繁。然后，微信小程序中組件之前通訊必須通過父子關(guān)系才能進(jìn)行。項(xiàng)目
這個(gè)js能使得我們?cè)诮M件和頁面之間隨意通訊，您只需要按照規(guī)范注冊(cè)，使用即可，可以幫你建立任意兩個(gè)組件之間的通信通道。
github 地址： https://github.com/szpoppy/wx...
npm : https://www.npmjs.com/package...
喜歡的朋友不要吝嗇你的 star , 在此先感謝了功能
Component 之間通訊
Page之間通訊
Component和Page之間的通訊
一對(duì)一通訊
一對(duì)多通訊（廣播機(jī)制）
使用由于微信小程序默認(rèn)不支持npm包管理機(jī)制，你從 github下載zip包，提取unicom.js后，直接放入微信小程序源碼目錄（代碼沒有使用ES6語法，放心使用）
全局注冊(cè)機(jī)制（將會(huì)重寫Page和Component）// 引入包
var unicom = require("unicom");
// 下面這個(gè)函數(shù)將重寫 Page 和 Component
// 注：全局機(jī)制注冊(cè)后，所有局部注冊(cè)將失效
unicom.rewrite();
局部注冊(cè)
// Page中注冊(cè)
var unicom = require("unicom");
// Page中通過onLoad時(shí)，初始化unicom
Page({
onLoad: function(){
// 注冊(cè) this 到unicom
// id 可選， 優(yōu)先這里傳入的ID
unicom.pageInit(this, "id");
}
})
// Component中使用behaviors來注冊(cè)
Component({
behaviors: [unicom.behavior]
})
關(guān)于設(shè)置頁面id
// 頁面中 Page
Page({
unicomId: "id"
})
// 或者 局部注冊(cè)中
// 注：如果使用 全局注冊(cè)，局部注冊(cè)將失效，只能通過上面方法來注冊(cè)
Page({
onLoad: function(){
unicom.pageInit(this, "id");
}
})
如果同時(shí)使用了兩種方式注冊(cè)，如果局部注冊(cè)生效，優(yōu)先局部注冊(cè)，否組會(huì)使用第一種關(guān)于設(shè)置組件id
關(guān)于設(shè)置通訊方法
// Page和Component 通用
Page|Component({
unicom: {
// 定義消息方法
// arg1， arg2 是調(diào)用時(shí)傳入
message: function(arg1, arg2) {
// 當(dāng)前頁面 unicom相關(guān)參數(shù) 請(qǐng)不要隨意修改
this.unicom
// 生成的唯一id
this.unicom.id
// 傳入的唯一id
this.unicom.cusId
// 調(diào)用我的最后發(fā)送者
this.unicom.sender
// 發(fā)送消息
this.unicom.send
}
}
})
發(fā)送消息
// Page和Component 通用
Page|Component({
methods: {
method1: function() {
// 發(fā)送了message消息后，所有定義message消息的unicom都可以收到消息
this.unicom.send("message", "arg1", "arg2")
},
method1: function() {
// 將message消息發(fā)送給 id1，id2這兩個(gè)有自定義id的組件或者頁面
this.unicom.send("message#id1,id2", "arg1", "arg2")
}
}
})
// 方法二 引入 unicom
var unicom = require("unicom");
// 發(fā)送了message消息后，所有定義message消息的unicom都可以收到消息
unicom.send("message", "arg1", "arg2")
// 將message消息發(fā)送給 id1，id2這兩個(gè)有自定義id的組件或者頁面
unicom.send("message#id1,id2", "arg1", "arg2")
unicom 中的屬性
unicom.send("事件名稱[#id1,id2]", ...參數(shù)) 觸發(fā)事件,如果設(shè)置了目標(biāo)id，則只發(fā)送到目標(biāo)id中對(duì)應(yīng)的方法。
unicom.behavior Component中，使用behaviors來局部注冊(cè)
unicom.pageInit(this[, id]) Page中局部注冊(cè)函數(shù)
unicom.rewrite() app.js中全局注冊(cè)u(píng)nicom的注冊(cè)函數(shù)
如果上述有興趣，還可以加QQ群討論： 953844490
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99341.html
摘要：微信小程序手勢事件庫由于微信小程序只能夠支持時(shí)間，對(duì)于比較復(fù)雜的事件只能自己實(shí)現(xiàn)因此自己對(duì)庫進(jìn)行了改造，開發(fā)了時(shí)候微信小程序手勢事件庫使用進(jìn)行編寫手勢庫支持以下事件倉庫地址點(diǎn)我點(diǎn)我使用由于和微信小程序強(qiáng)綁定，因此需要在元素上面綁定好所有的事 WxTouchEvent 微信小程序手勢事件庫 由于微信小程序只能夠支持 tap,longtap,touchstart,touchmove,tou...
摘要：學(xué)習(xí)微信小程序一段時(shí)間，自己仿照京東小程序做了幾個(gè)頁面，分享給大家看看源碼地址，希望能幫助到有興趣的同學(xué)喜歡可以加星哦其中幾個(gè)效果圖如下介紹一下事先準(zhǔn)備的事情前期部署項(xiàng)目命名規(guī)范用駝峰法命名中命名用分隔，用接口中數(shù)據(jù)用分隔文件文件夾命名 學(xué)習(xí)微信小程序一段時(shí)間，自己仿照京東小程序做了幾個(gè)demo頁面，分享給大家看看 源碼地址，希望能幫助到有興趣的同學(xué)https://github.com...
摘要：學(xué)習(xí)微信小程序一段時(shí)間，自己仿照京東小程序做了幾個(gè)頁面，分享給大家看看源碼地址，希望能幫助到有興趣的同學(xué)喜歡可以加星哦其中幾個(gè)效果圖如下介紹一下事先準(zhǔn)備的事情前期部署項(xiàng)目命名規(guī)范用駝峰法命名中命名用分隔，用接口中數(shù)據(jù)用分隔文件文件夾命名 學(xué)習(xí)微信小程序一段時(shí)間，自己仿照京東小程序做了幾個(gè)demo頁面，分享給大家看看 源碼地址，希望能幫助到有興趣的同學(xué)https://github.com...
閱讀 3255·2021-11-11 16:55
閱讀 2567·2021-10-13 09:39
閱讀 2467·2021-09-13 10:27
閱讀 2181·2019-08-30 15:55
閱讀 3106·2019-08-30 15:54
閱讀 3154·2019-08-29 16:34
閱讀 1848·2019-08-29 12:41
閱讀 1087·2019-08-29 11:33
