HarmonyOS 鸿蒙Next web组件loadData加载内容显示问题

发布于 1周前 作者 sinazl 来自 鸿蒙OS

HarmonyOS 鸿蒙Next web组件loadData加载内容显示问题 用 this.controller.loadData(this.content, 'text/html', "UTF-8") 加载web内容，页面有时正常，有时放大。

Harmonyos Next教程
2 回复

参考如下代码

import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Web({
        src: 'https://caihui-czyuitest.colourlife.com/dist/index.html?device_source=native_app&access_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBfaWQiOiJJQ0VDSFJTMC1WUjZFLTdXUTYtM1cyQy1TMkNHODQxM1BaUzkiLCJqdGkiOiI4MDA4MmFkZTY0YjAxMTk3Y2NhODM3NjgxMTQyNmIxZiIsImlhdCI6MTcxODg1MjQ2OSwibmJmIjoxNzE4ODUyNDY5LCJleHAiOjE3MTg4NTk2NjksInN1YiI6IjEwMDI2NDY5MzkiLCJzY29wZXMiOiJzbnNhcF9iYXNlIn0.a63631415d928391cca84927f9c45e23ec0b98283a6b0a59a713eb2c97839d4b#/payment/list',
        controller: this.controller
      })
        .mixedMode(MixedMode.All)
        .fileAccess(true)
        .javaScriptAccess(true)
        .domStorageAccess(true)
        .onControllerAttached(() => {
          this.controller.setCustomUserAgent("Mozilla/5.0 (Phone; Android; OpenHarmony 4.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 ArkWeb/4.1.6.1 Mobile")
        })
    }
  }
}

loaddata函数需要添加baseUrl参数，验证demo如下：

import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct Index {
  controller: webview.WebviewController = new webview.WebviewController()
  private content :string = '填写你的字符串，太长我无法粘贴'
  
  build() {
    Column() {
      Web({
        src: '',
        controller: this.controller
      })
        .layoutMode(WebLayoutMode.FIT_CONTENT)
        .mixedMode(MixedMode.All)
        .fileAccess(true)
        .javaScriptAccess(true)
        .domStorageAccess(true)
        .onControllerAttached(() => {
          this.controller.setCustomUserAgent("Mozilla/5.0 (Phone; Android; OpenHarmony 4.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 ArkWeb/4.1.6.1 Mobile")
          this.controller.loadData(this.content, 'text/html', "UTF-8", 'about:blank', 'about:blank')
        })
    }
  }
}

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


针对HarmonyOS鸿蒙Next web组件的loadData加载内容显示问题，这里提供直接且专业的解答：

在HarmonyOS的Next web组件中，若loadData方法加载的内容未能正确显示，可能的原因及解决方法包括：

  1. 数据格式问题：确保loadData方法传递的数据格式与组件期望的格式一致。例如，如果是JSON数据，应确保JSON格式正确无误。

  2. 组件状态问题：检查组件在调用loadData时是否处于可加载状态。某些组件在特定状态下可能不接受数据更新。

  3. 渲染问题：确认组件的渲染逻辑是否正确处理了加载的数据。如果组件内部有自定义的渲染逻辑，应检查该逻辑是否存在错误。

  4. 权限问题：确保应用拥有加载数据所需的权限，特别是当数据来源于网络或特定存储位置时。

  5. 异步处理：如果loadData是异步操作，确保在数据加载完成后的回调中正确处理数据展示。

  6. 日志调试：使用HarmonyOS提供的日志工具，查看加载过程中是否有异常信息输出，这有助于定位问题。

如果以上方法均未能解决问题，可能是更深层次的系统或框架问题。此时，建议直接联系官网客服以获取更专业的帮助。官网地址是：https://www.itying.com/category-93-b0.html

回到顶部