自制微信小程序通讯JS

keke 发布于2019-08-23 13:40 / 2001人阅读

摘要：自制微信小程序通讯起因现在微信小程序开发基本会使用到组件的开发。随着组件的不断增加，使得组件之间的通讯越发频繁。这个能使得我们在组件和页面之间随意通讯，您只需要按照规范注册，使用即可，可以帮你建立任意两个组件之间的通信通道。

自制微信小程序通讯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 微信小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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