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


Posted in Javascript onDecember 19, 2019

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

在实际工作中有很多场景需要在第二个页面中将用户操作之后的将数据回传到上一页面。接下来将我的方案分享给小伙伴。 本次示例采用 uni-app 框架和 weui 样式库 实现思路 创建一个 Emitter,用于事件处理 创建一个 ...

在实际工作中有很多场景需要在第二个页面中将用户操作之后的将数据回传到上一页面。接下来将我的方案分享给小伙伴。

本次示例采用 uni-app 框架和 weui 样式库

实现思路

  • 创建一个 Emitter,用于事件处理
  • 创建一个全局的 Storage
  • 在第一个页面创建一个 emitter 对象,并添加事件监听,将 emitter 存储到 Storage 中
  • 在第二个页面从 Storage 中取出 emitter 对象, 并触发事件,将数据传递到第一个页面中做处理

创建 Emitter

function isFunc(fn) {
 return typeof fn === 'function';
}

export default class Emitter {
 constructor() {
 this._store = {};
 }

 /**
 * 事件监听
 * @param {String} event 事件名
 * @param {Function} listener 事件回调函数
 */
 on(event, listener) {
 const listeners = this._store[event] || (this._store[event] = []);

 listeners.push(listener);
 }

 /**
 * 取消事件监听
 * @param {String} event 事件名
 * @param {Function} listener 事件回调函数
 */
 off(event, listener) {
 const listeners = this._store[event] || (this._store[event] = []);

 listeners.splice(listeners.findIndex(item => item === listener), 1);
 }

 /**
 * 事件监听 仅监听一次
 * @param {String} event 事件名
 * @param {Function} listener 事件回调函数
 */
 once(event, listener) {
 const proxyListener = (data) => {
  isFunc(listener) && listener.call(null, data);

  this.off(event, proxyListener);
 }

 this.on(event, proxyListener);
 }

 /**
 * 触发事件
 * @param {String} 事件名
 * @param {Object} 传给事件回调函数的参数
 */
 emit(event, data) {
 const listeners = this._store[event] || (this._store[event] = []);

 for (const listener of listeners) {
  isFunc(listener) && listener.call(null, data);
 }
 }
}

创建 Storage

export class Storage {
 constructor() {
 this._store = {};
 }

 add(key, val) {
 this._store[key] = val;
 }
 
 get(key) {
 return this._store[key];
 }
 
 remove(key) {
 delete this._store[key];
 }
 
 clear() {
 this._store = {};
 }
}

export default new Storage();

第一个页面中的处理

<template>
 <div class="page">
 <div class="weui-cells__title">选择城市</div>
 <div class="weui-cells weui-cells_after-title">
  <navigator :url="`../select/select?id=${cityId}`" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
  <div class="weui-cell__hd weui-label">所在城市</div>
  <div class="weui-cell__bd" :style="{color: cityName || '#999'}">{{ cityName || '请选择' }}</div>
  <div class="weui-cell__ft weui-cell__ft_in-access"></div>
  </navigator>
 </div>
 </div>
</template>

<script>
import Emitter from '../../utils/emitter';
import storage from '../../utils/storage';

export default {
 data() {
 return {
  cityId: '',
  cityName: '',
 }
 },
 onLoad() {
 const emitter = new Emitter();

 // 将emitter存到storage中
 storage.add('indexEmitter', emitter);

 // 添加事件监听
 emitter.on('onSelect', this.handleSelect);
 },
 methods: {
 // 事件处理
 handleSelect(data) {
  this.cityId = data.id;
  this.cityName = data.text;
 }
 }
}
</script>

第二个页面中的处理

<template>
 <div class="page">
 <div class="weui-cells__title">城市列表</div>
 <div class="weui-cells weui-cells_after-title">
  <radio-group @change="handleChange">
  <label class="weui-cell weui-check__label" v-for="item in list" :key="item.id">
   <radio class="weui-check" :value="item.id" :checked="`${item.id}` === selectedId" />
   <div class="weui-cell__bd">{{ item.text }}</div>
   <div v-if="`${item.id}` === selectedId" class="weui-cell__ft weui-cell__ft_in-radio">
   <icon class="weui-icon-radio" type="success_no_circle" size="16" />
   </div>
  </label>
  </radio-group>
 </div>
 </div>
