HarmonyOS 鸿蒙Next自适应宽高的HTML富文本组件如何实现？

HarmonyOS 鸿蒙Next自适应宽高的HTML富文本组件如何实现？ 【设备信息】Mate60
【API版本】Api12
【DevEco Studio版本】5.0.3.910
【问题描述】目前没有好的支持解析html的富文本组件。且能够自适用宽高,这种需求挺多的，有没有什么好的解决方法。自己解析转成span的方式有缺陷，稍微复杂一点就搞不定了。

2 回复

可以参考以下demo：

// xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';
@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();
  data: string =
    "<p><span style=\"background-color: rgb(255, 255, 255);\">规格：</span></p><p><span style=\"background-color: rgb(255, 255, 255); font-size: 48px;\">一盒</span><span style=\"color: rgb(96, 98, 102); background-color: rgb(255, 255, 255); font-size: 48px;\">630ml</span></p><p><span style=\"background-color: rgb(255, 255, 255); font-size: 48px;\">三盒</span><span style=\"color: rgb(96, 98, 102); background-color: rgb(255, 255, 255); font-size: 48px;\">1890ml</span></p><p><span style=\"background-color: rgb(255, 255, 255); font-size: 48px;\">六盒</span><span style=\"color: rgb(96, 98, 102); background-color: rgb(255, 255, 255); font-size: 48px;\">3780ml</span></p>"
  updataContent: string = '<!DOCTYPE html>'
    + '<html lang="en">'
    + '<head> <meta name="viewport" content="width=device-width"> </head>'
    + '<body>'
    + this.data
    + '</body>'
    + '</html>'
  build() {
    Column() {
      Button('loadData')
        .fontSize(20)
        .onClick(() => {
          try {
            this.controller.loadData(this.updataContent, "text/html", "UTF-8", " ", " ");
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
        .border({width:1})
        .layoutMode(WebLayoutMode.FIT_CONTENT)
        .mixedMode(MixedMode.All)
        .defaultFontSize(16) // 设置默认字体
    }
  }
}

这里可以在src放本地H5文件，body为空，加载后高度会被撑开或者这里给Web组件设置height(this.webH)，自定义高度，初始设置‘0’，加载后设置‘auto’，也是加载后被撑开

更多关于HarmonyOS 鸿蒙Next自适应宽高的HTML富文本组件如何实现？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，实现自适应宽高的HTML富文本组件可以通过使用Web组件和Flex布局来实现。首先，使用Web组件加载HTML内容，并通过onPageEnd事件监听页面加载完成。然后，利用JavaScript与Web组件进行通信，获取HTML内容的实际高度。最后，通过动态调整Web组件的高度，使其自适应内容高度。

具体步骤如下：

  1. 创建Web组件：在布局文件中添加Web组件，并设置其id和src属性。
  2. 监听页面加载：通过onPageEnd事件监听HTML页面加载完成。
  3. 获取内容高度：在页面加载完成后，使用JavaScript代码获取HTML内容的实际高度，并通过postMessage方法将高度信息传递给鸿蒙应用。
  4. 动态调整高度：在鸿蒙应用中，通过onMessage事件接收高度信息，并动态调整Web组件的高度。

示例代码片段：

<Web
    id="web"
    src="file:///local/html/index.html"
    onPageEnd="onPageEnd"
    onMessage="onMessage"
/>

function onPageEnd() {
    var script = "window.webkit.messageHandlers.harmony.postMessage(document.body.scrollHeight);";
    this.executeScript({ script: script });
}

function onMessage(event) {
    var height = event.message;
    this.height = height;
}
回到顶部