Analysis of event response implementation process of wechat applet cross page data transfer

Time:2021-4-17

This article mainly introduces the wechat applet cross page data transfer event response implementation process analysis, this article through the example code is very detailed, has certain reference learning value to everyone’s study or work, need friends can refer to

In practical work, there are many scenarios that need to return the data after user operation to the previous page in the second page. Next, I will share my plan with my friends. This example uses the idea of uni app framework and Web UI style library to create an emitter for event processing

In practical work, there are many scenarios that need to return the data after user operation to the previous page in the second page. Next, I will share my plan with my friends.

This example uses uni app framework and web style library

Realization idea

  • Create an emitter for event handling
  • Create a global storage system
  • Create an emitter object on the first page, add event listening, and store the emitter in storage
  • In the second page, take out the emitter object from the storage and trigger the event to transfer the data to the first page for processing

Create an emitter

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

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

 /**
 *Event monitoring
 *@ param {string} event name
 *@ param {function} listener event callback function
 */
 on(event, listener) {
 const listeners = this._store[event] || (this._store[event] = []);

 listeners.push(listener);
 }

 /**
 *Cancel event monitoring
 *@ param {string} event name
 *@ param {function} listener event callback function
 */
 off(event, listener) {
 const listeners = this._store[event] || (this._store[event] = []);

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

 /**
 *Event monitoring 仅监听一次
 *@ param {string} event name
 *@ param {function} listener event callback function
 */
 once(event, listener) {
 const proxyListener = (data) => {
  isFunc(listener) && listener.call(null, data);

  this.off(event, proxyListener);
 }

 this.on(event, proxyListener);
 }

 /**
 *Trigger event
 *@ param {string} event name
 *@ param {object} is the parameter passed to the event callback function
 */
 emit(event, data) {
 const listeners = this._store[event] || (this._store[event] = []);

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

Create 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();

Processing in the first page

<template>
 <div>
 < div > select city
 <div>
  <navigator :url="`../select/select?id=${cityId}`" hover-class="weui-cell_active">
  < div > City
  < div: style = {color: cityname ||| '#'} "> {{cityname |||'Please choose}} < / div >
  <div></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();

 //Save the emitter in the storage
 storage.add('indexEmitter', emitter);

 //Add event monitoring
 emitter.on('onSelect', this.handleSelect);
 },
 methods: {
 //Event handling
 handleSelect(data) {
  this.cityId = data.id;
  this.cityName = data.text;
 }
 }
}
</script>

Processing in the second page

<template>
 <div>
 < div > city list
 <div>
  <radio-group @change="handleChange">
  <label v-for="item in list" :key="item.id">
   <radio :value="item.id" :checked="`${item.id}` === selectedId" />
   <div>{{ item.text }}</div>
   <div v-if="`${item.id}` === selectedId">
   <icon 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: 'Beijing'},
  {ID: 1, text: 'Shanghai'},
  {ID: 2, text: 'Guangzhou'},
  {ID: 3, text: 'Shenzhen'},
  {ID: 4, text: 'Hangzhou'},
  ],
  selectedId: ''
 }
 },
 onLoad({ id }) {
 this.selectedId = id;
 
 //Take out the email
 this.emitter = storage.get('indexEmitter');
 },
 methods: {
 handleChange(e) {
  this.selectedId = e.detail.value;

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

  //Trigger events and pass data
  this.emitter.emit('onSelect', { ...item });
 }
 }
}
</script>

Portal

github

summary

The reason why storage is defined as global is to ensure that the first page placed in storage and the second page removed from storage are the same instance, so that the first page can correctly listen to the events triggered by the second page. You can also use vuex to put the emitter into the state.

The above is the whole content of this article, I hope to help you learn, and I hope you can support developer more.