diff --git a/packages/plugin-compiler-alipay/src/templateProcessorToOther.ts b/packages/plugin-compiler-alipay/src/templateProcessorToOther.ts
index aca321bb..2cb474f4 100644
--- a/packages/plugin-compiler-alipay/src/templateProcessorToOther.ts
+++ b/packages/plugin-compiler-alipay/src/templateProcessorToOther.ts
@@ -1,6 +1,7 @@
import {
FileParserOptions,
logger,
+ Pairs,
posthtml,
tsTransformerFactory,
typescript as ts
@@ -100,8 +101,8 @@ export const templateProcessorToOther = {
}
// 事件代理名称
-const PROXY_EVENT_NAME = '$morEventHandlerProxy'
-const EVENT_HANDLER_NAME = 'data-mor-event-handlers'
+const PROXY_EVENT_NAME = '$morEHP' // $morEventHandlerProxy
+const EVENT_HANDLER_NAME = 'data-meh' // data-mor-event-handlers
const PROXY_DISABLE_EVENT_NAME = '$morDisableScrollProxy'
/**
@@ -117,10 +118,7 @@ function processEventProxy(
Object.keys(context.morHandlersMap).length &&
!options.userConfig?.processComponentsPropsFunction
) {
- node.attrs[EVENT_HANDLER_NAME] = Buffer.from(
- JSON.stringify(context.morHandlersMap)
- ).toString('base64')
-
+ node.attrs[EVENT_HANDLER_NAME] = Pairs.toString(context.morHandlersMap)
delete context.morHandlersMap
}
}
diff --git a/packages/plugin-compiler/src/plugins/processComponentsPropsFunctionPlugin.ts b/packages/plugin-compiler/src/plugins/processComponentsPropsFunctionPlugin.ts
index bd81b7bd..7eaa5229 100644
--- a/packages/plugin-compiler/src/plugins/processComponentsPropsFunctionPlugin.ts
+++ b/packages/plugin-compiler/src/plugins/processComponentsPropsFunctionPlugin.ts
@@ -3,6 +3,7 @@ import {
EntryType,
fsExtra as fs,
lodash as _,
+ Pairs,
Plugin,
Runner,
SourceTypes,
@@ -142,15 +143,11 @@ export class ProcessComponentsPropsFunctionPlugin implements Plugin {
// props 中的函数传参
const propsFunction = propsFunctionList
.map((item) => {
- return `bind:${this.getEventName(
- item
- )}="$morEventHandlerProxy" `
+ return `bind:${this.getEventName(item)}="$morEHP" `
})
.join('')
- const eventHandlerName = Buffer.from(
- JSON.stringify(propsMorHandlers)
- ).toString('base64')
- return ``
+ const eventHandlerName = Pairs.toString(propsMorHandlers)
+ return ``
} else if (
options?.fileInfo?.entryFileType === EntryFileType.style
) {
@@ -188,7 +185,7 @@ export class ProcessComponentsPropsFunctionPlugin implements Plugin {
${properties}
},
methods: {
- $morEventHandlerProxy(event) {
+ $morEHP(event) {
const { detail } = event;
if (detail.name) {
this.triggerEvent(event.type, { ...detail.args[0] })
diff --git a/packages/runtime-base/src/utils/index.ts b/packages/runtime-base/src/utils/index.ts
index d1b33678..34291e92 100644
--- a/packages/runtime-base/src/utils/index.ts
+++ b/packages/runtime-base/src/utils/index.ts
@@ -3,4 +3,5 @@ export * from './compose'
export * from './generateId'
export * from './getSharedProperty'
export * from './hasOwnProperty'
+export * from './pairs'
export * from './transformApis'
diff --git a/packages/runtime-base/src/utils/pairs.ts b/packages/runtime-base/src/utils/pairs.ts
new file mode 100644
index 00000000..ef5a9a47
--- /dev/null
+++ b/packages/runtime-base/src/utils/pairs.ts
@@ -0,0 +1,19 @@
+export const Pairs = {
+ /**
+ * 根据键值对字符串创建对象
+ * @param {string} param - 以短横线分隔的键值对字符串,形如 "key1_value1-key2_value2"
+ * @returns {Object} - 创建的对象,键为原始字符串中的 key,值为对应的 value
+ */
+ toObject(param: string): Record {
+ const result = {}
+ if (typeof param !== 'string') return result
+
+ const paramsArr = param.split('-')
+ paramsArr.forEach((pair) => {
+ const [key, value] = pair.split('_')
+ result[key] = value
+ })
+
+ return result
+ }
+}
diff --git a/packages/runtime-mini/src/alipay/componentToOther.ts b/packages/runtime-mini/src/alipay/componentToOther.ts
index c99b412c..d692372c 100644
--- a/packages/runtime-mini/src/alipay/componentToOther.ts
+++ b/packages/runtime-mini/src/alipay/componentToOther.ts
@@ -1,9 +1,9 @@
import {
- Base64,
compose,
generateId,
getSharedProperty,
- logger
+ logger,
+ Pairs
} from '@morjs/runtime-base'
import clone from 'clone-deep'
import { injectHasMixinSupport } from '../common/behaviorOrMixin'
@@ -13,7 +13,7 @@ const MOR_PREFIX = 'mor' as const
/**
* 保存在 dataset 的事件代理相关方法名称映射
*/
-const MOR_EVENT_HANDLERS_DATASET = `${MOR_PREFIX}EventHandlers` as const
+const MOR_EVENT_HANDLERS_DATASET = `meh` as const
/**
* 用于保存事件代理相关方法名称映射
*/
@@ -499,7 +499,7 @@ function hookComponentLifeCycle(
}
// 触发小程序原生事件
- // 事件会被 $morEventHandlerProxy 事件代理方法捕获
+ // 事件会被 $morEHP 事件代理方法捕获
// 并触发 event 事件, 基于 eventId
this.triggerEvent(triggerEventName, {
name: this[MOR_EVENT_HANDLERS][triggerEventName],
@@ -517,10 +517,9 @@ function hookComponentLifeCycle(
const injectEventHandlers = function (): void {
const morEventHandlers = this.dataset?.[MOR_EVENT_HANDLERS_DATASET]
-
if (morEventHandlers) {
try {
- this[MOR_EVENT_HANDLERS] = JSON.parse(Base64.decode(morEventHandlers))
+ this[MOR_EVENT_HANDLERS] = Pairs.toObject(morEventHandlers)
// ref 支持
if (this[MOR_EVENT_HANDLERS].ref) {
diff --git a/packages/runtime-mini/src/alipay/utilsToOther.ts b/packages/runtime-mini/src/alipay/utilsToOther.ts
index c853708f..abd27e8d 100644
--- a/packages/runtime-mini/src/alipay/utilsToOther.ts
+++ b/packages/runtime-mini/src/alipay/utilsToOther.ts
@@ -30,7 +30,7 @@ export function addEventProxy(options: Record): void {
* 支付宝小程序转其他小程序的事件代理函数
* @param event 事件
*/
- options.$morEventHandlerProxy = function (event: IEvent): void {
+ options.$morEHP = function (event: IEvent): void {
const { name, args, id } = event.detail
let value: any
diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts
index 091b46e2..d80014ff 100644
--- a/packages/utils/src/index.ts
+++ b/packages/utils/src/index.ts
@@ -38,6 +38,7 @@ export * from './babelDeps'
export * from './constants'
export * from './hooks'
export * from './moduleGraph'
+export * from './pairs'
export * from './queue'
export * from './types'
export * from './utils'
diff --git a/packages/utils/src/pairs.ts b/packages/utils/src/pairs.ts
new file mode 100644
index 00000000..d3beddde
--- /dev/null
+++ b/packages/utils/src/pairs.ts
@@ -0,0 +1,35 @@
+export const Pairs = {
+ /**
+ * 构建键值对字符串
+ * @param {Object} param - 包含键值对的对象
+ * @returns {string} - 键值对组合成的字符串,键和值之间以下划线连接,各对之间以破折号分隔
+ */
+ toString(param: Record): string {
+ const keys = Object.keys(param)
+
+ return keys.reduce((pre, key, index) => {
+ const value = param[key]
+ const suffix = index === keys.length - 1 ? '' : '-'
+
+ return (pre += `${key}_${value}${suffix}`)
+ }, '')
+ },
+
+ /**
+ * 根据键值对字符串创建对象
+ * @param {string} param - 以短横线分隔的键值对字符串,形如 "key1_value1-key2_value2"
+ * @returns {Object} - 创建的对象,键为原始字符串中的 key,值为对应的 value
+ */
+ toObject(param: string): Record {
+ const result = {}
+ if (typeof param !== 'string') return result
+
+ const paramsArr = param.split('-')
+ paramsArr.forEach((pair) => {
+ const [key, value] = pair.split('_')
+ result[key] = value
+ })
+
+ return result
+ }
+}