HarmonyOS鸿蒙Next中webview加载网页如何实现展示加载进度百分比

HarmonyOS鸿蒙Next中webview加载网页如何实现展示加载进度百分比

webview 加载网页链接 如何实现加载进度 百分比 尤其在弱网条件展示 这个加载进度

Webview 组件 配合 Progress 组件实现 这个功能

3 回复

Web组件有提供网页进度变化事件监听

onProgressChange网页加载进度变化时触发该回调OnProgressChangeEvent
定义网页加载进度变化时触发该回调。

参考 https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#onprogresschange

更多关于HarmonyOS鸿蒙Next中webview加载网页如何实现展示加载进度百分比的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，使用WebView加载网页时展示加载进度百分比，可以通过监听WebView的加载进度事件来实现。鸿蒙提供了WebView组件，并支持通过setWebChromeClient方法设置WebChromeClient来监听网页加载进度。

具体步骤如下：

  1. 创建WebView组件并设置WebChromeClient。
  2. 在WebChromeClient中重写onProgressChanged方法，该方法会在网页加载进度发生变化时被调用。
  3. 在onProgressChanged方法中获取当前加载进度，并更新UI以展示进度百分比。

示例代码如下：

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

class MyWebChromeClient extends webview.WebChromeClient {
  onProgressChanged(view: webview.WebView, newProgress: number) {
    // 更新UI显示加载进度百分比
    prompt.showToast({ message: `加载进度: ${newProgress}%` });
  }
}

let webView: webview.WebView = webview.createWebView();
webView.setWebChromeClient(new MyWebChromeClient());
webView.loadUrl('https://www.example.com');

在上述代码中，onProgressChanged方法会在网页加载进度变化时被调用，参数newProgress表示当前的加载进度百分比。通过prompt.showToast方法将进度百分比展示给用户。

通过这种方式，可以在鸿蒙Next中实现WebView加载网页时展示加载进度百分比的功能。

在HarmonyOS鸿蒙Next中，可以通过WebView组件加载网页并展示加载进度百分比。具体实现步骤如下：

  1. 创建WebView组件：在布局文件中或通过代码创建WebView组件。
  2. 设置WebViewClient：通过setWebViewClient方法设置WebViewClient，重写onPageStarted和onPageFinished方法，记录页面加载开始和结束时间。
  3. 监听加载进度：通过setWebChromeClient方法设置WebChromeClient，重写onProgressChanged方法，获取加载进度百分比并更新UI。

示例代码：

WebView webView = new WebView(context);
webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        super.onPageStarted(view, url, favicon);
        // 记录页面开始加载时间
    }

    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        // 页面加载完成，更新UI
    }
});

webView.setWebChromeClient(new WebChromeClient() {
    @Override
    public void onProgressChanged(WebView view, int newProgress) {
        super.onProgressChanged(view, newProgress);
        // 更新加载进度百分比
    }
});
回到顶部