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


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 相关文章推荐
node.js中的fs.lchown方法使用说明
Dec 16 Javascript
javascript实现表单提交后,提交按钮不可用的方法
Apr 18 Javascript
原生js和jquery实现图片轮播淡入淡出效果
Apr 23 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
Dec 31 Javascript
Node.js Streams文件读写操作详解
Jul 04 Javascript
input 标签实现输入框带提示文字效果(两种方法)
Oct 09 Javascript
AngularJs 禁止模板缓存的方法
Nov 28 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
Apr 28 Javascript
微信jssdk逻辑在vue中的运用详解
Nov 14 Javascript
基于Element封装一个表格组件tableList的使用方法
Jun 29 Javascript
小程序实现列表展开收起效果
Jul 29 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
Aug 14 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
星际争霸 Starcraft 发展史
2020/03/14 星际争霸
PHP数据库操作面向对象的优点
2006/10/09 PHP
php修改上传图片尺寸的方法
2015/04/14 PHP
基于CI框架的微信网页授权库示例
2016/11/25 PHP
基于PHP常用文件函数和目录函数整理
2017/08/17 PHP
JavaScript获取XML数据附示例截图
2014/03/05 Javascript
Node.js实现文件上传
2016/07/05 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
JS实现移动端判断上拉和下滑功能
2017/08/07 Javascript
基于Bootstrap实现城市三级联动
2017/11/23 Javascript
详解webpack-dev-server的简单使用
2018/04/02 Javascript
vue使用Font Awesome的方法步骤
2019/02/26 Javascript
小程序实现录音上传功能
2019/11/22 Javascript
OpenLayers3实现鼠标移动显示坐标
2020/09/25 Javascript
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
在CentOS6上安装Python2.7的解决方法
2018/01/09 Python
python查看模块,对象的函数方法
2018/10/16 Python
python 实现绘制整齐的表格
2019/11/18 Python
使用pyqt 实现重复打开多个相同界面
2019/12/13 Python
Python Handler处理器和自定义Opener原理详解
2020/03/05 Python
在python中利用pycharm自定义代码块教程(三步搞定)
2020/04/15 Python
Python稀疏矩阵及参数保存代码实现
2020/04/18 Python
Python如何实现大型数组运算(使用NumPy)
2020/07/24 Python
Python Matplotlib绘图基础知识代码解析
2020/08/31 Python
Tory Burch德国官网:美国时尚生活品牌
2018/01/03 全球购物
酒店公关部经理岗位职责
2013/11/24 职场文书
采购类个人求职的自我评价
2014/02/18 职场文书
母亲节感恩活动记录
2014/03/16 职场文书
村委会换届选举方案
2014/05/03 职场文书
创先争优公开承诺书
2014/08/30 职场文书
警察群众路线对照检查材料思想汇报
2014/10/01 职场文书
新郎答谢词
2015/01/04 职场文书
SpringBoot整合阿里云视频点播的过程详解
2021/12/06 Java/Android
你需要掌握的20个Python常用技巧
2022/02/28 Python
MySQL 表锁定 LOCK和UNLOCK TABLES的 SQL语法
2022/04/18 MySQL
Python 装饰器(decorator)常用的创建方式及解析
2022/04/24 Python