微信小程序跨页面数据传递事件响应实现过程解析
这篇文章主要介绍了微信小程序跨页面数据传递事件响应实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
在实际工作中有很多场景需要在第二个页面中将用户操作之后的将数据回传到上一页面。接下来将我的方案分享给小伙伴。本次示例采用uni-app框架和weui样式库实现思路创建一个Emitter,用于事件处理创建一个...
在实际工作中有很多场景需要在第二个页面中将用户操作之后的将数据回传到上一页面。接下来将我的方案分享给小伙伴。
本次示例采用uni-app框架和weui样式库
实现思路
- 创建一个Emitter,用于事件处理
- 创建一个全局的Storage
- 在第一个页面创建一个emitter对象,并添加事件监听,将emitter存储到Storage中
- 在第二个页面从Storage中取出emitter对象,并触发事件,将数据传递到第一个页面中做处理
创建Emitter
functionisFunc(fn){ returntypeoffn==='function'; } exportdefaultclassEmitter{ constructor(){ this._store={}; } /** *事件监听 *@param{String}event事件名 *@param{Function}listener事件回调函数 */ on(event,listener){ constlisteners=this._store[event]||(this._store[event]=[]); listeners.push(listener); } /** *取消事件监听 *@param{String}event事件名 *@param{Function}listener事件回调函数 */ off(event,listener){ constlisteners=this._store[event]||(this._store[event]=[]); listeners.splice(listeners.findIndex(item=>item===listener),1); } /** *事件监听仅监听一次 *@param{String}event事件名 *@param{Function}listener事件回调函数 */ once(event,listener){ constproxyListener=(data)=>{ isFunc(listener)&&listener.call(null,data); this.off(event,proxyListener); } this.on(event,proxyListener); } /** *触发事件 *@param{String}事件名 *@param{Object}传给事件回调函数的参数 */ emit(event,data){ constlisteners=this._store[event]||(this._store[event]=[]); for(constlisteneroflisteners){ isFunc(listener)&&listener.call(null,data); } } }
创建Storage
exportclassStorage{ constructor(){ this._store={}; } add(key,val){ this._store[key]=val; } get(key){ returnthis._store[key]; } remove(key){ deletethis._store[key]; } clear(){ this._store={}; } } exportdefaultnewStorage();
第一个页面中的处理
选择城市