fix(mp): support multiple arguments

packages/uni-api/src/helpers/api/promise.ts

@@ -27,15 +27,20 @@ export function handlePromise(promise: Promise<unknown>) {
 }
 
 export function promisify(name: string, fn: Function) {
-  return (args = {}) => {
+  return (args = {}, ...rest: unknown[]) => {
     if (hasCallback(args)) {
-      return wrapperReturnValue(name, invokeApi(name, fn, args))
+      return wrapperReturnValue(name, invokeApi(name, fn, args, rest))
     }
     return wrapperReturnValue(
       name,
       handlePromise(
         new Promise((resolve, reject) => {
-          invokeApi(name, fn, extend(args, { success: resolve, fail: reject }))
+          invokeApi(
+            name,
+            fn,
+            extend(args, { success: resolve, fail: reject }),
+            rest
+          )
         })
       )
     )

packages/uni-api/src/helpers/interceptor.ts

@@ -115,7 +115,7 @@ export function invokeApi(
   method: string,
   api: Function,
   options: object,
-  ...params: []
+  params: unknown[]
 ) {
   const interceptor = getApiInterceptorHooks(method)
   if (interceptor && Object.keys(interceptor).length) {

packages/uni-cli-shared/src/mp/template.ts

@@ -8,7 +8,7 @@ export interface MiniProgramCompilerOptions {
    * 需要延迟渲染的组件，通常是某个组件的某个事件会立刻触发，需要延迟到首次 render 之后，比如微信 editor 的 ready 事件，快手 switch 的 change
    */
   lazyElement?: {
-    [name: string]: string[]
+    [name: string]: { name: 'on' | 'bind'; arg: string[] }[]
   }
   event?: {
     format(

packages/uni-mp-compiler/src/template/codegen.ts

@@ -213,16 +213,20 @@ function isLazyElement(node: ElementNode, context: TemplateCodegenContext) {
   if (!context.lazyElement) {
     return false
   }
-  const events = context.lazyElement[node.tag]
-  return (
-    events &&
-    node.props.some(
-      (prop) =>
-        prop.type === NodeTypes.DIRECTIVE &&
-        prop.name === 'on' &&
-        prop.arg?.type === NodeTypes.SIMPLE_EXPRESSION &&
-        events.includes(prop.arg.content)
-    )
+  const lazyProps = context.lazyElement[node.tag]
+  if (!lazyProps) {
+    return
+  }
+  return node.props.some(
+    (prop) =>
+      prop.type === NodeTypes.DIRECTIVE &&
+      lazyProps.find((lazyProp) => {
+        return (
+          prop.name === lazyProp.name &&
+          prop.arg?.type === NodeTypes.SIMPLE_EXPRESSION &&
+          lazyProp.arg.includes(prop.arg.content)
+        )
+      })
   )
 }
 /**

packages/uni-mp-core/src/api/promise.ts

@@ -66,13 +66,16 @@ export function promisify(name: string, api: unknown) {
   if (!isFunction(api)) {
     return api
   }
-  return function promiseApi(options: Record<string, any> = {}) {
+  return function promiseApi(
+    options: Record<string, any> = {},
+    ...rest: unknown[]
+  ) {
     if (
       isFunction(options.success) ||
       isFunction(options.fail) ||
       isFunction(options.complete)
     ) {
-      return wrapperReturnValue(name, invokeApi(name, api, options))
+      return wrapperReturnValue(name, invokeApi(name, api, options, rest))
     }
     return wrapperReturnValue(
       name,
@@ -84,7 +87,8 @@ export function promisify(name: string, api: unknown) {
             extend({}, options, {
               success: resolve,
               fail: reject,
-            })
+            }),
+            rest
           )
         })
       )

packages/uni-mp-kuaishou/dist/uni.compiler.js

@@ -147,7 +147,7 @@ const miniProgram = {
     },
     directive: 'ks:',
     lazyElement: {
-        switch: ['change'],
+        switch: [{ name: 'on', arg: ['change'] }],
     },
 };
 const projectConfigFilename = 'project.config.json';

packages/uni-mp-kuaishou/src/compiler/options.ts

@@ -32,7 +32,7 @@ export const miniProgram: MiniProgramCompilerOptions = {
   },
   directive: 'ks:',
   lazyElement: {
-    switch: ['change'],
+    switch: [{ name: 'on', arg: ['change'] }],
   },
 }
 const projectConfigFilename = 'project.config.json'

packages/uni-mp-weixin/__tests__/component.spec.ts

@@ -11,7 +11,7 @@ describe('mp-weixin: transform component', () => {
 }`
     )
   })
-  test('lazy element', () => {
+  test('lazy element: editor', () => {
     assert(
       `<editor/>`,
       `<editor/>`,
@@ -24,6 +24,43 @@ describe('mp-weixin: transform component', () => {
       `<block wx:if="{{r0}}"><editor bindready="{{a}}"/></block>`,
       `(_ctx, _cache) => {
   return { a: _o(_ctx.ready) }
+}`
+    )
+  })
+  test('lazy element: canvas', () => {
+    assert(
+      `<canvas/>`,
+      `<canvas/>`,
+      `(_ctx, _cache) => {
+  return {}
+}`
+    )
+    assert(
+      `<canvas canvas-id="myCanvas" id="myCanvas"/>`,
+      `<canvas canvas-id="myCanvas" id="myCanvas"/>`,
+      `(_ctx, _cache) => {
+  return {}
+}`
+    )
+    assert(
+      `<canvas :id="id"/>`,
+      `<block wx:if="{{r0}}"><canvas id="{{a}}"/></block>`,
+      `(_ctx, _cache) => {
+  return { a: _ctx.id }
+}`
+    )
+    assert(
+      `<canvas :canvas-id="id"/>`,
+      `<block wx:if="{{r0}}"><canvas canvas-id="{{a}}"/></block>`,
+      `(_ctx, _cache) => {
+  return { a: _ctx.id }
+}`
+    )
+    assert(
+      `<canvas :canvas-id="id" :id="id"/>`,
+      `<block wx:if="{{r0}}"><canvas canvas-id="{{a}}" id="{{b}}"/></block>`,
+      `(_ctx, _cache) => {
+  return { a: _ctx.id, b: _ctx.id }
 }`
     )
   })

packages/uni-mp-weixin/dist/uni.api.esm.js

@@ -236,7 +236,7 @@ function getApiInterceptorHooks(method) {
     }
     return interceptor;
 }
-function invokeApi(method, api, options, ...params) {
+function invokeApi(method, api, options, params) {
     const interceptor = getApiInterceptorHooks(method);
     if (interceptor && Object.keys(interceptor).length) {
         if (isArray(interceptor.invoke)) {
@@ -586,17 +586,17 @@ function promisify(name, api) {
     if (!isFunction(api)) {
         return api;
     }
-    return function promiseApi(options = {}) {
+    return function promiseApi(options = {}, ...rest) {
         if (isFunction(options.success) ||
             isFunction(options.fail) ||
             isFunction(options.complete)) {
-            return wrapperReturnValue(name, invokeApi(name, api, options));
+            return wrapperReturnValue(name, invokeApi(name, api, options, rest));
         }
         return wrapperReturnValue(name, handlePromise(new Promise((resolve, reject) => {
             invokeApi(name, api, extend({}, options, {
                 success: resolve,
                 fail: reject,
-            }));
+            }), rest);
         })));
     };
 }

packages/uni-mp-weixin/dist/uni.compiler.js

@@ -72,7 +72,8 @@ const miniProgram = {
     },
     directive: 'wx:',
     lazyElement: {
-        editor: ['ready'],
+        canvas: [{ name: 'bind', arg: ['canvas-id', 'id'] }],
+        editor: [{ name: 'on', arg: ['ready'] }],
     },
 };
 const projectConfigFilename = 'project.config.json';

packages/uni-mp-weixin/src/compiler/options.ts

@@ -25,7 +25,8 @@ export const miniProgram: MiniProgramCompilerOptions = {
   },
   directive: 'wx:',
   lazyElement: {
-    editor: ['ready'],
+    canvas: [{ name: 'bind', arg: ['canvas-id', 'id'] }],
+    editor: [{ name: 'on', arg: ['ready'] }],
   },
 }
 const projectConfigFilename = 'project.config.json'