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

NervJS · Nov 2, 2023 · a43771e · a43771e
1 parent 2f8c864
commit a43771e
Show file tree

Hide file tree

Showing 15 changed files with 168 additions and 30 deletions.
diff --git a/packages/shared/src/runtime-hooks.ts b/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),

diff --git a/packages/shared/src/template.ts b/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')}}}" />`
 

diff --git a/packages/taro-alipay/src/components-react.ts b/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'
diff --git a/packages/taro-alipay/src/components.ts b/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: '',
+  },
 }
diff --git a/packages/taro-alipay/src/index.ts b/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}

diff --git a/packages/taro-alipay/src/runtime-utils.ts b/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'
+      }
+    }
+  },
 }
diff --git a/packages/taro-alipay/src/template.ts b/packages/taro-alipay/src/template.ts
@@ -124,4 +124,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.miniComponents[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
+  }
 }
diff --git a/packages/taro-runtime/src/dom/document.ts b/packages/taro-runtime/src/dom/document.ts
@@ -1,4 +1,4 @@
-import { controlledComponent, isUndefined } from '@tarojs/shared'
+import { controlledComponent, isUndefined, toCamelCase } from '@tarojs/shared'
 
 import {
   A,
@@ -15,6 +15,7 @@ import { TaroRootElement } from '../dom/root'
 import { TaroText } from '../dom/text'
 import env from '../env'
 import { AnchorElement } from './anchor-element'
+import { TransferElement } from './transfer'
 
 export class TaroDocument extends TaroElement {
   public documentElement: TaroElement
@@ -42,6 +43,10 @@ export class TaroDocument extends TaroElement {
       case nodeName === A:
         element = new AnchorElement()
         break
+      case nodeName === 'page-meta':
+      case nodeName === 'navigation-bar':
+        element = new TransferElement(toCamelCase(nodeName))
+        break
       default:
         element = new TaroElement()
         break

diff --git a/packages/taro-runtime/src/dom/transfer.ts b/packages/taro-runtime/src/dom/transfer.ts
@@ -0,0 +1,13 @@
+import { TaroElement } from './element'
+
+export class TransferElement extends TaroElement {
+  public isTransferElement = true
+
+  constructor (public dataName: string) {
+    super()
+  }
+
+  public get _path () {
+    return this.dataName
+  }
+}
diff --git a/packages/taro-runtime/src/hydrate.ts b/packages/taro-runtime/src/hydrate.ts
@@ -112,5 +112,7 @@ export function hydrate (node: TaroElement | TaroText): MiniData {
     }
   }
 
-  return data
+  const resData = hooks.call('transferHydrateData', data, node, componentAlias)
+
+  return resData || data
 }
diff --git a/packages/taro-weapp/src/components.ts b/packages/taro-weapp/src/components.ts
@@ -347,7 +347,7 @@ export const components = {
   NavigationBar: {
     title: _empty,
     loading: _false,
-    'front-color': _empty,
+    'front-color': "'#000000'",
     'background-color': _empty,
     'color-animation-duration': _zero,
     'color-animation-timing-func': "'linear'"
@@ -357,10 +357,12 @@ export const components = {
     'background-color': _empty,
     'background-color-top': _empty,
     'background-color-bottom': _empty,
+    'root-background-color': _empty,
     'scroll-top': "''",
     'scroll-duration': '300',
     'page-style': "''",
     'root-font-size': "''",
+    'page-orientation': "''",
     bindResize: _empty,
     bindScroll: _empty,
     bindScrollDone: _empty

diff --git a/packages/taro-weapp/src/runtime-utils.ts b/packages/taro-weapp/src/runtime-utils.ts
@@ -1,5 +1,9 @@
+import { Shortcuts, toCamelCase } from '@tarojs/shared'
+
 import { initNativeApi } from './apis'
 
+declare const getCurrentPages: any
+
 export { initNativeApi }
 export * from './apis-list'
 export * from './components'
@@ -11,5 +15,19 @@ export const hostConfig = {
       methods.push('onSaveExitState')
     }
     return config
-  }
+  },
+  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'
+      }
+    }
+  },
 }
diff --git a/packages/taro-weapp/src/template.ts b/packages/taro-weapp/src/template.ts
@@ -88,4 +88,31 @@ export class Template extends UnRecursiveTemplate {
 
     return res
   }
+
+  buildPageTemplate = (baseTempPath: string, page) => {
+    let pageMetaTemplate = ''
+    const pageConfig = page?.content
+
+    if (pageConfig?.enablePageMeta) {
+      const getComponentAttrs = (componentName: string, dataPath: string) => {
+        return Object.entries(this.miniComponents[componentName]).reduce((sum, [key, value]) => {
+          sum +=`${key}="${value === 'eh' ? value : `{{${value.replace('i.', dataPath)}}}`}" `
+          return sum
+        }, '')
+      }
+      const pageMetaAttrs = getComponentAttrs('page-meta', 'pageMeta.')
+      const navigationBarAttrs = getComponentAttrs('navigation-bar', 'navigationBar.')
+
+      pageMetaTemplate = `
+<wxs module="xs" src="${baseTempPath.replace('base.wxml', 'utils.wxs')}" />
+<page-meta data-sid="{{pageMeta.sid}}" ${pageMetaAttrs}>
+  <navigation-bar ${navigationBarAttrs}/>
+</page-meta>`
+    }
+
+    const template = `<import src="${baseTempPath}"/>${pageMetaTemplate}
+<template is="taro_tmpl" data="{{${this.dataKeymap('root:root')}}}" />`
+
+    return template
+  }
 }