自制微信小程序通訊JS

keke 發布于2019-08-23 13:40 / 2005人閱讀

摘要：自制微信小程序通訊起因現在微信小程序開發基本會使用到組件的開發。隨著組件的不斷增加，使得組件之間的通訊越發頻繁。這個能使得我們在組件和頁面之間隨意通訊，您只需要按照規范注冊，使用即可，可以幫你建立任意兩個組件之間的通信通道。

自制微信小程序通訊JS 起因

現在微信小程序開發基本會使用到組件的開發。隨著組件的不斷增加，使得組件之間的通訊越發頻繁。然后，微信小程序中組件之前通訊必須通過父子關系才能進行。
這個js能使得我們在組件和頁面之間隨意通訊，您只需要按照規范注冊，使用即可，可以幫你建立任意兩個組件之間的通信通道。

項目

github 地址：　https://github.com/szpoppy/wx...

npm : https://www.npmjs.com/package...

喜歡的朋友不要吝嗇你的　star ,　在此先感謝了

功能

Component 之間通訊

Page之間通訊

Component和Page之間的通訊

一對一通訊

一對多通訊（廣播機制）

使用

由于微信小程序默認不支持npm包管理機制，你從 github下載zip包，提取unicom.js后，直接放入微信小程序源碼目錄（代碼沒有使用ES6語法，放心使用）

全局注冊機制（將會重寫Page和Component）

// 引入包
var unicom = require("unicom");
// 下面這個函數將重寫 Page 和 Component
// 注：全局機制注冊后，所有局部注冊將失效
unicom.rewrite();

局部注冊

// Page中注冊
var unicom = require("unicom");
// Page中通過onLoad時，初始化unicom
Page({
    onLoad: function(){
        // 注冊 this 到unicom
        // id 可選， 優先這里傳入的ID
        unicom.pageInit(this, "id");
    }
})

// Component中使用behaviors來注冊
Component({
    behaviors: [unicom.behavior]
})

關于設置頁面id

// 頁面中 Page
Page({
    unicomId: "id"
})
// 或者 局部注冊中
// 注：如果使用 全局注冊，局部注冊將失效，只能通過上面方法來注冊
Page({
    onLoad: function(){
        unicom.pageInit(this, "id");
    }
})

如果同時使用了兩種方式注冊，如果局部注冊生效，優先局部注冊，否組會使用第一種

關于設置組件id

關于設置通訊方法

// Page和Component 通用
Page|Component({
    unicom: {
        // 定義消息方法
        // arg1， arg2 是調用時傳入
        message: function(arg1, arg2) {
            // 當前頁面 unicom相關參數 請不要隨意修改
            this.unicom
            // 生成的唯一id
            this.unicom.id
            // 傳入的唯一id
            this.unicom.cusId
            // 調用我的最后發送者
            this.unicom.sender
            // 發送消息
            this.unicom.send
        }
    }
})

發送消息

// Page和Component 通用
Page|Component({
    methods: {
        method1: function() {
            // 發送了message消息后，所有定義message消息的unicom都可以收到消息
            this.unicom.send("message", "arg1", "arg2")
        },
        method1: function() {
            // 將message消息發送給 id1，id2這兩個有自定義id的組件或者頁面
            this.unicom.send("message#id1,id2", "arg1", "arg2")
        }
    }
})

// 方法二 引入 unicom
var unicom = require("unicom");
// 發送了message消息后，所有定義message消息的unicom都可以收到消息
unicom.send("message", "arg1", "arg2")
// 將message消息發送給 id1，id2這兩個有自定義id的組件或者頁面
unicom.send("message#id1,id2", "arg1", "arg2")

unicom 中的屬性

unicom.send("事件名稱[#id1,id2]", ...參數) 觸發事件,如果設置了目標id，則只發送到目標id中對應的方法。

unicom.behavior Component中，使用behaviors來局部注冊

unicom.pageInit(this[, id]) Page中局部注冊函數

unicom.rewrite() app.js中全局注冊unicom的注冊函數

如果上述有興趣，還可以加QQ群討論： 953844490

GPU云服務器云服務器微信小程序答題js 微信小程序獲取js值微信小程序支持的js 微信小程序

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99341.html

微信小程序自制手勢庫

摘要：微信小程序手勢事件庫由于微信小程序只能夠支持時間，對于比較復雜的事件只能自己實現因此自己對庫進行了改造，開發了時候微信小程序手勢事件庫使用進行編寫手勢庫支持以下事件倉庫地址點我點我使用由于和微信小程序強綁定，因此需要在元素上面綁定好所有的事 WxTouchEvent 微信小程序手勢事件庫由于微信小程序只能夠支持 tap,longtap,touchstart,touchmove,tou...

cucumber 2019-08-20 16:11 評論0 收藏0
自制，簡易仿京東微信小程序demo

摘要：學習微信小程序一段時間，自己仿照京東小程序做了幾個頁面，分享給大家看看源碼地址，希望能幫助到有興趣的同學喜歡可以加星哦其中幾個效果圖如下介紹一下事先準備的事情前期部署項目命名規范用駝峰法命名中命名用分隔，用接口中數據用分隔文件文件夾命名學習微信小程序一段時間，自己仿照京東小程序做了幾個demo頁面，分享給大家看看源碼地址，希望能幫助到有興趣的同學https://github.com...

sourcenode 2019-08-22 11:05 評論0 收藏0
自制，簡易仿京東微信小程序demo

摘要：學習微信小程序一段時間，自己仿照京東小程序做了幾個頁面，分享給大家看看源碼地址，希望能幫助到有興趣的同學喜歡可以加星哦其中幾個效果圖如下介紹一下事先準備的事情前期部署項目命名規范用駝峰法命名中命名用分隔，用接口中數據用分隔文件文件夾命名學習微信小程序一段時間，自己仿照京東小程序做了幾個demo頁面，分享給大家看看源碼地址，希望能幫助到有興趣的同學https://github.com...

shiweifu 2019-08-01 17:36 評論0 收藏0