feat(mp-weixin): skyline gesture (question/162700)

packages/uni-mp-core/src/runtime/component.ts

@@ -9,7 +9,11 @@ import {
 // @ts-expect-error
 import { getExposeProxy } from 'vue'
 
-import { initExtraOptions, initWxsCallMethods } from './util'
+import {
+  initExtraOptions,
+  initWorkletMethods,
+  initWxsCallMethods,
+} from './util'
 
 import { initProps } from './componentProps'
 import { applyOptions, initPropsObserver } from './componentOptions'
@@ -138,6 +142,12 @@ export function parseComponent(
     mpComponentOptions.methods as Component.MethodOption,
     vueOptions.wxsCallMethods
   )
+  if (__PLATFORM__ === 'mp-weixin') {
+    initWorkletMethods(
+      mpComponentOptions.methods as Component.MethodOption,
+      vueOptions.methods
+    )
+  }
 
   if (parse) {
     parse(mpComponentOptions, { handleLink })

packages/uni-mp-core/src/runtime/util.ts

@@ -39,6 +39,23 @@ export function initExtraOptions(
   })
 }
 
+const WORKLET_RE = /_(.*)_worklet_factory_/
+export function initWorkletMethods(
+  mpMethods: WechatMiniprogram.Component.MethodOption,
+  vueMethods: ComponentOptions['methods']
+) {
+  if (vueMethods) {
+    Object.keys(vueMethods).forEach((name) => {
+      const matches = name.match(WORKLET_RE)
+      if (matches) {
+        const workletName = matches[1]
+        mpMethods[name] = vueMethods[name]
+        mpMethods[workletName] = vueMethods[workletName]
+      }
+    })
+  }
+}
+
 export function initWxsCallMethods(
   methods: WechatMiniprogram.Component.MethodOption,
   wxsCallMethods: WechatMiniprogram.Component.MethodOption

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

@@ -225,6 +225,15 @@ describe('mp-weixin: transform component', () => {
       `<block wx:if="{{r0}}"><scroll-view binddragstart="{{a}}" binddragging="{{b}}" binddragend="{{c}}"/></block>`,
       `(_ctx, _cache) => {
   return { a: _o(_ctx.d), b: _o(_ctx.d), c: _o(_ctx.d) }
+}`
+    )
+  })
+  test(`skyline gesture`, () => {
+    assert(
+      `<vertical-drag-gesture-handler onGestureEvent="handlePan" native-view="scroll-view" shouldResponseOnMove="shouldResponse" shouldAcceptGesture="shouldAccept"/>`,
+      `<vertical-drag-gesture-handler onGestureEvent="handlePan" native-view="scroll-view" shouldResponseOnMove="shouldResponse" shouldAcceptGesture="shouldAccept"/>`,
+      `(_ctx, _cache) => {
+  return {}
 }`
     )
   })

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

@@ -118,6 +118,14 @@ const customElements = [
     'navigation-bar',
     'match-media',
     'ad-custom',
+    // 手势组件
+    'tap-gesture-handler',
+    'double-tap-gesture-handler',
+    'pan-gesture-handler',
+    'scale-gesture-handler',
+    'force-press-gesture-handler',
+    'vertical-drag-gesture-handler',
+    'horizontal-drag-gesture-handler',
 ];
 const compilerOptions = {
     nodeTransforms: [uniCliShared.transformRef, uniCliShared.transformComponentLink, transformAd],

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

@@ -308,6 +308,19 @@ function initExtraOptions(miniProgramComponentOptions, vueOptions) {
         }
     });
 }
+const WORKLET_RE = /_(.*)_worklet_factory_/;
+function initWorkletMethods(mpMethods, vueMethods) {
+    if (vueMethods) {
+        Object.keys(vueMethods).forEach((name) => {
+            const matches = name.match(WORKLET_RE);
+            if (matches) {
+                const workletName = matches[1];
+                mpMethods[name] = vueMethods[name];
+                mpMethods[workletName] = vueMethods[workletName];
+            }
+        });
+    }
+}
 function initWxsCallMethods(methods, wxsCallMethods) {
     if (!isArray(wxsCallMethods)) {
         return;
@@ -671,6 +684,9 @@ function parseComponent(vueOptions, { parse, mocks, isPage, initRelation, handle
     initPropsObserver(mpComponentOptions);
     initExtraOptions(mpComponentOptions, vueOptions);
     initWxsCallMethods(mpComponentOptions.methods, vueOptions.wxsCallMethods);
+    {
+        initWorkletMethods(mpComponentOptions.methods, vueOptions.methods);
+    }
     if (parse) {
         parse(mpComponentOptions, { handleLink });
     }

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

@@ -19,6 +19,14 @@ export const customElements = [
   'navigation-bar',
   'match-media',
   'ad-custom',
+  // 手势组件
+  'tap-gesture-handler',
+  'double-tap-gesture-handler',
+  'pan-gesture-handler',
+  'scale-gesture-handler',
+  'force-press-gesture-handler',
+  'vertical-drag-gesture-handler',
+  'horizontal-drag-gesture-handler',
 ]
 
 export const compilerOptions: CompilerOptions = {