fix(clickview): 修复支付宝view点击事件失效问题&完善click-view相关逻辑 #16812

NervJS · Nov 6, 2024 · d1c96b1 · d1c96b1
1 parent cc5f6dd
commit d1c96b1
Show file tree

Hide file tree

Showing 14 changed files with 49 additions and 24 deletions.
diff --git a/packages/shared/src/components.ts b/packages/shared/src/components.ts
@@ -525,10 +525,10 @@ export const voidElements = new Set([
 export const nestElements = new Map([
   ['view', -1],
   ['catch-view', -1],
-  ['click-view', -1],
   ['cover-view', -1],
   ['static-view', -1],
   ['pure-view', -1],
+  ['click-view', -1],
   ['block', -1],
   ['text', -1],
   ['static-text', 6],

diff --git a/packages/shared/src/template.ts b/packages/shared/src/template.ts
@@ -217,10 +217,11 @@ export class BaseTemplate {
               style: comp.style,
               class: comp.class
             }
+
             result['click-view'] = {
               style: comp.style,
               class: comp.class,
-              bindtap: 'eh'
+              ...this.getClickEvent()
             }
           }
         }
@@ -412,9 +413,9 @@ export class BaseTemplate {
       case 'slot':
       case 'slot-view':
       case 'catch-view':
-      case 'click-view':
       case 'static-view':
       case 'pure-view':
+      case 'click-view':
         nodeName = 'view'
         break
       case 'static-text':
@@ -515,6 +516,10 @@ export class BaseTemplate {
     return events
   }
 
+  protected getClickEvent (): any {
+    return { bindtap: 'eh' }
+  }
+
   protected getAttrValue (value: string, _key: string, _nodeName: string) {
     return `{${value}}`
   }

diff --git a/packages/taro-platform-alipay/src/template.ts b/packages/taro-platform-alipay/src/template.ts
@@ -41,6 +41,12 @@ export class Template extends RecursiveTemplate {
     return name
   }
 
+  getClickEvent () {
+    return {
+      onTap: 'eh'
+    }
+  }
+
   getEvents () {
     return {
       onTap: 'eh',

diff --git a/packages/taro-platform-harmony/src/template.ts b/packages/taro-platform-harmony/src/template.ts
@@ -83,6 +83,7 @@ ${elements}
     const result: Components = super.createMiniComponents(components)
 
     delete result['pure-view']
+    delete result['click-view']
     delete result['static-view']
     delete result['static-text']
     delete result['static-image']

diff --git a/packages/taro-platform-swan/src/template.ts b/packages/taro-platform-swan/src/template.ts
@@ -58,9 +58,9 @@ export class Template extends RecursiveTemplate {
     this.legacyMiniComponents = { ...result }
 
     delete result['pure-view']
+    delete result['click-view']
     delete result['static-view']
     delete result['catch-view']
-    delete result['click-view']
 
     return result
   }

diff --git a/packages/taro-plugin-html/src/runtime.ts b/packages/taro-plugin-html/src/runtime.ts
@@ -79,15 +79,16 @@ hooks.tap('modifySetAttrPayload', (element, key, payload, componentsAlias) => {
     const viewAlias = componentsAlias.view._num
     const staticViewAlias = componentsAlias['static-view']._num
     const catchViewAlias = componentsAlias['catch-view']._num
+    const clickViewAlias = componentsAlias['click-view']._num
     const qualifiedNameInCamelCase = toCamelCase(key)
     const dataPath = `${_path}.${Shortcuts.NodeName}`
     if (qualifiedNameInCamelCase === 'catchMove') {
       // catchMove = true: catch-view
-      // catchMove = false: view or static-view
+      // catchMove = false: view or click-view or static-view
       element.enqueueUpdate({
         path: dataPath,
         value: payload.value ? catchViewAlias : (
-          element.isAnyEventBinded() ? viewAlias : staticViewAlias
+          element.isOnlyClickBinded() ? clickViewAlias : (element.isAnyEventBinded() ? viewAlias : staticViewAlias)
         )
       })
     } else if (isHasExtractProp(element) && !element.isAnyEventBinded()) {
@@ -132,13 +133,14 @@ hooks.tap('modifyRmAttrPayload', (element, key, payload, componentsAlias) => {
     const viewAlias = componentsAlias.view._num
     const staticViewAlias = componentsAlias['static-view']._num
     const pureViewAlias = componentsAlias['pure-view']._num
+    const clickViewAlias = componentsAlias['click-view']._num
     const qualifiedNameInCamelCase = toCamelCase(key)
     const dataPath = `${_path}.${Shortcuts.NodeName}`
     if (qualifiedNameInCamelCase === 'catchMove') {
-      // catch-view => view or static-view or pure-view
+      // catch-view => view or click-view or static-view or pure-view
       element.enqueueUpdate({
         path: dataPath,
-        value: element.isAnyEventBinded() ? viewAlias : (isHasExtractProp(element) ? staticViewAlias : pureViewAlias)
+        value: element.isOnlyClickBinded() ? clickViewAlias : (element.isAnyEventBinded() ? viewAlias : (isHasExtractProp(element) ? staticViewAlias : pureViewAlias))
       })
     } else if (!isHasExtractProp(element)) {
       // static-view => pure-view

diff --git a/packages/taro-plugin-html/src/utils.ts b/packages/taro-plugin-html/src/utils.ts
@@ -39,7 +39,12 @@ export function getMappedType (nodeName: string, rawProps: Record<string, any>,
         }
       }
     }
-    if (!node || node.isAnyEventBinded()) {
+    if (!node) {
+      return 'view'
+    }
+    if (node.isOnlyClickBinded()) {
+      return 'click-view'
+    } else if (node.isAnyEventBinded()) {
       return 'view'
     } else if (isHasExtractProp(node)) {
       return 'static-view'

diff --git a/packages/taro-plugin-inject/README.md b/packages/taro-plugin-inject/README.md
@@ -218,6 +218,7 @@ export const nestElements = new Map([
   ['cover-view', -1],
   ['static-view', -1],
   ['pure-view', -1],
+  ['click-view', -1],
   ['block', -1],
   ['text', -1],
   ['static-text', 6],

diff --git a/packages/taro-runtime/src/constants/index.ts b/packages/taro-runtime/src/constants/index.ts
@@ -19,6 +19,7 @@ export const FOCUS = 'focus'
 export const VIEW = 'view'
 export const STATIC_VIEW = 'static-view'
 export const PURE_VIEW = 'pure-view'
+export const CLICK_VIEW = 'click-view'
 export const PROPS = 'props'
 export const DATASET = 'dataset'
 export const OBJECT = 'object'
@@ -38,7 +39,6 @@ export const SET_TIMEOUT = 'setTimeout'
 export const COMPILE_MODE = 'compileMode'
 export const CATCHMOVE = 'catchMove'
 export const CATCH_VIEW = 'catch-view'
-export const CLICK_VIEW = 'click-view'
 export const COMMENT = 'comment'
 export const ON_LOAD = 'onLoad'
 export const ON_READY = 'onReady'

diff --git a/packages/taro-runtime/src/dom/element.ts b/packages/taro-runtime/src/dom/element.ts
@@ -4,6 +4,7 @@ import {
   CATCH_VIEW,
   CATCHMOVE,
   CLASS,
+  CLICK_VIEW,
   EVENT_CALLBACK_RESULT,
   FOCUS,
   ID,
@@ -181,6 +182,7 @@ export class TaroElement extends TaroNode {
     const componentsAlias = getComponentsAlias()
     const _alias = componentsAlias[this.nodeName]
     const viewAlias = componentsAlias[VIEW]._num
+    const clickViewAlias = componentsAlias[CLICK_VIEW]._num
     const staticViewAlias = componentsAlias[STATIC_VIEW]._num
     const catchViewAlias = componentsAlias[CATCH_VIEW]._num
     const _path = this._path
@@ -205,11 +207,11 @@ export class TaroElement extends TaroNode {
     if (this.nodeName === VIEW) {
       if (qualifiedNameInCamelCase === CATCHMOVE) {
         // catchMove = true: catch-view
-        // catchMove = false: view or static-view
+        // catchMove = false: view or click-view or static-view
         this.enqueueUpdate({
           path: `${_path}.${Shortcuts.NodeName}`,
           value: value ? catchViewAlias : (
-            this.isAnyEventBinded() ? viewAlias : staticViewAlias
+            this.isOnlyClickBinded() ? clickViewAlias : (this.isAnyEventBinded() ? viewAlias : staticViewAlias)
           )
         })
       } else if (isPureView && isHasExtractProp(this)) {
@@ -254,6 +256,7 @@ export class TaroElement extends TaroNode {
     const viewAlias = componentsAlias[VIEW]._num
     const staticViewAlias = componentsAlias[STATIC_VIEW]._num
     const pureViewAlias = componentsAlias[PURE_VIEW]._num
+    const clickViewAlias = componentsAlias[CLICK_VIEW]._num
     const _path = this._path
 
     qualifiedName = shortcutAttr(qualifiedName)
@@ -275,10 +278,10 @@ export class TaroElement extends TaroNode {
 
     if (this.nodeName === VIEW) {
       if (qualifiedNameInCamelCase === CATCHMOVE) {
-        // catch-view => view or static-view or pure-view
+        // catch-view => view or click-view or static-view or pure-view
         this.enqueueUpdate({
           path: `${_path}.${Shortcuts.NodeName}`,
-          value: this.isAnyEventBinded() ? viewAlias : (isHasExtractProp(this) ? staticViewAlias : pureViewAlias)
+          value: this.isOnlyClickBinded() ? clickViewAlias : (this.isAnyEventBinded() ? viewAlias : (isHasExtractProp(this) ? staticViewAlias : pureViewAlias))
         })
       } else if (isStaticView && !isHasExtractProp(this)) {
         // static-view => pure-view

diff --git a/packages/taro-runtime/src/hydrate.ts b/packages/taro-runtime/src/hydrate.ts
@@ -53,15 +53,17 @@ export function hydrate (node: TaroElement | TaroText): MiniData {
     data.uid = node.uid
   }
 
-  if (!node.isAnyEventBinded() && SPECIAL_NODES.indexOf(nodeName) > -1) {
-    data[Shortcuts.NodeName] = `static-${nodeName}`
-    if (nodeName === VIEW && !isHasExtractProp(node)) {
-      data[Shortcuts.NodeName] = PURE_VIEW
+  if (SPECIAL_NODES.indexOf(nodeName) > -1) {
+    if (!node.isAnyEventBinded()) {
+      data[Shortcuts.NodeName] = `static-${nodeName}`
+      if (nodeName === VIEW && !isHasExtractProp(node)) {
+        data[Shortcuts.NodeName] = PURE_VIEW
+      }
     }
-  }
 
-  if (nodeName === VIEW && node.isOnlyClickBinded()) {
-    data[Shortcuts.NodeName] = CLICK_VIEW
+    if (nodeName === VIEW && node.isOnlyClickBinded()) {
+      data[Shortcuts.NodeName] = CLICK_VIEW
+    }
   }
 
   const { props } = node

diff --git a/packages/taro-vite-runner/src/utils/component.ts b/packages/taro-vite-runner/src/utils/component.ts
@@ -1,7 +1,7 @@
 import type { IComponentConfig } from '@tarojs/taro/types/compile/hooks'
 
 export const componentConfig: IComponentConfig = {
-  includes: new Set(['view', 'catch-view', 'click-view', 'static-view', 'pure-view', 'scroll-view', 'image', 'static-image', 'text', 'static-text']),
+  includes: new Set(['view', 'catch-view', 'static-view', 'pure-view', 'click-view', 'scroll-view', 'image', 'static-image', 'text', 'static-text']),
   exclude: new Set(),
   thirdPartyComponents: new Map(),
   includeAll: false

diff --git a/packages/taro-webpack5-runner/src/prerender/prerender.ts b/packages/taro-webpack5-runner/src/prerender/prerender.ts
@@ -221,7 +221,7 @@ export class Prerender {
       return data[Shortcuts.Text]
     }
 
-    if (nodeName === 'static-view' || nodeName === 'pure-view') {
+    if (nodeName === 'static-view' || nodeName === 'pure-view' || nodeName === 'click-view') {
       nodeName = 'view'
     } else if (nodeName === 'static-text') {
       nodeName = 'text'

diff --git a/packages/taro-webpack5-runner/src/utils/component.ts b/packages/taro-webpack5-runner/src/utils/component.ts
@@ -1,7 +1,7 @@
 import type { IComponentConfig } from '@tarojs/taro/types/compile/hooks'
 
 export const componentConfig: IComponentConfig = {
-  includes: new Set(['view', 'catch-view', 'click-view', 'static-view', 'pure-view', 'scroll-view', 'image', 'static-image', 'text', 'static-text']),
+  includes: new Set(['view', 'catch-view', 'static-view', 'pure-view', 'click-view', 'scroll-view', 'image', 'static-image', 'text', 'static-text']),
   exclude: new Set(),
   thirdPartyComponents: new Map(),
   includeAll: false