feat(weapp/alipay): 支持使用 PageMeta 和 NavigationBar 组件，fix #6092

packages/shared/src/runtime-hooks.ts

@@ -210,6 +210,10 @@ type ITaroHooks = {
    * 修改 Taro DOM 序列化数据
    **/
   modifyHydrateData:(data: Record<string, any>) => void
+  /**
+   * 自定义处理 Taro DOM 序列化数据，如使其脱离 data 树
+   */
+  transferHydrateData: (data: Record<string, any>, element, componentsAlias: Record<string, any>) => void
   /**
     * @todo: multi
     * 修改 Taro DOM 序列化数据
@@ -295,6 +299,8 @@ export const hooks = new TaroHooks<ITaroHooks>({
 
   modifyHydrateData: TaroHook(HOOK_TYPE.SINGLE),
 
+  transferHydrateData: TaroHook(HOOK_TYPE.SINGLE),
+
   modifySetAttrPayload: TaroHook(HOOK_TYPE.SINGLE),
 
   modifyRmAttrPayload: TaroHook(HOOK_TYPE.SINGLE),

packages/shared/src/template.ts

@@ -492,7 +492,7 @@ export class BaseTemplate {
     return ''
   }
 
-  public buildPageTemplate = (baseTempPath: string) => {
+  public buildPageTemplate = (baseTempPath: string, _page: { content: Record<string, any>, path: string }) => {
     const template = `<import src="${baseTempPath}"/>
 <template is="taro_tmpl" data="{{${this.dataKeymap('root:root')}}}" />`
 

packages/taro-alipay/src/components-react.ts

@@ -8,3 +8,4 @@ export const ArCamera = 'ar-camera'
 export const PageContainer = 'page-container'
 export const ShareElement = 'share-element'
 export const RootPortal = 'root-portal'
+export const PageMeta = 'page-meta'

packages/taro-alipay/src/components.ts

@@ -189,5 +189,17 @@ export const components = {
   },
   RootPortal: {
     enable: 'true'
-  }
+  },
+  PageMeta: {
+    'background-color': '',
+    'background-color-top': '',
+    'background-color-bottom': '',
+    'root-background-color': '',
+    'scroll-top': "''",
+    'scroll-duration': '300',
+    'page-style': "''",
+    'root-font-size': "''",
+    'page-font-size': "''",
+    bindScroll: '',
+  },
 }

packages/taro-alipay/src/index.ts

@@ -79,7 +79,9 @@ function modifyPageTemplate (ctx: IPluginContext) {
         return ''
       })
       const main = baseXml.replace(/<import-sjs name="xs" from="(.*)utils.sjs" \/>/, function () {
-        return `<import-sjs name="xs" from="${relativePath}utils.sjs" />`
+        return src.includes('<import-sjs name="xs"')
+          ? ''
+          : `<import-sjs name="xs" from="${relativePath}utils.sjs" />`
       })
 
       const res = `${templateCaller}

packages/taro-alipay/src/runtime-utils.ts

@@ -1,3 +1,4 @@
+import { Shortcuts, toCamelCase } from '@tarojs/shared'
 
 import {
   handleSyncApis,
@@ -8,6 +9,7 @@ import {
   transformMeta
 } from './apis'
 
+declare const getCurrentPages: any
 declare const my: any
 
 const BUBBLE_EVENTS = new Set([
@@ -49,5 +51,19 @@ export const hostConfig = {
   },
   isBubbleEvents (eventName) {
     return BUBBLE_EVENTS.has(eventName)
-  }
+  },
+  transferHydrateData (data, element, componentsAlias) {
+    if (element.isTransferElement) {
+      const page = getCurrentPages()[0]
+      data[Shortcuts.NodeName] = element.dataName
+      page.setData({
+        [toCamelCase(data.nn)]: data
+      })
+      return {
+        sid: element.sid,
+        [Shortcuts.Text]: '',
+        [Shortcuts.NodeName]: componentsAlias['#text']?._num || '8'
+      }
+    }
+  },
 }

packages/taro-alipay/src/template.ts

@@ -16,6 +16,8 @@ export class Template extends RecursiveTemplate {
     type: 'alipay'
   }
 
+  transferComponents: Record<string, Record<string, string>> = {}
+
   buildXsTemplate () {
     return '<import-sjs name="xs" from="./utils.sjs" />'
   }
@@ -65,6 +67,10 @@ export class Template extends RecursiveTemplate {
     delete result['slot-view']
     delete result['native-slot']
 
+    // PageMeta & NavigationBar
+    this.transferComponents['page-meta'] = result['page-meta']
+    delete result['page-meta']
+
     return result
   }
 
@@ -124,4 +130,28 @@ export class Template extends RecursiveTemplate {
     return l.filter(function (i) {return i.nn === '${swiperItemAlias}'})
   }`
   }
+
+  buildPageTemplate = (baseTempPath: string, page) => {
+    let pageMetaTemplate = ''
+    const pageConfig = page?.content
+
+    if (pageConfig?.enablePageMeta) {
+      const getComponentAttrs = (componentName: string, dataPath: string) => {
+        return Object.entries(this.transferComponents[componentName]).reduce((sum, [key, value]) => {
+          sum +=`${key}="${value === 'eh' ? value : `{{${value.replace('i.', dataPath)}}}`}" `
+          return sum
+        }, '')
+      }
+      const pageMetaAttrs = getComponentAttrs('page-meta', 'pageMeta.')
+
+      pageMetaTemplate = `
+<import-sjs name="xs" from="${baseTempPath.replace('base.axml', 'utils.sjs')}" />
+<page-meta data-sid="{{pageMeta.sid}}" ${pageMetaAttrs}></page-meta>`
+    }
+
+    const template = `<import src="${baseTempPath}"/>${pageMetaTemplate}
+<template is="taro_tmpl" data="{{${this.dataKeymap('root:root')}}}" />`
+
+    return template
+  }
 }

packages/taro-components/types/NavigationBar.d.ts

@@ -30,6 +30,12 @@ interface NavigationBarProps extends StandardProps {
 }
 /** 页面导航条配置节点，用于指定导航栏的一些属性。只能是 PageMeta 组件内的第一个节点，需要配合它一同使用。
  * 通过这个节点可以获得类似于调用 Taro.setNavigationBarTitle Taro.setNavigationBarColor 等接口调用的效果。
+ *
+ * :::info
+ * Taro v3.6.19 开始支持
+ * 需要配合 PageMeta 组件使用
+ * :::
+ *
  * @classification navig
  * @supported weapp, harmony
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/navigation-bar.html

packages/taro-components/types/PageMeta.d.ts

@@ -80,7 +80,47 @@ declare namespace PageMetaProps {
 }
 /** 页面属性配置节点，用于指定页面的一些属性、监听页面事件。只能是页面内的第一个节点。可以配合 navigation-bar 组件一同使用。
  * 通过这个节点可以获得类似于调用 Taro.setBackgroundTextStyle Taro.setBackgroundColor 等接口调用的效果。
+ *
+ * :::info
+ * Taro v3.6.19 开始支持
+ * 开发者需要在页面配置里添加：`enablePageMeta: true`
+ * :::
+ *
  * @supported weapp, alipay
+ * @example_react
+ * ```tsx
+ * // page.config.ts
+ * export default definePageConfig({ enablePageMeta: true, ... })
+ *
+ * // page.tsx
+ * function Index () {
+ *   return (
+ *     <View>
+ *      <PageMeta
+ *        pageStyle={myPageStyle}
+ *        onScroll={handleScroll}
+ *      >
+ *        <NavigationBar title={title} />
+ *      </PageMeta>
+ *    </View>
+ *   )
+ * }
+ * ```
+ * @example_vue
+ * ```html
+ * <!-- page.config.ts -->
+ * <!-- export default definePageConfig({ enablePageMeta: true, ... }) -->
+ *
+ * <!-- page.vue -->
+ * <template>
+ *   <page-meta
+ *     :page-style="myPageStyle"
+ *     @scroll="handleScroll"
+ *   >
+ *     <navigation-bar :title="title" />
+ *   </page-meta>
+ * </template>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/page-meta.html
  */
 declare const PageMeta: ComponentType<PageMetaProps>