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 + } +}