鸿蒙Next组件Web基础属性和事件总结(一) 原创

本文总结一下使用Web组件访问在线网页时的基础属性和事件设置。
使用Web组件加载一个网页，最简单的一行代码就可实现，即 Web({ src: 网页地址, controller: new webview.WebviewController() })

Web组件需要传一个参数WebOptions，接下来看一下WebOptions的各个参数：

其中渲染模式分2种：

异步渲染模式：RenderMode.ASYNC_RENDER
在此场景下，Web组件高度正好为一屏或接近一屏（内嵌在navigation中）。加载的H5页面高度大于Web组件高度，Web内部将产生滚动条，用户可以通过在Web内部滑动来浏览H5页面的信息。建议在仅由Web组件构成的应用页面中使用此模式，以提高性能并降低功耗。
同步渲染模式：RenderMode.SYNC_RENDER
在此场景下，H5页面与Web组件高度一致，Web内部不生成滚动条，作为一个超长组件展示，通过Scroll组件实现应用内部的滚动，确保用户能够平滑浏览Web内容及其他ArkUI组件的内容。适用于需要Web作为业务内容的一部分渲染超长组件，不允许Web内部生成滚动条，与其余ArkUI组件协同完成页面布局

WebviewController

通过WebviewController可以控制Web组件各种行为，接下来看一下controller都有哪些方法，筛选一些常用的分类总结如下：
设置方法

接下来看一下Web回调事件

正常加载过程的状态回调

import { webview } from '@kit.ArkWeb'
import ApiConstants from '../net/ApiConstants'

@ComponentV2
export struct WebPage{
  private webviewController: WebviewController = new webview.WebviewController()
  build() {
    Column() {
      Web({
        src: ApiConstants.WEB_URL,
        controller: this.webviewController,
        renderMode: RenderMode.ASYNC_RENDER // 设置渲染模式
      })
     //Web组件网页正常加载过程所涉及的状态
        //该回调调用时网页还未加载，因此无法在回调中使用有关操作网页的接口
        .onControllerAttached(() => {
          // 推荐在此loadUrl、设置自定义用户代理、注入JS对象等
          console.log('onControllerAttached execute')
        })
        //Web组件加载url之前触发该回调，用于判断是否阻止此次访问。默认允许加载
        .onLoadIntercept((event) => {
          if (event) {
            console.log('onLoadIntercept url:' + event.data.getRequestUrl())
            console.log('url:' + event.data.getRequestUrl())
            console.log('isMainFrame:' + event.data.isMainFrame())
            console.log('isRedirect:' + event.data.isRedirect())
            console.log('isRequestGesture:' + event.data.isRequestGesture())
          }
          // 返回true表示阻止此次加载，否则允许此次加载
          return false;
        })
          //当Web组件加载url之前触发该回调，用于拦截url并返回响应数据
        .onInterceptRequest((event) => {
          if (event) {
            console.log('onInterceptRequest url:' + event.request.getRequestUrl());
          }
          // 返回响应数据则按照响应数据加载，无响应数据则返回null表示按照原来的方式加载
          return null;
        })
          //网页开始加载时触发该回调
        .onPageBegin((event) => {
          if (event) {
            console.log('onPageBegin url:' + event.url);
          }
        })
        .onProgressChange((event) => {
          if (event) {
            console.log('onProgressChange:' + event.newProgress);
          }
        })
        .onPageEnd((event) => {
          // 推荐在此事件中执行JavaScript脚本
          if (event) {
            console.log('onPageEnd url:' + event.url);
          }

        })
    //Web组件网页异常加载过程所涉及的状态
        //回调函数返回true将导致当前Web中止加载URL，而返回false则会导致Web继续照常加载URL
        .onOverrideUrlLoading((webResourceRequest: WebResourceRequest) => {
          if (webResourceRequest && webResourceRequest.getRequestUrl() == "about:blank") {
            return true;
          }
          return false;
        })
          //渲染流程中当HTTP响应的主体开始加载，新页面即将可见时触发该回调
        .onPageVisible((event) => {
          console.log('onPageVisible url:' + event.url);
        })
          //应用渲染进程异常退出时触发该回调，可以在此回调中进行系统资源的释放、数据的保存等操作
        .onRenderExited((event) => {
          if (event) {
            console.log('onRenderExited reason:' + event.renderExitReason);
          }
        })
        //组件卸载消失时触发此回调
        .onDisAppear(() => {
          this.getUIContext().getPromptAction().showToast({
            message: 'The web is hidden',
            duration: 2000
          })
        })
        //网页加载遇到错误时触发该回调
        .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());
          }
        })
        //网页加载过程中需要关注一些重要的性能指标。
        //FCP 网页首次内容绘制的回调函数
        .onFirstContentfulPaint(event => {
          if (event) {
            console.log("onFirstContentfulPaint:" + "[navigationStartTick]:" +
            event.navigationStartTick + ", [firstContentfulPaintMs]:" +
            event.firstContentfulPaintMs);
          }
        })
        //FMP 网页绘制页面主要内容的回调函数
        .onFirstMeaningfulPaint((details) => {
          console.log("onFirstMeaningfulPaint: [navigationStartTime]= " + details.navigationStartTime +
            ", [firstMeaningfulPaintTime]=" + details.firstMeaningfulPaintTime);
        })
        //LCP 网页绘制页面最大内容的回调函数
        .onLargestContentfulPaint((details) => {
          console.log("onLargestContentfulPaint: [navigationStartTime]= " + details.navigationStartTime +
            ", [largestImagePaintTime]=" + details.largestImagePaintTime +
            ", [largestTextPaintTime]=" + details.largestTextPaintTime +
            ", [largestImageLoadStartTime]=" + details.largestImageLoadStartTime +
            ", [largestImageLoadEndTime]=" + details.largestImageLoadEndTime +
            ", [imageBPP]=" + details.imageBPP);
        })
    }
  }
}