fix(mp-alipay): 支付宝小程序组件事件监听 #2273

packages/uni-template-compiler/__tests__/compiler-mp-alipay.spec.js

@@ -46,8 +46,8 @@ describe('mp:compiler-mp-alipay', () => {
       '<component1 vue-id="{{\'551070e6-1-\'+__i0__}}" ref="__r" data-ref-in-for="{{c4}}" a:for="{{items}}" a:for-item="item" a:for-index="__i0__" onVueInit="__l"></component1>'
     )
     assertCodegen(
-      '<component1 @change="onChange">text</component1>',
-      '<component1 onChange="__e" vue-id="551070e6-1" data-event-opts="{{[[\'^change\',[[\'onChange\']]]]}}" data-com-type="wx" ref="__r" onVueInit="__l">text</component1>',
+      '<component1 @change="onChange" @cancle="onCancle">text</component1>',
+      '<component1 onChange="__e" onCancle="__e" vue-id="551070e6-1" data-event-opts="{{[[\'^change\',[[\'onChange\']]],[\'^cancle\',[[\'onCancle\']]]]}}" data-com-type="wx" ref="__r" data-event-list="onChange,onCancle" onVueInit="__l">text</component1>',
       undefined,
       undefined,
       {
@@ -55,8 +55,8 @@ describe('mp:compiler-mp-alipay', () => {
       }
     )
     assertCodegen(
-      '<credit-pay @change="onChange">text</credit-pay>',
-      '<credit-pay onChange="__e" vue-id="551070e6-1" data-event-opts="{{[[\'^change\',[[\'onChange\']]]]}}" data-com-type="wx" ref="__r" onVueInit="__l">text</credit-pay>',
+      '<credit-pay @change="onChange" @cancle="onCancle">text</credit-pay>',
+      '<credit-pay onChange="__e" onCancle="__e" vue-id="551070e6-1" data-event-opts="{{[[\'^change\',[[\'onChange\']]],[\'^cancle\',[[\'onCancle\']]]]}}" data-com-type="wx" ref="__r" data-event-list="onChange,onCancle" onVueInit="__l">text</credit-pay>',
       undefined,
       undefined,
       {

packages/uni-template-compiler/lib/constants.js

@@ -63,6 +63,7 @@ module.exports = {
   ATTR_DATA_EVENT_OPTS: 'data-event-opts',
   ATTR_DATA_COM_TYPE: 'data-com-type',
   ATTR_DATA_EVENT_PARAMS: 'data-event-params',
+  ATTR_DATA_EVENT_LIST: 'data-event-list',
   ATTE_DATA_CUSTOM_HIDDEN: 'data-custom-hidden',
   INTERNAL_GET_ORIG,
   INTERNAL_GET_CLASS,

packages/uni-template-compiler/lib/script/traverse/data/index.js

 const t = require('@babel/types')
 
 const {
-  ATTR_DATA_COM_TYPE
+  ATTR_DATA_COM_TYPE,
+  ATTR_DATA_EVENT_LIST
 } = require('../../../constants')
 
 const processRef = require('./ref')
@@ -51,6 +52,20 @@ module.exports = function traverseData (path, state, tagName) {
           t.stringLiteral('__r')
         )
       )
+      const properties = path.node.properties.find(prop => prop.key.name === 'on').value.properties
+      const list = []
+      for (let index = 0; index < properties.length; index++) {
+        const element = properties[index]
+        if (element.value.value === '__e') {
+          list.push(element.key.value)
+        }
+      }
+      addAttrProperties.push(
+        t.objectProperty(
+          t.stringLiteral(ATTR_DATA_EVENT_LIST),
+          t.stringLiteral(list.join(','))
+        )
+      )
     }
   }
 

src/platforms/mp-alipay/runtime/wrapper/util.js

@@ -115,11 +115,12 @@ export function handleRef (ref) {
   if (ref.props['data-com-type'] === 'wx') {
     const eventProps = {}
     let refProps = ref.props
+    let eventList = refProps['data-event-list'].split(',')
     // 初始化支付宝小程序组件事件
     Object.keys(refProps).forEach(key => {
-      const handler = refProps[key]
-      const res = key.match(/^on([A-Z])(\S*)/)
-      if (res && typeof handler === 'function' && handler.name === 'bound handleEvent') {
+      if (eventList.includes(key)) {
+        const handler = refProps[key]
+        const res = key.match(/^on([A-Z])(\S*)/)
         const event = res && (res[1].toLowerCase() + res[2])
         refProps[key] = eventProps[key] = function () {
           const props = Object.assign({}, refProps)