This article mainly introduces the analysis of the cross-page data transmission event response implementation process of WeChat applet. The example code is introduced in this article in detail, which has certain reference value for everyone's learning or work. Friends who need it can refer to it.
In actual work, there are many scenarios that require the user's operation to be returned to the previous page after it is operated in the second page. Next, I will share my plan with my friends. This example uses the uni-app framework and weui style library to implement the idea. Create an Emitter for event processing. Create a ...
In actual work, there are many scenarios that require the user's operation to be returned to the previous page after it is operated in the second page. Next, I will share my plan with my friends.
This example usesuni-appFramework andweuiStyle library
Implementation ideas
- Create an Emitter for event processing
- Create a global Storage
- Create an emitter object on the first page, add event listening, and store emitter in Storage
- Take the emitter object from Storage on the second page, and trigger an event to pass 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 event name
* @param {Function} listener event callback function
*/
on(event, listener) {
const listeners = this._store[event] || (this._store[event] = []);
(listener);
}
/**
* Cancel event monitoring
* @param {String} event event name
* @param {Function} listener event callback function
*/
off(event, listener) {
const listeners = this._store[event] || (this._store[event] = []);
((item => item === listener), 1);
}
/**
* Event listening only once
* @param {String} event event name
* @param {Function} listener event callback function
*/
once(event, listener) {
const proxyListener = (data) => {
isFunc(listener) && (null, data);
(event, proxyListener);
}
(event, proxyListener);
}
/**
* Trigger event
* @param {String} Event Name
* @param {Object} Parameters passed to event callback function
*/
emit(event, data) {
const listeners = this._store[event] || (this._store[event] = []);
for (const listener of listeners) {
isFunc(listener) && (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 class="page">
<div class="weui-cells__title">Choose a city</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">City</div>
<div class="weui-cell__bd" :style="{color: cityName || '#999'}">{{ cityName || 'Please select' }}</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();
// Save emitter into storage ('indexEmitter', emitter);
// Add event listening ('onSelect', );
},
methods: {
// Event handling handleSelect(data) {
= ;
= ;
}
}
}
</script>
Processing in the second page
<template>
<div class="page">
<div class="weui-cells__title">City List</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="">
<radio class="weui-check" :value="" :checked="`${}` === selectedId" />
<div class="weui-cell__bd">{{ }}</div>
<div v-if="`${}` === 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: 'Beijing' },
{ id: 1, text: 'Shanghai' },
{ id: 2, text: 'Guangzhou' },
{ id: 3, text: 'Shenzhen' },
{ id: 4, text: 'Hangzhou' },
],
selectedId: ''
}
},
onLoad({ id }) {
= id;
// Take out emitter = ('indexEmitter');
},
methods: {
handleChange(e) {
= ;
const item = (({ id }) => `${id}` === );
// Trigger event and pass data ('onSelect', { ...item });
}
}
}
</script>
Portal
github
Summarize
The reason why Storage is defined globally is to ensure that the first page is placed in Storage and the emitter taken out of Storage on the second page is the same instance, so that the first page can correctly listen to events triggered by the second page. Can also be usedvuex, put emitter in state.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.