</template>

<script>
import storage from '../../utils/storage';

export default {
 data() {
 return {
  list: [
  { id: 0, text: '北京' },
  { id: 1, text: '上海' },
  { id: 2, text: '广州' },
  { id: 3, text: '深圳' },
  { id: 4, text: '杭州' },
  ],
  selectedId: ''
 }
 },
 onLoad({ id }) {
 this.selectedId = id;
 
 // 取出 emitter
 this.emitter = storage.get('indexEmitter');
 },
 methods: {
 handleChange(e) {
  this.selectedId = e.detail.value;

  const item = this.list.find(({ id }) => `${id}` === e.detail.value);

  // 触发事件并传递数据
  this.emitter.emit('onSelect', { ...item });
 }
 }
}
</script>

传送门

github

总结

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
Jan 27 Javascript
node.js中的fs.symlinkSync方法使用说明
Dec 15 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
May 25 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
Jun 06 Javascript
Bootstrap CSS布局之图像
Dec 17 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
Aug 16 Javascript
webpack3之loader全解析
Oct 26 Javascript
JavaScript设计模式之代理模式简单实例教程
Jul 03 Javascript
深入理解react-router 路由的实现原理
Sep 26 Javascript
详解CommonJS和ES6模块循环加载处理的区别
Dec 26 Javascript
angular组件间传值测试的方法详解
May 07 Javascript
JavaScript实现网页计算器功能
Oct 29 Javascript
js通过循环多张图片实现动画效果
Dec 19 #Javascript
JS实现水平移动与垂直移动动画
Dec 19 #Javascript
5分钟快速看懂ES6中的反射与代理
Dec 19 #Javascript
d3.js实现图形拖拽
Dec 19 #Javascript
d3.js实现图形缩放平移
Dec 19 #Javascript
微信小程序批量上传图片到七牛(推荐)
Dec 19 #Javascript
echarts实现折线图的拖拽效果
Dec 19 #Javascript
You might like
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
php压缩文件夹最新版
2018/07/18 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
JS 添加网页桌面快捷方式的代码详细整理
2012/12/27 Javascript
javascript标签在页面中的位置探讨
2013/04/11 Javascript
JS常用正则表达式总结
2013/11/12 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
2014/03/19 Javascript
js通过iframe加载外部网页的实现代码
2015/04/05 Javascript
js中DOM三级列表(代码分享)
2017/03/20 Javascript
Bootstrap table使用方法总结
2017/05/10 Javascript
使用JavaScript实现链表的数据结构的代码
2017/08/02 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
2018/01/08 Javascript
解决vue-router进行build无法正常显示路由页面的问题
2018/03/06 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
2018/04/27 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
2018/11/14 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
微信小程序遍历Echarts图表实现多个饼图
2019/04/25 Javascript
深入了解JavaScript 的 WebAssembly
2019/06/15 Javascript
Vue组件间的通信pubsub-js实现步骤解析
2020/03/11 Javascript
JS数组Reduce方法功能与用法实例详解
2020/04/29 Javascript
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
tensorflow建立一个简单的神经网络的方法
2018/02/10 Python
Python实现点云投影到平面显示
2020/01/18 Python
python连接mysql有哪些方法
2020/06/24 Python
Python 2.6.6升级到Python2.7.15的详细步骤
2020/12/14 Python
沃尔玛加拿大:Walmart.ca
2020/03/02 全球购物
中专毕业生的自我鉴定
2013/12/01 职场文书
后勤主管工作职责
2013/12/07 职场文书
亲子运动会的活动方案
2014/08/17 职场文书
2014应届本科生自我评价
2014/09/13 职场文书
学校班子个人对照检查材料思想汇报
2014/09/27 职场文书
公安领导班子四风问题个人整改措施思想汇报
2014/10/09 职场文书
倡议书怎么写?
2019/04/11 职场文书
vue首次渲染全过程
2021/04/21 Vue.js
解决numpy和torch数据类型转化的问题
2021/05/23 Python