DEV Community

kouwei qing
kouwei qing

Posted on

Web Memory Exception, Web Height Issue, Image Press Effect, Loading HTML in Sandbox, Sensing Routing Return Parameters

#harmonyosnext

[Daily HarmonyOS Knowledge] Web Memory Exception, Web Height Issue, Image Press Effect, Loading HTML in Sandbox, Sensing Routing Return Parameters

1. HarmonyOS Web memory exception: Each time a new interface is entered, loading Web increases memory by over 100M. Repeatedly creating Web components may cause ANR.

2. When a HarmonyOS Scroll embeds a Web component, the Web component becomes excessively tall if its height is not specified, but displays normally without Scroll.

  • For nested scrolling of Web components, refer to: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-nested-scrolling-V5

    Typical application scenario: Multiple independent scrollable areas on a page. Scrolling the Web area drives other scrollable areas to achieve a smooth scrolling experience.

  • For a Web component embedded in a scrollable container (Scroll, List, etc.), handle scrolling gestures by using the nestedScroll property of the ArkUI framework's NestedScrollMode enum. This allows nested scrolling between the Web component and the ArkUI scrollable container.

    • nestedScroll accepts a NestedScrollOptions object with scrollForward and scrollBackward properties, each of type NestedScrollMode.
    • When a Web component is nested in multiple scrollable containers, the unconsumed offset and speed in the same direction as the parent component are passed to the nearest parent component with the same direction, enabling continuous scrolling.

  • Set the Web layout mode with layoutMode:

    Reference link: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#layoutmode11

    Currently supported modes:

    • WebLayoutMode.NONE (follows system layout)
    • WebLayoutMode.FIT_CONTENT (adaptive height based on the front-end page)

Limitations of WebLayoutMode.FIT_CONTENT:

  • If the Web component's width or length exceeds 7680px, specify RenderMode.SYNC_RENDER when creating the component to avoid a white screen.
  • layoutMode cannot be dynamically switched after creation.
  • Width/height specifications:
    • RenderMode.SYNC_RENDER: ≤ 500,000px each
    • RenderMode.ASYNC_RENDER: ≤ 7680px each
  • Frequent changes to page width/height trigger re-layout, affecting performance.
  • Waterfall layouts (loading more content when scrolling to the bottom) are not supported.
  • Only height adaptation is supported (width adaptation is not supported).
  • The component height cannot be modified via the height property.

3. How to implement image press effects in HarmonyOS?

Set the resizable property to achieve image stretching effects.

Reference: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-image-V5#ZH-CN_TOPIC_0000001930756873__

4. How to load local sandbox HTML in HarmonyOS (under cross-origin resolution)?

Set the Web component's URL to 'file://' + this.context.filesDir + '/index.html'.

For methods to obtain the application's file sandbox path, refer to: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/application-context-stage-V5

5. How can in-page components in HarmonyOS sense routing return parameters?

Top comments (0)