├── README.md
└── holdnoListener
├── README.md
└── holdnoEventListener.js
/README.md:
--------------------------------------------------------------------------------
1 | 
2 | 记录一些微信小程序开发过程中的小插件与填坑方法
3 | ===================
4 |
5 |
6 | >**小插件:**
7 | > - holdnoListener 微信小程序事件订阅及广播 [Click](https://github.com/holdnoWby/WeChatTip/tree/master/holdnoListener)
8 |
--------------------------------------------------------------------------------
/holdnoListener/README.md:
--------------------------------------------------------------------------------
1 | 
2 | holdnoListener 微信小程序事件订阅及广播
3 | ===================
4 | 解决小程序跨页面传参问题
5 | 事件订阅及广播
6 |
7 | 使用方法：
8 | 在app.js中引入并注册
9 | ``` javascript
10 | var _store = require('utils/holdnoEventListener.js')
11 | App({
12 | store: _store
13 | })
14 |
15 | ```
16 |
17 | 工作流程：订阅-发布-注销
18 | 以我的小程序为例，有一个城市选择的页面，首页需要根据这个城市来获取相关数据
19 | 首先在首页index.js的onLoad方法中订阅事件'cityChange'
20 |
21 | ``` javascript
22 | // 事件订阅 订阅城市变更事件
23 | app.store.on('cityChange', () => {
24 | that.onUnload()
25 | that.onLoad()
26 | })
27 | ```
28 |
29 | on方法的第二个参数也可以传入当前页面的某个方法实例
30 |
31 | ``` javascript
32 | // 事件订阅 订阅城市变更事件
33 | app.store.on('cityChange', this.cityChange)
34 | ```
35 |
36 | 然后在城市选择页面变更城市的方法中发布一个事件广播
37 |
38 | ``` javascript
39 | // 事件广播 通知订阅者城市被变更
40 | app.store.emit('cityChange',{})
41 | ```
42 |
43 | 由于我的业务场景城市这个变量是全局需要的，所以这个变量维护在app.js中的golobalData参数中
44 | 所以这里不需要传入内容，大家可以根据自己的实际业务场景进行修改
45 | 这个时候我们在首页订阅的事件就会被通知(调用回调函数执行自己的业务逻辑)
46 |
47 |
48 | 一个跨页面的参数传递流程就走完了
49 |
50 | 但是要注意在订阅事件页面的onUnload方法中注销订阅，避免造成事件订阅状态的冲突(没有注销的话新同名事件不会被添加)
51 |
52 | ``` javascript
53 | // 事件注销 卸载页面的时候同时将订阅的事件注销掉
54 | app.store.off('cityChange')
55 | ```
56 | 大功告成！
57 |
58 |
--------------------------------------------------------------------------------
/holdnoListener/holdnoEventListener.js:
--------------------------------------------------------------------------------
1 | /*****************************
2 | 一个简单的微信小程序事件订阅及广播方法
3 |
4 | 首先在页面的onLoad方法通过obj.on方法进行订阅
5 | 然后通过obj.emit进行事件广播
6 | 最后在页面的onUnload方法中通过obj.off方法注销事件
7 | *****************************/
8 |
9 | var eventListener = {
10 | // 是否开启试调模式
11 | debug: true,
12 | // 创建对象容器
13 | _store: [],
14 | // 发布者
15 | // event: 事件名称 data: 传递参数
16 | emit (event, data) {
17 | var store = this._store
18 | var eventLength = store.length
19 | for (var i = 0; i < eventLength; i++) {
20 | if(event == store[i].event){
21 | this._store[i].callback(data)
22 | break
23 | }
24 | if (i >= eventLength) {
25 | if (this.debug) console.error('Emit error: The event is not defined')
26 | }
27 | }
28 | },
29 | // 订阅者
30 | // event: 事件名称 method: function实例
31 | on (event, method) {
32 | var store = this._store
33 | var eventLength = store.length
34 | for (var i = 0; i < eventLength; i++) {
35 | if (event === store[i].event) {
36 | if (this.debug) console.error('Listener error: The event name is existed')
37 | return false
38 | }
39 | }
40 | if (event && method) {
41 | if (this.debug) console.log("Add new listener: " + event)
42 | var newListener = {
43 | event: event,
44 | callback: method
45 | }
46 | this._store.push(newListener)
47 | } else {
48 | if (this.debug) console.warn("The two argument must not be empty")
49 | }
50 | },
51 | // 取消订阅
52 | // event: 方法名称
53 | off (event) {
54 | var store = this._store
55 | var eventLength = store.length
56 | var offSuccess = 0
57 | for (var i = 0; i < eventLength; i++) {
58 | if(store[i] && event === store[i].event){
59 | store.splice(i, 1)
60 | offSuccess = 1
61 | }
62 | }
63 | if (this.debug) {
64 | if (offSuccess === 1) {
65 | console.log("Remove listener: " + event)
66 | } else {
67 | console.error("Remove listener error:" + event + ' is not defined')
68 | }
69 | }
70 | }
71 | }
72 |
73 | // 打包模块
74 | module.exports = eventListener
75 |
76 | // 在小程序中是用 var holdnoListener = require (holdnoEventListener.js) 引入
77 |
78 |
79 |
--------------------------------------------------------------------------------