HarmonyOS 鸿蒙Next web的加载异常

HarmonyOS 鸿蒙Next web的加载异常

现在需要提供web加载异常的组件，当web加载异常时展示这个组件，目前使用了这几个，但是效果不理想，会出现闪动，想问下有没有解决方案？

.onErroreReceive(() => {
// 网页加载遇到错误时触发
this.isErr = true
})
.onHttpErrorReceive(() => {
// 响应码>=400
this.isErr = true
})
.onSslErrorEventReceive(() => {
this.isErr = true
})
.onSslErrorEvent(() => {
this.isErr = true
})
.onFirstMeaningfulPaint(() => {
// 这里表示页面加载成功，展示web
this.isErr = false
})

更多关于HarmonyOS 鸿蒙Next web的加载异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

当web加载异常时可以通过您列出的这些回调进行处理，您可以尝试一下以下demo（多点击几下Button(‘loadUrl’) 响应码403时触发）

// xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();
  @State webType: Visibility = Visibility.Visible;
  @State textType: Visibility = Visibility.None;

  build() {
    Column() {
      Button('loadUrl')
        .onClick(() => {
          try {
            // 需要加载的URL是string类型。
            this.controller.loadUrl('https://beian.miit.gov.cn/#/home');
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })
      Text('web加载失败后的组件').visibility(this.textType)
      Text('web加载失败后的组件').visibility(this.textType)
      Text('web加载失败后的组件').visibility(this.textType)
      Web({ src: 'www.baidu.com', controller: this.controller })
        .onHttpErrorReceive((evevt) =>{
          console.log(evevt.response.getResponseCode().toString())
          if(evevt.response.getResponseCode() == 403){
            this.webType = Visibility.None;
            this.textType = Visibility.Visible;
          }
        }).visibility(this.webType)
    }
  }
}

更多关于HarmonyOS 鸿蒙Next web的加载异常的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


使用stack包一个web+一个骨架图或者loading，web加载成功后，在显示web组件

针对HarmonyOS鸿蒙Next web的加载异常问题，可能的原因及解决方法如下：

  1. 资源路径错误：检查网页资源的路径是否正确，确保所有引用的文件（如HTML、CSS、JavaScript等）都能被正确找到和加载。

  2. 网络问题：确认设备是否已连接到互联网或正确的局域网，并且网络连接稳定。可以尝试刷新页面或使用其他网络进行测试。

  3. 权限设置：检查应用是否有足够的权限来访问和加载网络资源。在鸿蒙系统中，某些权限可能需要用户手动授予。

  4. 浏览器兼容性问题：鸿蒙Next web可能依赖于特定的浏览器特性或API。确保使用的浏览器版本与鸿蒙Next web兼容。

  5. 系统更新：鸿蒙系统可能发布了新的更新，这些更新可能修复了与Next web相关的加载问题。检查系统更新，并安装最新的补丁或版本。

  6. 代码错误：如果网页是由开发者编写的，可能存在代码错误导致加载异常。检查控制台日志中的错误信息，定位并修复问题。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部