微信小程序跨页面数据传递事件响应实现过程解析

2023-08-04 06:56:04 305

这篇文章主要介绍了微信小程序跨页面数据传递事件响应实现过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

在实际工作中有很多场景需要在第二个页面中将用户操作之后的将数据回传到上一页面。接下来将我的方案分享给小伙伴。本次示例采用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();

第一个页面中的处理

第二个页面中的处理

传送门

github

总结

之所以将Storage定义成全局的，是为了保证第一个页面放到Storage中和第二个页面从Storage中取出的emitter是同一个实例，如此第一个页面才能正确监听到第二个页面触发的事件。也可以使用vuex，将emitter放到state中。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

微信小程序跨页面数据传递事件响应实现过程解析

热门推荐

随机推荐