微信小程序神秘操作揭秘！跨页处理技巧大揭秘

小伙伴们，听好了，今天我要跟你聊聊微信小程序里那个让人好奇的事儿，就是它如何处理跨页操作和信息发送。是不是觉得非常炫酷？快来一起探索！

首先，咱们得搞清楚一件事，那就是工作中经常会碰到这种情况：需要把在第二个页面上选好的东西回到前一个页面上去。这可不是闹着玩的！那怎么办？别急，我给你支个招。

我们是用 uni-app 和 weui 来搞这个的！简单来说就是，我们弄了个 Emitter（发射器）来管事儿，还搭了个 Storage（存储器）存东西。这样子的话，第一页就能知道第二页触发生了啥事。

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);
 }
 }
}

这问题还有后头！那在第二页咋整？别急，我教你哈。咱们可以用“传送门”（传送门）的方法，把数据送回第一页去。这样，数据就能畅通无阻~

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

亲们，你们觉不觉得这问题挺关键的？在日常生活或工作中有木有遇到过这样的情况？我猜大家肯定都有这需求！所以，我给出的答案一定能让大伙儿产生共鸣~

聊起这事儿，我得再说句重要的。咱得保证第一页能接收到第二页发出的信号，所以就把那个存储量搞成全局的。这下好了，第一页存进去和第二页取出来的发射器是一模一样的。当然，要是你喜欢用vuex那就直接放状态里去。

 

 
选择城市
 

  
  
所在城市
  
{{ cityName || '请选择' }}
  

  
 
 


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;
 }
 }
}

终于没事！相信我这主意对各位小伙伴们的学习生活帮助不小。希望大家多多支持！

哈喽！伙伴们，今天的分享可让你们知道了微信小程序怎么搞跨页数据传递事件反应！希望这篇文章有帮助，也能吸引你们多关注这个话题。小伙伴们，今天的分享就这样。别忘了来评论区聊聊，点赞分享给朋友！感谢大家的支持！

 

 
城市列表
 

  
  
   
   
{{ item.text }}
   

   
   
  
  
 
 


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 });
 }
 }
}