fix(mp-alipay): 修复支付宝小程序插件内组件时机较早的事件无效的问题（question/142048）

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

@@ -65,7 +65,7 @@ describe('mp:compiler-mp-alipay', () => {
     )
     assertCodegen(
       '<credit-pay @change="onChange" @cancle="onCancle">text</credit-pay>',
-      '<plugin-wrapper onChange="__e" onCancle="__e" vue-id="551070e6-1" onPluginWrap="__w" data-event-opts="{{[[\'^change\',[[\'onChange\']]],[\'^cancle\',[[\'onCancle\']]]]}}" data-com-type="wx" ref="__r" data-event-list="onChange,onCancle" onVueInit="__l"><credit-pay onChange="{{\'onChange\'+\'551070e6-1\'}}" onCancle="{{\'onCancle\'+\'551070e6-1\'}}" onVueInit="__l">text</credit-pay></plugin-wrapper>',
+      '<plugin-wrapper onChange="__e" onCancle="__e" vue-id="551070e6-1" onPluginWrap="__w" data-event-opts="{{[[\'^change\',[[\'onChange\']]],[\'^cancle\',[[\'onCancle\']]]]}}" data-com-type="wx" data-event-list="onChange,onCancle" onVueInit="__l"><credit-pay onChange="{{\'onChange\'+\'551070e6-1\'}}" onCancle="{{\'onCancle\'+\'551070e6-1\'}}" onVueInit="__l">text</credit-pay></plugin-wrapper>',
       undefined,
       undefined,
       {

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

@@ -52,12 +52,14 @@ module.exports = function traverseData (path, state, tagName) {
       )
     )
     if (state.options.platform.name === 'mp-alipay') {
-      addAttrProperties.push(
-        t.objectProperty(
-          t.stringLiteral('ref'),
-          t.stringLiteral('__r')
+      if (!wxComponent.startsWith('plugin://')) {
+        addAttrProperties.push(
+          t.objectProperty(
+            t.stringLiteral('ref'),
+            t.stringLiteral('__r')
+          )
         )
-      )
+      }
       const on = path.node.properties.find(prop => prop.key.name === 'on')
       if (on) {
         const properties = on.value.properties

packages/webpack-uni-mp-loader/lib/plugin/generate-component.js

@@ -253,7 +253,7 @@ module.exports = function generateComponent (compilation, jsonpFunction = 'webpa
         },
         {
           ext: 'js',
-          source: 'Component({onInit(){this.props.onPluginWrap(this)},didUnmount(){this.props.onPluginWrap(this,false)}})'
+          source: 'Component({onInit(){this.props.onPluginWrap(this)},didUnmount(){this.props.onPluginWrap(this,true)}})'
         },
         {
           ext: 'json',

packages/webpack-uni-mp-loader/lib/plugin/index-new.js

@@ -81,7 +81,7 @@ function addMPPluginRequire (compilation) {
       const filePath = normalizePath(path.resolve(process.env.UNI_INPUT_DIR, name))
       const uniModuleId = modules.find(module => module.resource && normalizePath(module.resource) === filePath).id
 
-      const source = orignalSource + `\nmodule.exports = ${globalEnv}.__webpack_require_UNI_MP_PLUGIN__('${uniModuleId}');\n`;
+      const source = orignalSource + `\nmodule.exports = ${globalEnv}.__webpack_require_UNI_MP_PLUGIN__('${uniModuleId}');\n`
 
       compilation.assets[name] = {
         size () {

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

@@ -108,40 +108,44 @@ export function initChildVues (mpInstance) {
   delete mpInstance._$childVues
 }
 
+function handleProps (ref) {
+  const eventProps = {}
+  let refProps = ref.props
+  const eventList = refProps['data-event-list'].split(',')
+  // 初始化支付宝小程序组件事件
+  Object.keys(refProps).forEach(key => {
+    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)
+        props[key] = handler
+        // 由于支付宝事件可能包含多个参数，不使用微信小程序事件格式
+        delete props['data-com-type']
+        triggerEvent.bind({ props })(event, {
+          __args__: [...arguments]
+        })
+      }
+    }
+  })
+  // 处理 props 重写
+  Object.defineProperty(ref, 'props', {
+    get () {
+      return refProps
+    },
+    set (value) {
+      refProps = Object.assign(value, eventProps)
+    }
+  })
+}
+
 export function handleRef (ref) {
   if (!ref) {
     return
   }
   if (ref.props['data-com-type'] === 'wx') {
-    const eventProps = {}
-    let refProps = ref.props
-    const eventList = refProps['data-event-list'].split(',')
-    // 初始化支付宝小程序组件事件
-    Object.keys(refProps).forEach(key => {
-      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)
-          props[key] = handler
-          // 由于支付宝事件可能包含多个参数，不使用微信小程序事件格式
-          delete props['data-com-type']
-          triggerEvent.bind({ props })(event, {
-            __args__: [...arguments]
-          })
-        }
-      }
-    })
-    // 处理 props 重写
-    Object.defineProperty(ref, 'props', {
-      get () {
-        return refProps
-      },
-      set (value) {
-        refProps = Object.assign(value, eventProps)
-      }
-    })
+    handleProps(ref)
   }
   const refName = ref.props['data-ref']
   const refInForName = ref.props['data-ref-in-for']
@@ -229,10 +233,12 @@ export const handleWrap = function (mp, destory) {
     if (destory) {
       delete this[key]
     } else {
-      // TODO remove handleRef
       this[key] = function () {
         mp.props[eventName].apply(this, arguments)
       }
     }
   })
+  if (!destory) {
+    handleProps(mp)
+  }
 }