uniapp开发小程序onShow中使用uni.$on监听未消亡Bug

大家好，我是学点！在一个键盘打碟鼠标卡点即吵闹又寂静无声的办公大厅，我听到来自领导的呼唤，进入领导办公室后领导说调用第三方接口与我们系统业务不匹配，第三方接口调用量严重超标，调用接口费用一直往上涨，心里咯噔一下！赶紧回到岗位上查看日志排查问题。

目前我正在为公司开发一款微信小程序。我是一名前后端全栈开发小哥，负责的模块前端和后端都是由我来码。

技术框架

• uniapp 作为主要的前端开发框架
• uView UI 框架

业务场景/设计逻辑

在A页面中需要跳到B页面进行业务操作，B页面操作完成后回到A页面，在B页面的操作结果须在A页面通过第三方接口进行处理（即：在A页面需要一张经过特殊处理的照片，A页面打开B页面（拍照功能），拍照完成后A页面将B页面拍照的照片请求接口得到处理后的照片）

方案代码

B页面使用uni.$emit(eventname, object)，其中 eventname 是事件名，object 为触发事件时携带的附加参数，uni.$emit 是 uni-app 中用于触发全局自定义事件的方法。

//拍照完成事件方法
takePhoto() {
  this.cropper.getImg((obj) => {
    uni.$emit("imgFile", {
      filePath: obj.url,
      fileType: 1
    })
    uni.navigateTo({
      url: aPageUrl
    });
  });
}

A页面使用uni.$on 监听对应的事件，接收到 uni.$emit 触发事件时传递的参数，并执行相应的逻辑。例如：uni.$on('eventname', function(data) { console.log('监听到事件来自eventname，携带参数为：' + data); }) 。

onShow() {
  //监听拍照imgFile事件
  uni.$on('imgFile', (data) => {
    //监听后请求第三方接口处理逻辑
  });
}

问题1：监听事件少了移除事件监听器

正常逻辑打开B页面进行拍照后返回A页面，监听事件会进行多次请求接口

A页面代码改造V1

onShow() {
  //监听拍照imgFile事件
  uni.$on('imgFile', (data) => {
    //监听后请求第三方接口处理逻辑
    
    //处理完图片后接口返回结果后，移除监听事件
    uni.$off('imgFile');
  });
}

正常打开B页面拍照触发takePhoto业务正常

问题2：onShow触发多次uni.$on注册多个监听事件

onShow是一个生命周期函数，页面显示时，会触发onShow事件。

有些用户打开B页面左上角返回A页面，此操作会使uni.$on注册多个监听事件，多个监听事件也会使我处理逻辑请求多次接口

代码改造V2

A页面

uni.$on注册监听事件放到跳转到B页面触发事件里

onShow() {
},
methods: {
  goBPage(){
    //监听拍照imgFile事件
    uni.$on('imgFile', (data) => {
      //监听后请求第三方接口处理逻辑
      
      //处理完图片后接口返回结果后，移除监听事件
      uni.$off('imgFile');
    });
    uni.navigateTo({
      url: bPageUrl
    });
  }
}

B页面：增加onUnload生命周期函数

当用户关闭页面、导航到其他页面时，onUnload事件就会被触发。

onUnload() {
  // 页面卸载时移除事件监听器，也可避免内存泄漏
  uni.$off('imgFile');
},

此时onShow触发多次uni.$on注册多个监听事件得到了解决

打赏学点