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

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

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

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

(0)

相关推荐

  • 微信小程序返回上一页传参并刷新过程解析

    这篇文章主要介绍了微信小程序返回上一页传参并刷新过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 问题 微信小程序onLoad(options)方法在整个生命周期中只加载一次,也就是你进入下个页面,再返回时,是不会再次触发的,所以你返回是url传参是行不通了. 需求 现在有这么一个需求:一个商品支付页面,点击优惠卷进入优惠券列表页,选中优惠券后带着数据再返回到支付页面. 方法 一.使用到的方法是小程序的页面栈,感兴趣可以打印一下pages

  • 微信小程序使用navigateTo数据传递的实例

    微信小程序使用navigateTo数据传递的实例 1,传递基本数据类型 index.js 发送页JS Page({ data: { testStr: '字符串str' }, onLoad: function () { }, next: function(e){ wx.navigateTo({ url: '/pages/test/test?str='+this.data.testStr, }) } }) test.js 接受页JS Page({ data:{ }, onLoad:function(

  • 微信小程序 跳转传递数据的实例

    微信小程序 跳转传递数据的实例 点击view 跳转页面 <view class="album_image" data-album-obj="{{item}}" bindtap="imageclick"> <image style="width:98%;" src="{{item.data[0].url}}"></image> </view> 声明变量  dat

  • 微信小程序实现给嵌套template模板传递数据的方式总结

    本文实例总结了微信小程序实现给嵌套template模板传递数据的方式.分享给大家供大家参考,具体如下: 一.template模板调用的数据是单一形态时: indexTemplate模板: <import src="../lookAndCollect-template/lookAndCollect-template.wxml" /> <template name="indexTemplate"> <view class="use

  • 微信小程序 (地址选择1)--选取搜索地点并显示效果

    效果:(直接复制代码,可查看效果) 可以通过拖动地图,搜索地址,选择地址,并将地址值传给文本框 进入以下界面 点击确定后. 代码如下: wxml: <view class="box2"> <view class="box2_left">收货地址</view> <input type="text" class="box2_right" placeholder="请选择收货地址&

  • 微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题

    首先我们在pages文件夹下创建components目录用于存放自定义组件.如图所示,以我创建的dialog组件为例,自定义组件的格式与页面一样,分为4个文件. 图1 图2 如上图2所示,假如index页面有一个按钮触发点击事件后弹出dialog,并且当点击某个部门时,将dialog关闭,并将部门名称与红色标题同步. 一.首先把dialog组件的样式写好,并在index页面相应的位置引用.以下就是代码啦(分别为:wxml.wxss.js.json) <view class='wx_dialog_

  • 微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能

    实现的效果就是: 1.点击全选选中所有商品,再点击全选,取消勾选 2.在选中的同时获取需要的商品id,获取后是以字符串拼接的形式 拼成一个字符串 3.点击删除按钮时删除选中的商品 点击全选 再次点击全选框 wxml关键代码 重要代码 value="{{item.goods_id}}" -->checkbox被选中的值就是这个goods_id checked="{{item.checked}}" -->checked代表选中与否 ,ture选中,false

  • 微信小程序 页面跳转和数据传递实例详解

    微信小程序 页面跳转和数据传递 1.先导 在Android中,我们Activity和Fragment都有栈的概念在里面,微信小程序页面也有栈的概念在里面.微信小程序页面跳转有四种方式: 1.wx.navigateTo(OBJECT): 2.wx.redirectTo(OBJECT): 3.wx.switchTab(OBJECT): 4.wx.navigateBack(OBJECT) 5.使用实现对应的跳转功能: 分析: 其中navigateTo是将原来的页面保存在页面栈中,在跳入到下一个页面的时

  • 微信小程序 页面跳转及数据传递详解

    微信小程序 页面跳转及数据传递详解 类似 Android 的 Intent 传值,微信小程序也一样可以传值: 例如:wxml 中写了一个函数跳转: <view class="itemWeight" catchtap="jumpToOverMissionList"> <view class="textStatus">已完成任务</view> <view class="containVertical

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

    这篇文章主要介绍了微信小程序跨页面数据传递事件响应实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 在实际工作中有很多场景需要在第二个页面中将用户操作之后的将数据回传到上一页面.接下来将我的方案分享给小伙伴. 本次示例采用 uni-app 框架和 weui 样式库 实现思路 创建一个 Emitter,用于事件处理 创建一个 ... 在实际工作中有很多场景需要在第二个页面中将用户操作之后的将数据回传到上一页面.接下来将我的方案分享给小伙

  • 微信小程序跨页面传递data数据方法解析

    这篇文章主要介绍了微信小程序跨页面传递data数据方法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 Q:小程序怎么把页面data里的数据传到另外的页面? 或者小程序怎么吧表单里的数据传到另外的页面? A:1.可以使用url传递数据. 例如在A页面中传递数据,需要注意的是,wx.switchTab中的url不能传参数. wx.navigateTo({ url:'../pageB/pageB?name=raymond&gender=male'

  • 微信小程序全局变量的设置、使用、修改过程解析

    1. 全局变量的设置 在miniprogram > app.js 文件中设置,globalData对象就是存储全局变量的. App({ globalData: { hasLogin: false, openid: null }, onLaunch: function () { } }) 2.全局变量的使用 在app.js文件中,直接使用,如: this.globalData.hasLogin 在其他非app.js文件中使用,需要先申明app变量,如: var app = getApp() app

  • 微信小程序实现页面监听自定义组件的触发事件

    微信小程序实现页面监听自定义组件的触发事件,供大家参考,具体内容如下 需求:在微信小程序开发过程中,页面通常会用到提示弹框.这时为了减少代码量及代码可拓展性,我们自定义一个提示组件是必不可少的了.那么问题来了,页面如何监听到组件的触发事件呢? 下面给大家详细讲解页面如何监听自定义组件的触发事件. prompt组件: 1.首先搭建提示组件ui.由于后面各个页面都有可能用到该组件,所以我选择从页面传值过来显示提示语: 2.然后在prompt.js的点击事件里指定方法名称,该方法名称在后面的页面调用监

  • 微信小程序遇到修改数据后页面不渲染的问题解决

    微信小程序遇到修改数据后页面不渲染的问题解决 前言: 去年从小程序一开始出来到现在,我一直是比较看好和保持一定的关注度的,小程序的掀起的波浪我觉得一开始是在前端及其他技术开发人群中的,这是我第一次有意识的亲眼目睹了一个新技术的发展,还是感觉比较荣幸的. 唱衰小程序?我的观点是肯定不可能,因为现在每天提交审核的小程序还在继续增加,而且有些小程序确实很好用,比如摩拜的扫码骑车,还有我上周去KTV,直接用小程序扫屏幕上的二维码,就可以绑定房间,然后通过小程序点歌,切歌,发表情包等方便好玩的事情,所以,

  • 微信小程序实现页面跳转传值以及获取值的方法分析

    本文实例讲述了微信小程序实现页面跳转传值以及获取值的方法.分享给大家供大家参考,具体如下: 在安卓中页面跳转传值都是通过bundle,现在研究一下小程序的列表跳转及页面传值. my.wxml <view class="container"> <view bindtap="bindViewTap" class="userinfo"> <image class="userinfo-avatar" sr

  • 微信小程序之绑定点击事件实例详解

    微信小程序之绑定点击事件实例详解 微信小程序出来那么久了,趁着有时间自己研究一下,前阶段看一了一下,但是不允许个人注册,现在已经对个人开放了,所以爱好者们可以自己研究了. 首先,我们看一下如何添加底部的标签栏:在app.json里操作 { "pages":[ //在这里添加页面的路径 "pages/index/index", "pages/logs/logs", "pages/home/home" ], "windo

  • 微信小程序中子页面向父页面传值实例详解

    微信小程序中子页面向父页面传值实例详解 上面一张图是编辑款项页面,下面一张图是点击了编辑款项页面中选择好友的图标后打开的子页面.这个时候点选子页面的某个好友时,需要把好友的名字传递回编辑款项父页面. 采取的方法: 从页面路由栈中直接获取和操作目标Page对象,这种方式,是通过调用小程序的API: getCurrentPages(),来获取当前页面路由栈的信息,这个路由栈中按照页面的路由顺序存放着相应的Page对象,我们可以很容易的获取到上一级页面的完整Page对象,从而使直接调用Page对象的属

  • 微信小程序实现页面下拉刷新和上拉加载功能详解

    本文实例讲述了微信小程序实现页面下拉刷新和上拉加载功能.分享给大家供大家参考,具体如下: web手机端或App中经常会有下拉刷新,上拉加载这些功能. 微信小程序中如何实现下拉刷新,上拉加载的功能. 实现思路: 1.监听界面的下拉刷新事件和上拉加载事件 bindscrolltolower 监听上拉加载 bindscrolltoupper 监听下拉刷新 2.下拉刷新时清空数据列表,并重新请求数据进行界面展示. 3.上拉加载增量请求数据,增量增加数据列表,增量界面展示 效果图: 实现代码: Water

随机推荐