[Bug report] 构建支付宝小程序后，在开启mpx事件代理的情况下，bindregionchange 事件不触发

[vivine]

问题描述

地图组件，构建支付宝小程序后，在开启mpx事件代理的情况下，bindregionchange 事件不触发

产生条件和复现 DEMO

1、开启MPX事件代理，即：

forceProxyEventRules: {
    include: [resolve('src')]
}

2、使用地图组件bindregionchange事件

<template>
  <map
      id="myMap"
      style="width: 100%; height: 300px"
      show-scale="{{true}}"
      setting="{{ { showCompass: 0 } }}"
      enable-zoom="{{ true}}"
      bindtap="mapTap"
      bindregionchange="mapRegionChange"
  />
</template>

<script>
import { createPage } from '@mpxjs/core';
createPage({
  mapTap(e) {
    console.log('mapTap', e);
  },
  mapRegionChange(e) {
    console.log('mapRegionChange', e);
  }
})
</script>

产生原因预估

1、构建位 wxml 和 axml 时，事件配置属性 data-eventconfigs 的值里边的 事件名分别为：regionchange 和 regionChange，如下图：

2、在事件代理的处理方法里边，对 bindregionchange 事件处理的时候，则没有区分大小写，直接读取小写的，导致支付宝读取不到事件对应的处理函数

mpx/packages/core/src/platform/builtInMixins/proxyEventMixin.js

Lines 35 to 81 in 34282f9

 let fallbackType = '' 
 if (type === 'begin' || type === 'end') { 
   // 地图的 regionchange 事件会派发 e.type 为 begin 和 end 的事件 
   fallbackType = 'regionchange' 
 } else if (/-([a-z])/.test(type)) { 
   fallbackType = dash2hump(type) 
 } else if (__mpx_mode__ === 'ali') { 
   fallbackType = type.replace(/^./, i => i.toLowerCase()) 
 } 
 const target = $event.currentTarget || $event.target 
 if (!target) { 
   error(`[${type}] event object must have [currentTarget/target] property!`, location) 
   return 
 } 
 const eventConfigs = target.dataset.eventconfigs || {} 
 const curEventConfig = eventConfigs[type] || eventConfigs[fallbackType] || [] 
 let returnedValue 
 curEventConfig.forEach((item) => { 
   const callbackName = item[0] 
   if (emitMode) { 
     $event = $event.detail.data 
   } 
   if (callbackName) { 
     const params = item.length > 1 
       ? item.slice(1).map(item => { 
         // 暂不支持$event.xxx的写法 
         // if (/^\$event/.test(item)) { 
         //   this.__mpxTempEvent = $event 
         //   const value = getByPath(this, item.replace('$event', '__mpxTempEvent')) 
         //   // 删除临时变量 
         //   delete this.__mpxTempEvent 
         //   return value 
         if (item === '__mpx_event__') { 
           return $event 
         } else { 
           return item 
         } 
       }) 
       : [$event] 
     if (typeof this[callbackName] === 'function') { 
       returnedValue = this[callbackName].apply(this, params) 
     } else { 
       error(`Instance property [${callbackName}] is not function, please check.`, location) 
     } 
   } 
 }) 
 return returnedValue 

修改建议

1、【推荐】在构建位 wxml 和 axml 生成事件配置属性 data-eventconfigs 时，转换为小写

2、在对 bindregionchange 事件处理的时候，获取 eventConfigs 后先处理成为小写 或者 使用eventConfigs里事件名的时候处理成小写（这点可能需要做很多时间的映射，不止 regionchange 这么一个事件）

[pagnkelly]

https://github.com/didi/mpx/releases/tag/v2.9.3 已修复

[vivine]

https://github.com/didi/mpx/releases/tag/v2.9.3 已修复

测试了一下，还是没有修复

[pagnkelly]

https://github.com/didi/mpx/releases/tag/v2.9.3 已修复

测试了一下，还是没有修复

具体提供下demo吧

[vivine]

https://github.com/didi/mpx/releases/tag/v2.9.3 已修复

测试了一下，还是没有修复

具体提供下demo吧

Demo就在上面，你在任何一个MPX项目里新建一个页面，把我的那份代码copy过去就行了，如下图：

[Dong Hongping]

https://github.com/didi/mpx/releases/tag/v2.9.5 已修复