diff --git a/packages/taro-platform-harmony-cpp/src/program/vite/page.ts b/packages/taro-platform-harmony-cpp/src/program/vite/page.ts index 277432643459..835e7598287b 100644 --- a/packages/taro-platform-harmony-cpp/src/program/vite/page.ts +++ b/packages/taro-platform-harmony-cpp/src/program/vite/page.ts @@ -9,6 +9,10 @@ import type { PluginContext } from 'rollup' import type { Plugin, PluginOption } from 'vite' import type Harmony from '..' +type TCPageMeta = TPageMeta & { + isPure?: boolean +} + export default function (this: Harmony): PluginOption { const that = this const projectId = getProjectId() @@ -35,8 +39,14 @@ export default function (this: Harmony): PluginOption { buildStart(this: PluginContext) { const pluginContext = this const { runnerUtils, runOpts } = that.context - const isPureComp = (page: TPageMeta) => { - return runOpts?.options?.args.pure || page.config?.entryOption === false + const isPureComp = (page: TCPageMeta | TCPageMeta[]): page is TCPageMeta => { + if (page instanceof Array) return false + if (runOpts?.options?.args.pure || page.config?.entryOption === false) { + page.isPure = true + } else { + page.isPure = false + } + return page.isPure } const { getViteHarmonyCompilerContext } = runnerUtils @@ -85,8 +95,8 @@ export default function (this: Harmony): PluginOption { } const oddModifyInstantiate = compiler.loaderMeta.modifyInstantiate - compiler.loaderMeta.modifyInstantiate = function (this: PageParser, code = '', type = '', page: TPageMeta) { - if (type === 'page') { + compiler.loaderMeta.modifyInstantiate = function (this: PageParser, code = '', type = '', page: TPageMeta | TPageMeta[]) { + if (type === 'page' && !(page instanceof Array)) { const componentName = (page.config as any)?.componentName if (isString(componentName)) { code = code.replace(/export\sdefault\sstruct\sIndex/, `export struct ${componentName}`) @@ -100,15 +110,24 @@ export default function (this: Harmony): PluginOption { if (!isPureComp(config)) { config.entryOption = {} } - config.modifyPageImport = function (this: PageParser, importStr: string[], page: TPageMeta) { - if (!isPureComp(page)) { + config.modifyPageImport = function (this: PageParser, importStr: string[], page: TPageMeta | TPageMeta[]) { + function fixPageEntry (meta: TPageMeta) { Object.assign(config.entryOption, { - routeName: page.name, + routeName: meta.name, }) - if (isObject(page.config?.entryOption)) { - Object.assign(config.entryOption, page.config.entryOption) + if (isObject(meta.config?.entryOption)) { + Object.assign(config.entryOption, meta.config.entryOption) } } + + if (!isPureComp(page)) { + if (page instanceof Array) { + page.forEach(fixPageEntry) + } else { + fixPageEntry(page) + } + } + importStr.unshift('import { navigateBack } from "@tarojs/taro"') importStr.unshift('import oh_window from "@ohos.window"') importStr.unshift('import { TaroXComponent } from "@tarojs/components"') @@ -118,7 +137,7 @@ export default function (this: Harmony): PluginOption { importStr.unshift('import { audio } from "@kit.AudioKit"') } - config.modifyRenderState = function (this: PageParser, state: (string | null)[], page: TPageMeta) { + config.modifyRenderState = function (this: PageParser, state: (string | null)[], page: TPageMeta | TPageMeta[]) { const isPure = isPureComp(page) state.push( this.renderState( @@ -128,7 +147,7 @@ export default function (this: Harmony): PluginOption { foreach: () => 'null', disabled: !this.buildConfig.isBuildNativeComp && isPure, }, - this.isTabbarPage + false ), this.renderState( { @@ -136,7 +155,7 @@ export default function (this: Harmony): PluginOption { type: 'TaroAny', foreach: () => 'null', }, - this.isTabbarPage + false ), this.renderState( { @@ -155,7 +174,7 @@ export default function (this: Harmony): PluginOption { foreach: () => '{}', disabled: !this.buildConfig.isBuildNativeComp && isPure, }, - this.isTabbarPage + false ), this.renderState( { @@ -171,9 +190,17 @@ export default function (this: Harmony): PluginOption { decorator: 'State', name: 'isHideTitleBar', type: 'boolean', - foreach: () => this.appConfig.window?.navigationStyle === 'custom' - ? `config.navigationStyle !== 'default'` - : `config.navigationStyle === 'custom'`, + foreach: (_, index) => { + if (this.isTabbarPage) { + return this.appConfig.window?.navigationStyle === 'custom' + ? `config${index}.navigationStyle !== 'default'` + : `config${index}.navigationStyle === 'custom'` + } else { + return this.appConfig.window?.navigationStyle === 'custom' + ? `config.navigationStyle !== 'default'` + : `config.navigationStyle === 'custom'` + } + }, }, this.isTabbarPage ), @@ -250,7 +277,7 @@ export default function (this: Harmony): PluginOption { return 'this.params' } - config.modifyPageAppear = function (appearStr: string, page: TPageMeta) { + config.modifyPageAppear = function (appearStr: string, page: TPageMeta | TPageMeta[]) { const isPure = isPureComp(page) const appearCode: (string | null)[] = isPure ? [ @@ -263,12 +290,21 @@ export default function (this: Harmony): PluginOption { ` Current.audioSessionManager = audioManager.getSessionManager()`, `}`, `this.activeAudioSession()`, - `initEtsBuilder('${genUniPageId(page)}')`, + ...(page instanceof Array ? [ + ...page.map(p => `initEtsBuilder('${genUniPageId(p)}')`), + ...page.map((p, i) => `this.__pageName[${i}] = '${p.name}'`), + ] : [ + `initEtsBuilder('${genUniPageId(page)}')`, + `this.__pageName = '${page.name}'`, + ]), 'this.__layoutSize = this.params._layout_', - `this.__pageName = '${page.name}'`, `systemContext.windowWidth = ${config.config.windowArea?.width || 'this.params._layout_?.width'}`, `systemContext.windowHeight = ${config.config.windowArea?.height || 'this.params._layout_?.height'}`, - `TaroNativeModule.initStylesheet('${genUniPageId(page)}', styleJson, initStyleSheetConfig({ width: systemContext.windowWidth, height: systemContext.windowHeight}, this.getNavHeight()))`, + ...(page instanceof Array ? [ + ...page.map((p, i) => `TaroNativeModule.initStylesheet('${genUniPageId(p)}', styleJson${i}, initStyleSheetConfig({ width: systemContext.windowWidth, height: systemContext.windowHeight}, this.getNavHeight()))`), + ] : [ + `TaroNativeModule.initStylesheet('${genUniPageId(page)}', styleJson, initStyleSheetConfig({ width: systemContext.windowWidth, height: systemContext.windowHeight}, this.getNavHeight()))`, + ]), ] if (!isPure) { appearCode.push( @@ -298,14 +334,25 @@ export default function (this: Harmony): PluginOption { ` })`, `}`, `const avoidAreaChange = (res: TaroAny) => {`, - ` const statusHeight: number = px2vp(res.area.topRect.height);`, - ` this.statusBarHeight = statusHeight;`, - ` TaroNativeModule.UpdateEnvRule('${genUniPageId(page)}', initStyleSheetConfig({ width: this.__layoutSize.width, height: this.__layoutSize.height}, this.getNavHeight()), this.node?._nid)`, + ` const statusHeight: number = px2vp(res.area.topRect.height)`, + ...(page instanceof Array + ? [ + ` this.statusBarHeight = this.statusBarHeight.map(() => statusHeight)`, + ` this.node.forEach((item: TaroAny, i) => {`, + ` if (item?._nid) {`, + ` TaroNativeModule.UpdateEnvRule('${getProjectId()}:' + this.__pageName[i], initStyleSheetConfig({ width: this.__layoutSize.width, height: this.__layoutSize.height}, this.getNavHeight()), item._nid)`, + ` }`, + ` })` + ] + : [ + ` this.statusBarHeight = statusHeight`, + ` TaroNativeModule.UpdateEnvRule('${genUniPageId(page)}', initStyleSheetConfig({ width: this.__layoutSize.width, height: this.__layoutSize.height}, this.getNavHeight()), this.node?._nid)`, + ]), ` resizeFn(currentSplit, this.__layoutSize, false)`, `}`, - `const windowStage: TaroAny = AppStorage.get(WINDOW_STATE);`, + `const windowStage: TaroAny = AppStorage.get(WINDOW_STATE)`, 'this.areaChange = (res: TaroAny) => {', - ' if (res.type !== oh_window.AvoidAreaType.TYPE_SYSTEM) return;', + ' if (res.type !== oh_window.AvoidAreaType.TYPE_SYSTEM) return', ' if (!this.isShown) {', ' pendingAreaChange = () => { avoidAreaChange(res) }', ' } else {', @@ -325,17 +372,24 @@ export default function (this: Harmony): PluginOption { `this.handlePageDetach()`, 'this.deactivateAudioSession()', 'if (this.areaChange) {', - ' const windowStage: TaroAny = AppStorage.get(WINDOW_STATE);', + ' const windowStage: TaroAny = AppStorage.get(WINDOW_STATE)', ` windowStage.getMainWindowSync().off('avoidAreaChange', this.areaChange)`, '}' ] ) } - config.modifyPageBuild = function (this: PageParser, _: string, page: TPageMeta) { + config.modifyPageBuild = function (this: PageParser, _: string, page: TPageMeta | TPageMeta[]) { const coreBuildCodeArray = [ 'Stack() {', - ' if (this.isReady) {', - ' TaroXComponent({ pageId: (this.node as TaroAny)?._nid, data: this.nodeContent })', + ...(this.isTabbarPage + ? [ + ' if (this.isReady[index]) {', + ' TaroXComponent({ pageId: (this.node[index] as TaroAny)?._nid, data: this.nodeContent[index] })', + ] + : [ + ' if (this.isReady) {', + ' TaroXComponent({ pageId: (this.node as TaroAny)?._nid, data: this.nodeContent })', + ]), ' }', '}', '.align(Alignment.TopStart)', @@ -348,7 +402,9 @@ export default function (this: Harmony): PluginOption { if (!isPureComp(page)) { coreBuildCodeArray.push( - '.backgroundColor(this.pageBackgroundContentColor || this.pageBackgroundColor || "#FFFFFF")' + this.isTabbarPage + ? '.backgroundColor(this.pageBackgroundContentColor[index] || this.pageBackgroundColor[index] || "#FFFFFF")' + : '.backgroundColor(this.pageBackgroundContentColor || this.pageBackgroundColor || "#FFFFFF")' ) if (this.enableRefresh === 1) { @@ -370,37 +426,81 @@ export default function (this: Harmony): PluginOption { coreBuildCodeArray.unshift('Navigation() {') coreBuildCodeArray.push( '}', - `.backgroundColor(this.pageBackgroundColor || '${ - this.appConfig?.window?.backgroundColor || '#FFFFFF' - }')`, + this.isTabbarPage + ? `.backgroundColor(this.pageBackgroundColor[index] || '${ + this.appConfig?.window?.backgroundColor || '#FFFFFF' + }')` + : `.backgroundColor(this.pageBackgroundColor || '${ + this.appConfig?.window?.backgroundColor || '#FFFFFF' + }')`, `.height('100%')`, `.width('100%')`, `.title({ builder: this.renderTitle, height: this.getNavHeight() })`, `.titleMode(NavigationTitleMode.Mini)`, - `.hideTitleBar(this.isHideTitleBar)`, + this.isTabbarPage ? `.hideTitleBar(this.isHideTitleBar[index])` : `.hideTitleBar(this.isHideTitleBar)`, `.hideBackButton(true)`, // `.expandSafeArea([SafeAreaType.SYSTEM])`, `.mode(NavigationMode.Stack)` ) } + if (this.isTabbarPage) { + coreBuildCodeArray.forEach((code, idx) => coreBuildCodeArray.splice(idx, 1, `${' '.repeat(6)}${code}`)) + coreBuildCodeArray.unshift( + 'Tabs({', + ` barPosition: this.tabBarPosition !== 'top' ? BarPosition.End : BarPosition.Start,`, + ' controller: this.tabBarController,', + ' index: this.tabBarCurrentIndex,', + '}) {', + ' ForEach(this.tabBarList, (item: ITabBarItem, index) => {', + ' TabContent() {', + ) + coreBuildCodeArray.push( + ` }.tabBar(this.renderTabItemBuilder(index, item))`, + ` }, (item: ITabBarItem, index) => \`\${item.key || index}\`)`, + `}`, + `.vertical(false)`, + `.barMode(BarMode.Fixed)`, + `.barHeight(this.isTabBarShow ? 56 : 0)`, + `.animationDuration(this.tabBarAnimationDuration)`, + `.onChange((index: number) => {`, + ` if (this.tabBarCurrentIndex !== index) {`, + ` callFn(this.page?.onHide, this)`, + ` this.setTabBarCurrentIndex(index)`, + ` }`, + ` this.handlePageAppear()`, + ` callFn(this.page?.onShow, this)`, + `})`, + `.backgroundColor(this.tabBarBackgroundColor)`, + `.padding({`, + ` bottom: px2vp(sysInfo.screenHeight - (sysInfo.safeArea?.bottom || 0)),`, + `})`, + ) + } + return this.transArr2Str(coreBuildCodeArray) } - config.modifyPageMethods = function (this: PageParser, methods, page: TPageMeta) { + config.modifyPageMethods = function (this: PageParser, methods, page: TPageMeta | TPageMeta[]) { const isPure = isPureComp(page) const handlePageAppearMethods = methods.find((item) => item.name === 'handlePageAppear') if (handlePageAppearMethods) { const methodsBodyList = handlePageAppearMethods.body?.split('\n') || [] let insertIndex = methodsBodyList.findIndex((item) => item.startsWith('const params')) - insertIndex = methodsBodyList.findIndex((item) => item.includes('this.node = instance')) + if (this.isTabbarPage) { + insertIndex = methodsBodyList.findIndex((item) => item.includes('this.node[index] = instance')) + } else { + insertIndex = methodsBodyList.findIndex((item) => item.includes('this.node = instance')) + } if (insertIndex >= 0) { methodsBodyList?.splice( insertIndex + 1, 0, ...[ - ' TaroNativeModule.buildTaroNode(this.nodeContent, instance._nid)', - ' this.isReady = true', + this.isTabbarPage + ? ' TaroNativeModule.buildTaroNode(this.nodeContent[index], instance._nid)' + : ' TaroNativeModule.buildTaroNode(this.nodeContent, instance._nid)', + this.isTabbarPage ? ' this.isReady[index] = true' : ' this.isReady = true', isPure ? ` this.currentRouter = Current.router` : null, isPure ? ` eventCenter.on(this.currentRouter?.getEventName('onResize') || '', this.handlePageResizeEvent)` : null, ].filter(isString), @@ -435,16 +535,18 @@ export default function (this: Harmony): PluginOption { methods.unshift( { name: 'getNavHeight', - body: 'return this.isHideTitleBar ? 0 : 48 + this.statusBarHeight', + body: this.isTabbarPage + ? 'return this.isHideTitleBar[this.tabBarCurrentIndex] ? 0 : 48 + this.statusBarHeight[this.tabBarCurrentIndex]' + : 'return this.isHideTitleBar ? 0 : 48 + this.statusBarHeight', }, ) methods.push({ name: 'handlePageDetach', type: 'arrow', body: this.transArr2Str([ - `if (!this.isReady) return`, + this.isTabbarPage ? `if (!this.isReady[this.tabBarCurrentIndex]) return` : `if (!this.isReady) return`, '', - `this.isReady = false`, + this.isTabbarPage ? `this.isReady[this.tabBarCurrentIndex] = false` : `this.isReady = false`, isPure ? `eventCenter.off(this.currentRouter?.getEventName('onResize'), this.handlePageResizeEvent)` : null, diff --git a/packages/taro-platform-harmony-cpp/src/program/vite/render.ts b/packages/taro-platform-harmony-cpp/src/program/vite/render.ts index 7776dcba7d75..429c24f67269 100644 --- a/packages/taro-platform-harmony-cpp/src/program/vite/render.ts +++ b/packages/taro-platform-harmony-cpp/src/program/vite/render.ts @@ -86,7 +86,7 @@ export function initEtsBuilder (router = '') { const modifyPageOrComp = (config: TaroHarmonyPageMeta) => { const oddModifyPageImport = config.modifyPageImport - config.modifyPageImport = function (this: PageParser, importStr: string[], page: TaroHarmonyPageMeta) { + config.modifyPageImport = function (this: PageParser, importStr: string[], page: TaroHarmonyPageMeta | TaroHarmonyPageMeta[]) { if (isFunction(oddModifyPageImport)) { oddModifyPageImport.call(this, importStr, page) } diff --git a/packages/taro-platform-harmony-cpp/src/program/vite/style.ts b/packages/taro-platform-harmony-cpp/src/program/vite/style.ts index c9ac3e457b43..b50205bca3cc 100644 --- a/packages/taro-platform-harmony-cpp/src/program/vite/style.ts +++ b/packages/taro-platform-harmony-cpp/src/program/vite/style.ts @@ -45,17 +45,26 @@ export default function (this: Harmony): PluginOption { const modifyPageOrComp = (config: TaroHarmonyPageMeta) => { const oddModifyPageImport = config.modifyPageImport - config.modifyPageImport = function (this: PageParser, importStr: string[], page: TaroHarmonyPageMeta) { + config.modifyPageImport = function (this: PageParser, importStr: string[], page: TaroHarmonyPageMeta | TaroHarmonyPageMeta[]) { if (isFunction(oddModifyPageImport)) { oddModifyPageImport.call(this, importStr, page) } const { outputRoot = 'dist', sourceRoot = 'src' } = this.buildConfig const targetRoot = path.resolve(this.appPath, sourceRoot) - const styleName = `${page.originName}_style.json` - const styleJsonPath = path.resolve(targetRoot, styleName) - importStr.push(`import styleJson from "${styleJsonPath}"`) - PageMap.set(path.resolve(outputRoot, styleName), pluginContext.getModuleInfo(page.id)) + if (page instanceof Array) { + page.forEach((p, i) => { + const styleName = `${p.originName}_style.json` + const styleJsonPath = path.resolve(targetRoot, styleName) + importStr.push(`import styleJson${i} from "${styleJsonPath}"`) + PageMap.set(path.resolve(outputRoot, styleName), pluginContext.getModuleInfo(p.id)) + }) + } else { + const styleName = `${page.originName}_style.json` + const styleJsonPath = path.resolve(targetRoot, styleName) + importStr.push(`import styleJson from "${styleJsonPath}"`) + PageMap.set(path.resolve(outputRoot, styleName), pluginContext.getModuleInfo(page.id)) + } } } compiler?.pages?.forEach?.(modifyPageOrComp)