HarmonyOS鸿蒙Next中web组件如何自定义加载中和加载失败的页面

HarmonyOS鸿蒙Next中web组件如何自定义加载中和加载失败的页面 web组件如何自定义加载中和加载失败的页面

3 回复

加载失败：可以通过onErrorReceive，WebResourceError 通过getErrorCode来获取错误码然后进行是否跳转自定义错误页面,

错误码链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/errorcode-webview-V5

// xxx.ets
import { webview } from '@kit.ArkWeb';
@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .onErrorReceive((event) => {
          if (event) {
            console.log('getErrorInfo:' + event.error.getErrorInfo());
            console.log('getErrorCode:' + event.error.getErrorCode());
            console.log('url:' + event.request.getRequestUrl());
            console.log('isMainFrame:' + event.request.isMainFrame());
            console.log('isRedirect:' + event.request.isRedirect());
            console.log('isRequestGesture:' + event.request.isRequestGesture());
            console.log('getRequestHeader_headerKey:' + event.request.getRequestHeader().toString());
            let result = event.request.getRequestHeader();
            console.log('The request header result size is ' + result.length);
            for (let i of result) {
              console.log('The request header key is : ' + i.headerKey + ', value is : ' + i.headerValue);
            }
          }
        })
    }
  }
}

加载中，可以onPageBegin中自定义加载页面，onPageEnd，加载完成

如果是这样的话则onErrorReceive和onHttpErrorReceive两个都要监听

onHttpErrorReceive是网页加载资源遇到的HTTP错误（响应码>=400)时触发该回调，onErrorReceive是网页加载遇到错误时触发回调。

ArkWeb网络协议栈错误列表，https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-neterrorlist-V5#webneterrorlist

可以的

更多关于HarmonyOS鸿蒙Next中web组件如何自定义加载中和加载失败的页面的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，Web组件可以通过WebController的onPageStart、onPageFinish和onPageError方法来自定义加载中和加载失败的页面。具体实现如下：

  1. 自定义加载中页面：在onPageStart方法中，可以显示自定义的加载中UI。例如，使用Text组件显示“加载中…”或其他提示信息。

  2. 自定义加载失败页面：在onPageError方法中，可以根据错误类型显示不同的错误页面。例如，使用Text组件显示“加载失败，请重试”或“网络不可用”等提示信息。

  3. 页面加载完成处理：在onPageFinish方法中，可以隐藏加载中UI，并显示加载完成后的内容。

以下是一个简单的示例代码：

import web_webview from '@ohos.web.webview';

let webController = new web_webview.WebController();

webController.onPageStart(() => {
  // 显示自定义加载中页面
  showLoadingPage();
});

webController.onPageFinish(() => {
  // 隐藏加载中页面
  hideLoadingPage();
});

webController.onPageError((error) => {
  // 显示自定义加载失败页面
  showErrorPage(error);
});

function showLoadingPage() {
  // 实现加载中页面的显示逻辑
}

function hideLoadingPage() {
  // 实现加载中页面的隐藏逻辑
}

function showErrorPage(error) {
  // 实现加载失败页面的显示逻辑
}

在HarmonyOS鸿蒙Next中，可以通过WebView组件的onPageStart和onPageError回调方法来自定义加载中和加载失败的页面。

  1. 加载中页面： 在onPageStart回调中，显示自定义的加载页面，如进度条或提示信息。

  2. 加载失败页面： 在onPageError回调中，显示自定义的错误页面，提示用户加载失败并可能提供重试按钮。

示例代码：

webView.setWebAgent(new WebAgent() {
    @Override
    public void onPageStart(WebView view, String url) {
        // 显示加载中页面
        showLoadingView();
    }

    @Override
    public void onPageError(WebView view, String url, int errorCode) {
        // 显示加载失败页面
        showErrorView();
    }
});

通过这种方式，可以灵活定制Web组件的加载和错误处理界面。

回到顶部