@tarojs/plugin-platform-harmony-ets 4.0.0-beta.17 → 4.0.0-beta.19

package/dist/components-harmony-ets/scrollView.ets

@@ -2,6 +2,7 @@ import { eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBL
 
 import commonStyleModify from './style'
 import PseduoChildren from './pseudo'
+import { createLazyChildren } from './render'
 import { FlexManager } from './utils/FlexManager'
 import { TOUCH_EVENT_MAP } from './utils/constant/event'
 import { getNodeThresholds, getNormalAttributes, shouldBindEvent } from './utils/helper'
@@ -82,51 +83,61 @@ export default struct TaroScrollView {
   @ObjectLink node: TaroScrollViewElement
 
   build () {
-    Scroll(this.node.scroller) {
-      if (this.node._attrs.scrollX) {
-        Row() {
-          PseduoChildren(this.node)
+    if (this.node.hmStyle?.display !== 'none') {
+      Scroll(this.node.scroller) {
+        if (this.node._attrs.scrollX) {
+          Row() {
+            if (this.node._pseudo_before || this.node._pseudo_after) {
+              PseduoChildren(this.node)
+            } else {
+              createLazyChildren(this.node)
+            }
+          }
+          .attributeModifier(commonStyleModify.setNode(this.node))
+          .rowAttrs(getNormalAttributes(this.node))
+          .width(null)
+          .onAreaChange(shouldBindEvent((_: Area, areaResult: Area) => {
+            this.node._nodeInfo._scroll = areaResult
+          }, this.node, ['scroll', 'scrollstart', 'scrollend']))
+          .alignItems(FlexManager.flexOptions(this.node).alignItems as VerticalAlign)
+          .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
+          .flexGrow(0).flexShrink(0)
+        } else {
+          Column() {
+            if (this.node._pseudo_before || this.node._pseudo_after) {
+              PseduoChildren(this.node)
+            } else {
+              createLazyChildren(this.node)
+            }
+          }
+          .attributeModifier(commonStyleModify.setNode(this.node))
+          .columnAttrs(getNormalAttributes(this.node))
+          .height(null)
+          .alignItems(HorizontalAlign.Start)
+          .onAreaChange(shouldBindEvent((_: Area, areaResult: Area) => {
+            this.node._nodeInfo._scroll = areaResult
+          }, this.node, ['scroll', 'scrollstart', 'scrollend']))
+          .alignItems(FlexManager.flexOptions(this.node).alignItems as HorizontalAlign)
+          .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
+          .flexGrow(0).flexShrink(0)
         }
-        .attributeModifier(commonStyleModify.setNode(this.node))
-        .rowAttrs(getNormalAttributes(this.node))
-        .width(null)
-        .onAreaChange(shouldBindEvent((_: Area, areaResult: Area) => {
-          this.node._nodeInfo._scroll = areaResult
-        }, this.node, ['scroll', 'scrollstart', 'scrollend']))
-        .alignItems(FlexManager.flexOptions(this.node).alignItems as VerticalAlign)
-        .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
-        .flexGrow(0).flexShrink(0)
-      } else {
-        Column() {
-          PseduoChildren(this.node)
-        }
-        .attributeModifier(commonStyleModify.setNode(this.node))
-        .columnAttrs(getNormalAttributes(this.node))
-        .height(null)
-        .alignItems(HorizontalAlign.Start)
-        .onAreaChange(shouldBindEvent((_: Area, areaResult: Area) => {
-          this.node._nodeInfo._scroll = areaResult
-        }, this.node, ['scroll', 'scrollstart', 'scrollend']))
-        .alignItems(FlexManager.flexOptions(this.node).alignItems as HorizontalAlign)
-        .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
-        .flexGrow(0).flexShrink(0)
       }
+      .width(getNormalAttributes(this.node).width)
+      .height(getNormalAttributes(this.node).height)
+      .flexGrow(getNormalAttributes(this.node).flexGrow)
+      .flexShrink(getNormalAttributes(this.node).flexShrink)
+      .scrollable(getScrollable(this.node))
+      .scrollBar(getAttributes(this.node).scrollBar)
+      .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+      .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node), this.node, TOUCH_EVENT_MAP.values()))
+      .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
+        this.node._nodeInfo.areaInfo = res[1]
+      }))
+      .onScroll(shouldBindEvent(() => { handleScrollEvent(this.node, 'scroll') }, this.node, ['scroll']))
+      .onScrollStart(shouldBindEvent(() => { handleScrollEvent(this.node, 'scrollstart') }, this.node, ['scrollstart']))
+      .onScrollStop(shouldBindEvent(() => { handleScrollEvent(this.node, 'scrollend') }, this.node, ['scrollend']))
+      .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+      .onReachEnd(shouldBindEvent(() => { handleScrollEvent(this.node, 'scrolltolower') }, this.node, ['scrolltolower']))
     }
