Merge pull request #179 from hwaphon/feature/custom-tabbar

feat(plugin-compiler-alipay & runtime-mini): 自定义 tabbar 功能转换支持
eleme · Apr 3, 2024 · 67e54ee · 67e54ee
2 parents de1c09e + d8b9059
commit 67e54ee
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 3 deletions.
diff --git a/packages/plugin-compiler-alipay/src/index.ts b/packages/plugin-compiler-alipay/src/index.ts
@@ -1,5 +1,6 @@
 import type { Plugin as MorPlugin, Runner } from '@morjs/utils'
 import AlipayCompilerConfigParserPlugin from './plugins/ConfigParserPlugin'
+import CustomTabBarPlugin from './plugins/CustomTabBarPlugin'
 import AlipayCompilerSjsParserPlugin from './plugins/SjsParserPlugin'
 import AlipayCompilerStyleParserPlugin from './plugins/StyleParserPlugin'
 import AlipayCompilerTemplateParserPlugin from './plugins/TemplateParserPlugin'
@@ -16,6 +17,7 @@ class AlipayCompilerPlugin implements MorPlugin {
     new AlipayCompilerStyleParserPlugin().apply(runner)
     new AlipayCompilerConfigParserPlugin().apply(runner)
     new AlipayCompilerTemplateParserPlugin().apply(runner)
+    new CustomTabBarPlugin().apply(runner)
   }
 }
 

diff --git a/packages/plugin-compiler-alipay/src/plugins/ConfigParserPlugin.ts b/packages/plugin-compiler-alipay/src/plugins/ConfigParserPlugin.ts
@@ -167,7 +167,8 @@ const TAB_BAR_RULES_TO_OTHER = {
         transform(item, TAB_BAR_ITEM_RULES_TO_OTHER, options)
       )
     }
-  }
+  },
+  customize: 'custom'
 } as TransformRules
 
 const APP_RULES_TO_OTHER = {
@@ -246,7 +247,8 @@ const TAB_BAR_RULES_TO_ALIPAY = {
         transform(item, TAB_BAR_ITEM_RULES_TO_ALIPAY, options)
       )
     }
-  }
+  },
+  custom: 'customize'
 } as TransformRules
 
 // 支付宝分包配置兼容转换

diff --git a/packages/plugin-compiler-alipay/src/plugins/CustomTabBarPlugin.ts b/packages/plugin-compiler-alipay/src/plugins/CustomTabBarPlugin.ts
@@ -0,0 +1,51 @@
+import { Plugin, Runner } from '@morjs/utils'
+import { isSimilarTarget } from '../constants'
+
+/**
+ * 支付宝 <=> other 自定义 tab-bar 场景目录处理
+ * 微信自定义 tab-bar：配置中开启 custom,然后在目录下创建 custom-tab-bar 目录
+ * 支付宝自定义 tab-bar: 配置中开启 customize，然后在目录下创建 customize-tab-bar 目录
+ */
+export default class CustomTabBarPlugin implements Plugin {
+  name = 'CustomTabBarPlugin'
+
+  apply(runner: Runner) {
+    const { sourceType, target } = runner.userConfig
+
+    if (target === sourceType) return
+    // 编译目标同为类支付宝小程序或者同为非类支付宝小程序，直接跳过
+    if (isSimilarTarget(target) === isSimilarTarget(sourceType)) return
+
+    const similarAlipayTabBarDir = 'customize-tab-bar'
+    const otherTabBarDir = 'custom-tab-bar'
+    const sourceTabBarDir = isSimilarTarget(sourceType)
+      ? similarAlipayTabBarDir
+      : otherTabBarDir
+    const targetTabBarDir = isSimilarTarget(target)
+      ? similarAlipayTabBarDir
+      : otherTabBarDir
+    /**
+     * 替换字符串中的TabBar目录路径
+     * @param {string} param - 需要进行替换操作的字符串
+     * @returns {string} 替换后的字符串或原始参数
+     */
+    const replaceTabBarDir = (param) => {
+      if (typeof param !== 'string') return param
+      return param.replace(sourceTabBarDir, targetTabBarDir)
+    }
+
+    runner.hooks.addEntry.tap(this.name, (entryInfo) => {
+      // 使用 startsWith 匹配，将影响范围限制在 srcPath 直接下级目录
+      if (entryInfo.name && entryInfo.name.startsWith(sourceTabBarDir)) {
+        entryInfo.entry.fullEntryName = replaceTabBarDir(
+          entryInfo.entry.fullEntryName
+        )
+        entryInfo.entry.entryName = replaceTabBarDir(entryInfo.entry.entryName)
+        entryInfo.entry.entryDir = replaceTabBarDir(entryInfo.entry.entryDir)
+        entryInfo.name = replaceTabBarDir(entryInfo.name)
+      }
+
+      return entryInfo
+    })
+  }
+}
diff --git a/packages/runtime-mini/src/alipay/utilsToAlipay.ts b/packages/runtime-mini/src/alipay/utilsToAlipay.ts
@@ -16,7 +16,6 @@ export function markUnsupportMethods(
     'animate',
     'clearAnimation',
     'createMediaQueryObserver',
-    'getTabBar',
     'setUpdatePerformanceListener'
   ]
     .concat(extraMethods || [])