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


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 相关文章推荐
JS 建立对象的方法
Apr 21 Javascript
JavaScript开发规范要求(规范化代码)
Aug 16 Javascript
js实现简单秒表走动的时钟特效
Mar 25 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
Aug 26 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
Jan 06 Javascript
javascript特殊日历控件分享
Mar 07 Javascript
用jQuery的AJax实现异步访问、异步加载
Nov 02 Javascript
Bootstrap3下拉菜单的实现
Feb 22 Javascript
angular十大常见问题
Mar 07 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
Jul 13 Javascript
详解webpack引入第三方库的方式以及注意事项
Jan 15 Javascript
vue中keep-alive,include的缓存问题
Nov 26 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 分页类(模仿google)-面试题目解答
2009/09/13 PHP
php curl常见错误:SSL错误、bool(false)
2011/12/28 PHP
使用php判断网页是否gzip压缩
2013/06/25 PHP
PHP内置加密函数详解
2016/11/20 PHP
使用PHP json_decode可能遇到的坑与解决方法
2017/08/03 PHP
javascript 浏览器检测代码精简版
2010/03/04 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
2013/11/18 Javascript
IE6浏览器中window.location.href无效的解决方法
2014/11/20 Javascript
JS实现控制表格行内容垂直对齐的方法
2015/03/30 Javascript
基于jquery实现人物头像跟随鼠标转动
2015/08/23 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
2016/06/01 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
微信小程序倒计时功能实现代码
2017/11/09 Javascript
nodejs实现解析xml字符串为对象的方法示例
2018/03/14 NodeJs
Vue结合Video.js播放m3u8视频流的方法示例
2018/05/04 Javascript
layui操作列按钮个数和文字颜色的判断实例
2019/09/11 Javascript
ES6 Promise对象概念及用法实例详解
2019/10/15 Javascript
Vuex模块化应用实践示例
2020/02/03 Javascript
js实现星星打分效果
2020/07/05 Javascript
[43:43]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第三场 11.29
2020/12/02 DOTA
Django2.1.3 中间件使用详解
2018/11/26 Python
Python增强赋值和共享引用注意事项小结
2019/05/28 Python
构建高效的python requests长连接池详解
2020/05/02 Python
Python如何截图保存的三种方法(小结)
2020/09/01 Python
Java Unsafe类实现原理及测试代码
2020/09/15 Python
python工具——Mimesis的简单使用教程
2021/01/16 Python
python爬虫利用代理池更换IP的方法步骤
2021/02/21 Python
10分钟理解CSS3 Grid布局
2018/12/20 HTML / CSS
次世代生活态度:Hypebeast
2018/07/05 全球购物
如何编写优秀的食品项目创业计划书
2014/01/23 职场文书
护士自我评价范文
2014/01/25 职场文书
联谊活动策划书
2014/01/26 职场文书
美术教师自我鉴定
2014/02/12 职场文书
数学教学随笔感言
2014/02/17 职场文书
2015年反腐倡廉工作总结
2015/05/14 职场文书
导游词之唐山景点
2019/12/18 职场文书