fix(mp): events with multiple statements #720

packages/uni-template-compiler/__tests__/compiler-extra.spec.js

@@ -251,7 +251,11 @@ describe('mp:compiler-extra', () => {
     )
   })
 
-  it('generate events inside v-for', () => {
+  it('generate events inside v-for', () => {
+    assertCodegen(
+      `<view v-for="item in dataList" :key="item.id" @click="click1(item, 1);click2(item, 2);"/>`,
+      `<block wx:for="{{dataList}}" wx:for-item="item" wx:for-index="__i0__" wx:key="id"><view data-event-opts="{{[['tap',[['click1',['$0',1],[[['dataList','id',item.id]]]],['click2',['$0',2],[[['dataList','id',item.id]]]]]]]}}" bindtap="__e"></view></block>`
+    )
     // TODO vue的数字 item 是从1，小程序是从0，后续考虑抹平差异
     assertCodegen(
       `<view>1<view  v-for="item in items" :key="item"><input v-for="item1 in item" :key="item1" @input="handle" @click="e=>count++"></view></view>`,

packages/uni-template-compiler/__tests__/demo.js

@@ -2,7 +2,7 @@ const compiler = require('../lib')
 
 const res = compiler.compile(
   `
-<view @touchmove="a.touchmove">{{t.a}}{{t['a']}}{{t.a(b)}}{{t['a'](b)}}{{u.t.a(b)}}{{u.t.a}}</view>
+<view v-for="item in dataList" :key="item.id" @click="click1(item, 1);click2(item, 2);"/>
     `, {
     resourcePath: '/User/fxy/Documents/test.wxml',
     mp: {

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

@@ -167,6 +167,39 @@ function getMethodName (methodName) {
   return methodName === '__HOLDER__' ? '' : methodName
 }
 
+function parseEventByCallExpression (callExpr, methods) {
+  let methodName = callExpr.callee.name
+  if (methodName === '$set') {
+    methodName = INTERNAL_SET_SYNC
+  }
+  const arrayExpression = [t.stringLiteral(getMethodName(methodName))]
+  const args = callExpr.arguments
+  if (methodName === INTERNAL_SET_SYNC) {
+    // v-bind:title.sync="doc.title"
+    // ['$set',['doc.a','title','$event']]
+    const argsExpression = []
+    argsExpression.push(
+      t.memberExpression(args[0], t.identifier(args[1].value))
+    )
+    argsExpression.push(t.stringLiteral(args[1].value))
+    argsExpression.push(t.stringLiteral('$event'))
+    arrayExpression.push(t.arrayExpression(argsExpression))
+  } else {
+    if (args.length) {
+      const argsExpression = []
+      args.forEach(arg => {
+        if (t.isIdentifier(arg) && arg.name === '$event') {
+          argsExpression.push(t.stringLiteral('$event'))
+        } else {
+          argsExpression.push(arg)
+        }
+      })
+      arrayExpression.push(t.arrayExpression(argsExpression))
+    }
+  }
+  methods.push(t.arrayExpression(arrayExpression))
+}
+
 function parseEvent (keyPath, valuePath, state, isComponent, isNativeOn = false, tagName, ret) {
   const key = keyPath.node
   let type = key.value || key.name
@@ -235,7 +268,22 @@ function parseEvent (keyPath, valuePath, state, isComponent, isNativeOn = false,
       methods.push(addEventExpressionStatement(funcPath, state, isCustom))
     } else {
       let anonymous = true
-      funcPath.traverse({
+
+      // "click":function($event) {click1(item);click2(item);}
+      const body = funcPath.node.body.body
+      if (body.length) {
+        const exprStatements = body.filter(node => {
+          return t.isExpressionStatement(node) && t.isCallExpression(node.expression)
+        })
+        if (exprStatements.length === body.length) {
+          anonymous = false
+          exprStatements.forEach(exprStatement => {
+            parseEventByCallExpression(exprStatement.expression, methods)
+          })
+        }
+      }
+
+      anonymous && funcPath.traverse({
         noScope: true,
         MemberExpression (path) {
           if (path.node.object.name === '$event' && path.node.property.name ===
@@ -271,36 +319,7 @@ function parseEvent (keyPath, valuePath, state, isComponent, isNativeOn = false,
           if (t.isCallExpression(argument)) {
             if (t.isIdentifier(argument.callee)) {
               anonymous = false
-              let methodName = argument.callee.name
-              if (methodName === '$set') {
-                methodName = INTERNAL_SET_SYNC
-              }
-              const arrayExpression = [t.stringLiteral(getMethodName(methodName))]
-              const args = argument.arguments
-              if (methodName === INTERNAL_SET_SYNC) {
-                // v-bind:title.sync="doc.title"
-                // ['$set',['doc.a','title','$event']]
-                const argsExpression = []
-                argsExpression.push(
-                  t.memberExpression(args[0], t.identifier(args[1].value))
-                )
-                argsExpression.push(t.stringLiteral(args[1].value))
-                argsExpression.push(t.stringLiteral('$event'))
-                arrayExpression.push(t.arrayExpression(argsExpression))
-              } else {
-                if (args.length) {
-                  const argsExpression = []
-                  args.forEach(arg => {
-                    if (t.isIdentifier(arg) && arg.name === '$event') {
-                      argsExpression.push(t.stringLiteral('$event'))
-                    } else {
-                      argsExpression.push(arg)
-                    }
-                  })
-                  arrayExpression.push(t.arrayExpression(argsExpression))
-                }
-              }
-              methods.push(t.arrayExpression(arrayExpression))
+              parseEventByCallExpression(argument, methods)
             }
           }
         }