HarmonyOS 鸿蒙Next中 web 组件显示的问题

HarmonyOS 鸿蒙Next中 web 组件显示的问题

Column() {
    Web({ src: '', controller: this.webController, renderMode: RenderMode.SYNC_RENDER })
      .margin({ top: 10 })
        .onControllerAttached(() => {
          let data =
            '1. 啊啊啊啊啊啊<br/>2. 吧吧吧吧吧<span style=\"color:#F7931C\">颜色</span>错错错错错错<br/>3. 大大大大大大大付付付付付付付哥哥哥哥哥哥哥哥哈哈哈'
          this.webController.loadData(data,
            "text/html",
            "UTF-8", " ", " ");
        })
      .defaultFontSize(45)
      .zoomAccess(false)
      .layoutMode(WebLayoutMode.FIT_CONTENT)
      .javaScriptAccess(true)
      .width('100%')
  }
  .margin(16)
  .padding(16)
  .borderRadius(8)
  .backgroundColor($r('app.color.color_white'))
  .justifyContent(FlexAlign.Start)
  .alignItems(HorizontalAlign.Start)

图片

看代码和效果图，有两个问题。
1，web设置了高度自设，为什么底部留白还那么高？

2，为什么设置的默认字体大小defaultFontSize，和Text的fontSize差距挺大的。同一个值，web的字体就小很多了。


更多关于HarmonyOS 鸿蒙Next中 web 组件显示的问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

或者将你的这段代码改为

build() {
  Column() {
    Web({ src: '', controller: this.webController, renderMode: RenderMode.SYNC_RENDER })
      .margin({ top: 10 })
      .onControllerAttached(() => {
        let data =
          '<!DOCTYPE html>\n' +
            '<html>\n' +
            '<head>\n' +
            '    <meta charset="UTF-8">\n' +
            '    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n' +
            '</head>\n' +
            '<body>\n' +
            '    <p>Hello World</p>\n' +
            '</body>\n' +
            '</html>'
        this.webController.loadData(data,
          "text/html",
          "UTF-8", " ", " ");
      })
      .defaultFontSize(45)
      .zoomAccess(false)
      .layoutMode(WebLayoutMode.FIT_CONTENT)
      .overScrollMode(OverScrollMode.NEVER)
      .javaScriptAccess(true)
      .layoutWeight(1)
      .width('100%')
      .backgroundColor(Color.Red)

  }
  .margin(16)
  .padding(16)
  .borderRadius(8)
  .backgroundColor(Color.Blue)
  .justifyContent(FlexAlign.Start)
  .alignItems(HorizontalAlign.Start)
  .height('100%')
  .width('100%')
}

更多关于HarmonyOS 鸿蒙Next中 web 组件显示的问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


加载的内容，写到html中，内容如下，这样加载就没有问题了。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <p>Hello World</p>
</body>
</html>

鸿蒙Next中Web组件显示问题可能由以下原因导致：组件未正确配置、网络资源加载失败或内核兼容性问题。请检查Web组件的src属性是否使用有效URL，确认网络权限已开启。若加载本地HTML，需确认文件路径正确且放置在resources/rawfile目录下。部分网页可能存在渲染兼容问题，建议使用远程调试工具排查。

在HarmonyOS Next中，Web组件使用FIT_CONTENT布局模式时，高度计算基于内容实际尺寸，但可能受到HTML结构或默认边距影响，导致底部留白。建议检查HTML内容是否包含额外元素或样式，尝试通过CSS重置margin和padding属性，例如在加载的HTML数据中添加<body style="margin:0; padding:0;">。

关于字体大小差异，Web组件的defaultFontSize是基于Web引擎的渲染机制，与ArkUI的Text组件字体渲染标准不同。Web内容通常受浏览器默认样式影响，建议通过内联CSS明确指定字体大小，例如在HTML数据中直接设置<span style="font-size:45px;">，以确保一致性。

可尝试调整Web内容样式或使用onSizeChange回调动态调整布局。

回到顶部