-    .width(getNormalAttributes(this.node).width)
-    .height(getNormalAttributes(this.node).height)
-    .flexGrow(getNormalAttributes(this.node).flexGrow)
-    .flexShrink(getNormalAttributes(this.node).flexShrink)
-    .scrollable(getScrollable(this.node))
-    .scrollBar(getAttributes(this.node).scrollBar)
-    .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
-    .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node), this.node, TOUCH_EVENT_MAP.values()))
-    .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
-      this.node._nodeInfo.areaInfo = res[1]
-    }))
-    .onScroll(shouldBindEvent(() => { handleScrollEvent(this.node, 'scroll') }, this.node, ['scroll']))
-    .onScrollStart(shouldBindEvent(() => { handleScrollEvent(this.node, 'scrollstart') }, this.node, ['scrollstart']))
-    .onScrollStop(shouldBindEvent(() => { handleScrollEvent(this.node, 'scrollend') }, this.node, ['scrollend']))
-    .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
-    .onReachEnd(shouldBindEvent(() => { handleScrollEvent(this.node, 'scrolltolower') }, this.node, ['scrolltolower']))
   }
 }

package/dist/components-harmony-ets/slider.ets

@@ -94,7 +94,7 @@ export default struct TaroSlider {
   }
 
   build() {
-    if (this.node) {
+    if (this.node && this.node.hmStyle?.display !== 'none') {
       if (!!this.node._attrs.showValue) {
         Row() {
           this.createSlider(this.node)

package/dist/components-harmony-ets/style.ets

@@ -1,5 +1,6 @@
 import type { HarmonyStyle, TaroElement, TaroStyleType } from '@tarojs/runtime'
 import { isUndefined } from '../shared'
+import { computeBackgroundPosition } from './utils'
 import { getNormalAttributes, getStyle } from './utils/helper'
 
 function getTop (node: TaroElement): Length | number {
@@ -101,7 +102,15 @@ function setNormalAttributeIntoInstance(instance: CommonAttribute, style: TaroSt
     instance.backgroundImageSize(style.backgroundSize)
   }
   if (!isUndefined(style.backgroundPosition)) {
-    instance.backgroundImagePosition(style.backgroundPosition)
+    if (typeof style.backgroundPosition !== 'number') {
+      let pos = computeBackgroundPosition(style)
+      instance.backgroundImagePosition({
+        x: pos.offsetX,
+        y: pos.offsetY,
+      })
+    } else {
+      instance.backgroundImagePosition(style.backgroundPosition)
+    }
   }
   if (!isUndefined(style.borderTopStyle) || !isUndefined(style.borderRightStyle) || !isUndefined(style.borderBottomStyle) || !isUndefined(style.borderLeftStyle)) {
     instance.borderStyle({
@@ -147,12 +156,37 @@ function setNormalAttributeIntoInstance(instance: CommonAttribute, style: TaroSt
   if (!isUndefined(style.overflow)) {
     instance.clip(style.overflow)
   }
-  if (!isUndefined(style.transformOrigin)) {
-    instance.rotate({ centerX: style.transformOrigin.x, centerY: style.transformOrigin.y, angle: 0 })
-    instance.scale({ centerX: style.transformOrigin.x, centerY: style.transformOrigin.y })
-  }
+  // if (!isUndefined(style.transformOrigin)) {
+  //   instance.rotate({ centerX: style.transformOrigin.x, centerY: style.transformOrigin.y, angle: 0 })
+  //   instance.scale({ centerX: style.transformOrigin.x, centerY: style.transformOrigin.y })
+  // }
   if (!isUndefined(style.transform)) {
-    instance.transform(style.transform)
+    if (style.transform.Translate) {
+      instance.translate({
+        x: style.transform.Translate.x || 0,
+        y: style.transform.Translate.y || 0,
+        z: style.transform.Translate.z || 0,
+      })
+    }
+    if (style.transform.Scale) {
+      instance.scale({
+        x: style.transform.Scale.x || 0,
+        y: style.transform.Scale.y || 0,
+        z: style.transform.Scale.z || 0,
+        centerX: style.transformOrigin?.x,
+        centerY: style.transformOrigin?.y,
+      })
+    }
+    if (style.transform.Rotate) {
+      instance.rotate({
+        x: style.transform.Rotate.x || 0,
+        y: style.transform.Rotate.y || 0,
+        z: style.transform.Rotate.z || 0,
+        centerX: style.transformOrigin?.x,
+        centerY: style.transformOrigin?.y,
+        angle: 0
+      })
+    }
   }
   if (style.position === 'absolute' || style.position === 'fixed') {
     instance.position({

package/dist/components-harmony-ets/swiper.ets

@@ -45,23 +45,25 @@ export default struct TaroSwiper {
   @ObjectLink node: TaroSwiperElement
 
   build () {
-    Swiper(this.node.controller) {
-      createLazyChildren(this.node)
+    if (this.node.hmStyle?.display !== 'none') {
+      Swiper(this.node.controller) {
+        createLazyChildren(this.node)
+      }
+        .attributeModifier(commonStyleModify.setNode(this.node))
+        .swiperAttr(getSwiperAttributes(this.node))
+        .indicatorStyle({
+          color: this.node.getAttribute('indicatorColor'),
+          selectedColor:  this.node.getAttribute('indicatorActiveColor')
+        })
+        .onChange((index: number) => {
+          const event: TaroEvent = createTaroEvent('change', { detail: { current: index } }, this.node)
+          eventHandler(event, 'change', this.node)
+        })
+        .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+        .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
+          this.node._nodeInfo.areaInfo = res[1]
+        }))
+        .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
     }
-      .attributeModifier(commonStyleModify.setNode(this.node))
-      .swiperAttr(getSwiperAttributes(this.node))
-      .indicatorStyle({
-        color: this.node.getAttribute('indicatorColor'),
-        selectedColor:  this.node.getAttribute('indicatorActiveColor')
-      })
-      .onChange((index: number) => {
-        const event: TaroEvent = createTaroEvent('change', { detail: { current: index } }, this.node)
-        eventHandler(event, 'change', this.node)
-      })
-      .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
-      .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
-        this.node._nodeInfo.areaInfo = res[1]
-      }))
-      .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
   }
 }

package/dist/components-harmony-ets/switch.ets

@@ -38,7 +38,7 @@ export default struct TaroSwitch {
   }
 
   build () {
-    if (this.node) {
+    if (this.node && this.node.hmStyle?.display !== 'none') {
       Toggle({
         type: this.node._attrs.type !== 'checkbox' ? ToggleType.Switch : ToggleType.Checkbox,
         isOn: this.node.checked,

package/dist/components-harmony-ets/text.ets

@@ -17,7 +17,6 @@ function textNormalFontStyle (style: TaroStyleType) {
   .fontWeight(style.fontWeight)
   .fontStyle(style.fontStyle)
   .fontFamily(style.fontFamily)
-  .lineHeight(style.lineHeight)
   .decoration({
     type: style.textDecoration,
     color: style.color
@@ -27,9 +26,11 @@ function textNormalFontStyle (style: TaroStyleType) {
 @Extend(Text)
 function textSpecialFontStyle(attr: TaroTextStyleType) {
   .textAlign(attr.textAlign)
+  .align(attr.verticalAlign)
   .textOverflow(attr.textOverflow)
   .maxLines(attr.WebkitLineClamp)
   .letterSpacing(attr.letterSpacing)
+  .lineHeight(attr.lineHeight)
 }
 
 function getButtonFontSize (node: TaroButtonElement) {
@@ -60,15 +61,17 @@ export default struct TaroText {
         }
       }
     } else {
-      Text(this.node.textContent)
-      .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
-      .attributeModifier(commonStyleModify.setNode(this.node))
-      .textNormalFontStyle(getNormalAttributes(this.node))
-      .textSpecialFontStyle(getFontAttributes(this.node))
-      .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
-      .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
-        this.node._nodeInfo.areaInfo = res[1]
-      }))
+      if (this.node.hmStyle?.display !== 'none') {
+        Text(this.node.textContent)
+        .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+        .attributeModifier(commonStyleModify.setNode(this.node))
+        .textNormalFontStyle(getNormalAttributes(this.node))
+        .textSpecialFontStyle(getFontAttributes(this.node))
+        .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+        .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
+          this.node._nodeInfo.areaInfo = res[1]
+        }))
+      }
     }
   }
 }

package/dist/components-harmony-ets/textArea.ets

@@ -45,7 +45,7 @@ export default struct TaroTextArea {
   }
 
   build () {
-    if (this.node) {
+    if (this.node && this.node.hmStyle?.display !== 'none') {
       TextArea({ text: this.value, placeholder: this.node._attrs?.placeholder || '', controller: this.node.controller })
         .key(this.node._nid)
         .maxLength(Number(this.node._attrs?.maxlength) || null)

package/dist/components-harmony-ets/utils/index.ts

@@ -1,5 +1,8 @@
 import { convertNumber2VP } from '@tarojs/runtime'
-import { isNumber } from '@tarojs/shared'
+import { isNumber, isUndefined } from '@tarojs/shared'
+
+import type { RichTextProps } from '@tarojs/components/types/RichText'
+import type { TaroRichTextElement } from '@tarojs/runtime'
 
 export function getSingleSelector(range, rangeKey): any[] {
   return range.map((data) => data[rangeKey])
@@ -81,3 +84,53 @@ export function getNodeMarginOrPaddingData (dataValue: string) {
     }
   })
 }
+
+export function generateText (node: TaroRichTextElement): string {
+  return parseHtmlNode(node._attrs.nodes || '')
+}
+
+// 将nodeTree转换成harmony需要的string结构
+function nodeToHtml(node: RichTextProps.Text | RichTextProps.HTMLElement): string {
+  if (node.type === 'text') {
+    return node.text
+  }
+  if (node.attrs) {
+    const attributes = Object.entries(node.attrs)
+      .map((item: [string, string]) => `${item[0]}="${item[1]}"`)
+      .join(' ')
+    const childrenHtml: string = typeof node.children === 'string' ? node.children : (node.children || []).map((child: RichTextProps.Text | RichTextProps.HTMLElement) => nodeToHtml(child)).join('')
+    return `<${node.name}${attributes ? ' ' + attributes : ''}>${childrenHtml}</${node.name}>`
+  }
+  return ''
+}
+
+function parseHtmlNode (nodes: Array<RichTextProps.Text | RichTextProps.HTMLElement> | string) {
+  return typeof nodes === 'string' ? nodes: `<div>${nodes.map(node => nodeToHtml(node)).join('')}</div>`
+}
+
+// 背景偏移算法：https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-position
+export function computeBackgroundPosition(style) {
+  let offsetX = 0
+  let offsetY = 0
+  if (style.backgroundSize && typeof style.backgroundSize !== 'number') {
+    if (!isUndefined(style.backgroundSize.width) && style.width) {
+      if (typeof style.backgroundPosition.x === 'string' && style.backgroundPosition.x.indexOf('%') > 0) {
+        // (container width - image width) * (position x%) = (x offset value)
+        const width = parseFloat(style.width)
+        const bgWidth = parseFloat(style.backgroundSize.width)
+        const bgOffsetX = parseFloat(style.backgroundPosition.x)
+        offsetX = Number((width - bgWidth) * (bgOffsetX) / 100) || 0
+      }
+    }
+    if (!isUndefined(style.backgroundSize.height) && style.height) {
+      if (typeof style.backgroundPosition.y === 'string' && style.backgroundPosition.y.indexOf('%') > 0) {
+        // (container height - image height) * (position y%) = (y offset value)
+        const height = parseFloat(style.height)
+        const bgHeight = parseFloat(style.backgroundSize.height)
+        const bgOffsetY = parseFloat(style.backgroundPosition.y)
+        offsetY = Number((height - bgHeight) * (bgOffsetY) / 100) || 0
+      }
+    }
+  }
+  return { offsetX: isNaN(offsetX) ? style.backgroundPosition.x : offsetX, offsetY: isNaN(offsetY) ? style.backgroundPosition.y: offsetY }
+}

package/dist/components-harmony-ets/utils/styles.ets

@@ -13,12 +13,19 @@ export function getFontAttributes (node: TaroElement): TaroTextStyleType {
 
   if (!hmStyle) return {}
 
+  let lineHeight = hmStyle.lineHeight
+  if (!isUndefined(hmStyle.verticalAlign)) {
+    lineHeight = 0
+  }
+
   const attributes: TaroAny = {
     WebkitLineClamp: attrs.maxLines || hmStyle.WebkitLineClamp || Infinity,
     // 已做处理的属性
     letterSpacing: hmStyle.letterSpacing,
     textAlign: hmStyle.textAlign,
-    textOverflow: hmStyle.textOverflow
+    textOverflow: hmStyle.textOverflow,
+    verticalAlign: hmStyle.verticalAlign,
+    lineHeight: lineHeight
   }
 
   return attributes
@@ -131,7 +138,6 @@ export function getStyle(hmStyle: HarmonyStyle): TaroStyleType {
     fontStyle: hmStyle.fontStyle,
     fontWeight: hmStyle.fontWeight,
     fontFamily: hmStyle.fontFamily || TEXT_DEFAULT_STYLE.FONT_FAMILY,
-    lineHeight: hmStyle.lineHeight,
     textDecoration: hmStyle.textDecoration,
     // 其他
     overflow: hmStyle.overflow,

package/dist/components-harmony-ets/video.ets

@@ -83,7 +83,8 @@ export default struct TaroVideo {
   @ObjectLink node: TaroVideoElement
 
   build () {
-    Video(getVideoData(this.node))
+    if (this.node.hmStyle?.display !== 'none') {
+      Video(getVideoData(this.node))
       .attributeModifier(commonStyleModify.setNode(this.node))
       .props(getVideoProps(this.node))
       .aspectRatio(4 / 3)
@@ -102,6 +103,7 @@ export default struct TaroVideo {
         this.node._nodeInfo.areaInfo = res[1]
       }))
       .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+    }
   }
 
 }

package/dist/components-harmony-ets/view.ets

@@ -2,6 +2,7 @@ import { eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBL
 
 import commonStyleModify from './style'
 import PseduoChildren from './pseudo'
+import { createLazyChildren } from './render'
 import { TOUCH_EVENT_MAP } from './utils/constant/event'
 import { FlexManager } from './utils/flexManager'
 import { getNodeThresholds, getNormalAttributes, shouldBindEvent } from './utils/helper'
@@ -33,34 +34,44 @@ export default struct TaroView {
   @ObjectLink node: TaroViewElement
 
   build () {
-    if (FlexManager.isFlexNode(this.node) && FlexManager.flexOptions(this.node).direction !== FlexDirection.Column) {
-      Row() {
-        PseduoChildren(this.node)
+    if (this.node.hmStyle?.display !== 'none') {
+      if (FlexManager.isFlexNode(this.node) && FlexManager.flexOptions(this.node).direction !== FlexDirection.Column) {
+        Row() {
+          if (this.node._pseudo_before || this.node._pseudo_after) {
+            PseduoChildren(this.node)
+          } else {
+            createLazyChildren(this.node)
+          }
+        }
+        .attributeModifier(commonStyleModify.setNode(this.node))
+        .rowAttrs(getNormalAttributes(this.node))
+        .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+        .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node), this.node, TOUCH_EVENT_MAP.values()))
+        .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
+          this.node._nodeInfo.areaInfo = res[1]
+        }))
+        .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+        .alignItems(FlexManager.flexOptions(this.node).alignItems as VerticalAlign)
+        .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
+      } else {
+        Column() {
+          if (this.node._pseudo_before || this.node._pseudo_after) {
+            PseduoChildren(this.node)
+          } else {
+            createLazyChildren(this.node)
+          }
+        }
+        .attributeModifier(commonStyleModify.setNode(this.node))
+        .columnAttrs(getNormalAttributes(this.node))
+        .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+        .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node), this.node, TOUCH_EVENT_MAP.values()))
+        .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
+          this.node._nodeInfo.areaInfo = res[1]
+        }))
+        .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+        .alignItems(FlexManager.flexOptions(this.node).alignItems as HorizontalAlign)
+        .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
       }
-      .attributeModifier(commonStyleModify.setNode(this.node))
-      .rowAttrs(getNormalAttributes(this.node))
-      .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
-      .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node), this.node, TOUCH_EVENT_MAP.values()))
-      .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
-        this.node._nodeInfo.areaInfo = res[1]
-      }))
-      .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
-      .alignItems(FlexManager.flexOptions(this.node).alignItems as VerticalAlign)
-      .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
-    } else {
-      Column() {
-        PseduoChildren(this.node)
-      }
-      .attributeModifier(commonStyleModify.setNode(this.node))
-      .columnAttrs(getNormalAttributes(this.node))
-      .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
-      .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node), this.node, TOUCH_EVENT_MAP.values()))
-      .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
-        this.node._nodeInfo.areaInfo = res[1]
-      }))
-      .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
-      .alignItems(FlexManager.flexOptions(this.node).alignItems as HorizontalAlign)
-      .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
     }
   }
 }

