Web组件如何监听页面加载进度
===============

#### 问题现象

加载Web页面时，如何实时监听Web页面的加载进度并通过进度条展示出来？

#### 背景知识

*   [onProgressChange](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-basic-components-web-events#onprogresschange)：网页加载进度变化时触发该回调。
*   [Progress](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-progress)：进度条组件，用于显示内容加载或操作处理等进度。

#### 解决方案

*   实现思路如下：
    1.  加载在线网页时需要在module.json5中配置ohos.permission.INTERNET网络访问权限。具体配置方式请参考：[声明权限](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/declare-permissions)。
    2.  在Web控件里添加onProgressChange属性监听当前网页加载进度。
    3.  使用Progress组件展示当前加载进度。
*   完整示例参考如下：
    
    import { webview } from '@kit.ArkWeb';
    
    @Entry
    @Component
    struct Index {
      controller: webview.WebviewController \= new webview.WebviewController();
      @State currentProgress: number \= 0;
      private total: number \= 100;
      @State webLoadingEnd: boolean \= false;
    
      build() {
        Column() {
          Progress({ value: this.currentProgress, total: this.total })
            .visibility(this.webLoadingEnd ? Visibility.None : Visibility.Visible)
            .width('100%');
    
          Web({ src: 'www.example.com', controller: this.controller })
            .geolocationAccess(false)
            .fileAccess(false)
            .onProgressChange((event) \=\> {
              if (event) {
                console.info(\`newProgress: ${event.newProgress}\`);
              }
              this.currentProgress \= event.newProgress;
              if (event.newProgress \=== this.total) {
                this.webLoadingEnd \= true;
                this.currentProgress \= 0;
              } else {
                this.webLoadingEnd \= false;
              }
            });
        };
      }
    }