最近工作需要，要将服务器返回的HTML字符串显示出来，这种活自然想到用Web组件去加载就好了。但是发现，Web没法直接加载HTML字符串。一番网上搜索研究，终于让我实现了Web组件加载HTML字符串，有需要还可以通过replace方法去替换需要的字符串

完整代码：

import { util } from '@kit.ArkTS'
import { webview } from '@kit.ArkWeb'

@Entry
@Component
struct Index {

  webController: webview.WebviewController = new webview.WebviewController()
  @State htmlStr: string = ''
  async aboutToAppear(): Promise<void> {
    //
    const uiContext = this.getUIContext().getHostContext() // 获取当前应用Ability的Context
    const htmlData = await uiContext?.resourceManager.getRawFileContent("index.html") // 读取资源文件中html ,字节数据的形式
    const decoder = new util.TextDecoder() // 字节数组解码
    this.htmlStr = decoder.decodeToString(htmlData) // 将字节数据解码为字符串
  }

  build() {
    RelativeContainer() {
      Web({ src: `data:text/html;charset=utf-8,${encodeURIComponent(this.htmlStr)}` , controller: this.webController })
        .width('100%')
        .javaScriptAccess(true)
        .fileAccess(false)
        .layoutMode(WebLayoutMode.NONE)
        .overScrollMode(OverScrollMode.NEVER)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
    }
    .height('100%')
    .width('100%')
  }
}

这里需要在html字符串加上'data:text/html;charset=utf-8,'才能显示出网页

关键问题：需要配置权限

"requestPermissions": [
      {
        "name": 'ohos.permission.INTERNET'
      },
      {
        "name": 'ohos.permission.GET_NETWORK_INFO'
      }
    ]

需要配置网络权限和这个网络信息权限，原因不明，有时候配了，也死活显示不了网页，但过段时间重新打开工程，它又好了，即使删掉这两个权限也能加载，可能有了缓存。

我的开发环境

IDE：DevEco Studio 5.1.0

模拟器：Phone（Harmony OS 5.1.0 API 18）