package/dist/components-harmony-ets/webView.ets

@@ -1,9 +1,9 @@
 import { AREA_CHANGE_EVENT_NAME, eventHandler, getComponentEventCallback, VISIBLE_CHANGE_EVENT_NAME, createTaroEvent } from '@tarojs/runtime'
 
 import commonStyleModify from './style'
-import { getNormalAttributes, shouldBindEvent, getNodeThresholds } from './utils/helper'
+import { shouldBindEvent, getNodeThresholds } from './utils/helper'
 
-import type { TaroAny, TaroWebViewElement, TaroStyleType, TaroEvent } from '@tarojs/runtime'
+import type { TaroAny, TaroWebViewElement, TaroEvent } from '@tarojs/runtime'
 
 interface IPageLoad {
   url: string
@@ -19,37 +19,38 @@ export default struct TaroWebView {
   @ObjectLink node: TaroWebViewElement
 
   build () {
-    Web({ src: this.node._attrs.src, controller: this.node.controller })
-      .attributeModifier(commonStyleModify.setNode(this.node))
-      .onPageEnd((e: IPageLoad) => {
-        // 1. 创建消息端口
-        this.node.ports = this.node.controller.createWebMessagePorts(true)
-        // 2. 发送端口1到HTML5
-        this.node.controller.postMessage('init_web_messageport', [this.node.ports[1]], '*');
-        // 3. 保存端口0到本地
-        this.node.nativePort = this.node.ports[0]
-        // 4. 设置回调函数
-        this.node.nativePort.onMessageEventExt((result) => {
-          const message = this.node.handleMessageFromWeb(result)
-          const messageEvent: TaroEvent = createTaroEvent('message', { detail: { data: message } }, this.node)
-
-          eventHandler(messageEvent, 'message', this.node)
+    if (this.node.hmStyle?.display !== 'none') {
+      Web({ src: this.node._attrs.src, controller: this.node.controller })
+        .attributeModifier(commonStyleModify.setNode(this.node))
+        .onPageEnd((e: IPageLoad) => {
+          // 1. 创建消息端口
+          this.node.ports = this.node.controller.createWebMessagePorts(true)
+          // 2. 发送端口1到HTML5
+          this.node.controller.postMessage('init_web_messageport', [this.node.ports[1]], '*');
+          // 3. 保存端口0到本地
+          this.node.nativePort = this.node.ports[0]
+          // 4. 设置回调函数
+          this.node.nativePort.onMessageEventExt((result) => {
+            const message = this.node.handleMessageFromWeb(result)
+            const messageEvent: TaroEvent = createTaroEvent('message', { detail: { data: message } }, this.node)
+
+            eventHandler(messageEvent, 'message', this.node)
+          })
+
+          const onLoadEvent: TaroEvent = createTaroEvent('load', { detail: { src: this.node._attrs.src } }, this.node)
+
+          eventHandler(onLoadEvent, 'load', this.node)
         })
-
-        const onLoadEvent: TaroEvent = createTaroEvent('load', { detail: { src: this.node._attrs.src } }, this.node)
-
-        eventHandler(onLoadEvent, 'load', this.node)
-      })
-      .onErrorReceive(shouldBindEvent((e: IError) => {
-        const event: TaroEvent = createTaroEvent('error', { detail: { url: this.node._attrs.src, fullUrl: e.request.getRequestUrl() } }, this.node)
-        
-        eventHandler(event, 'error', this.node)
-      }, this.node, ['error']))
-      .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
-      .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
-        this.node._nodeInfo.areaInfo = res[1]
-      }))
-      .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
-  
+        .onErrorReceive(shouldBindEvent((e: IError) => {
+          const event: TaroEvent = createTaroEvent('error', { detail: { url: this.node._attrs.src, fullUrl: e.request.getRequestUrl() } }, this.node)
+          
+          eventHandler(event, 'error', this.node)
+        }, this.node, ['error']))
+        .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+        .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
+          this.node._nodeInfo.areaInfo = res[1]
+        }))
+        .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+    }
   }
 }