鸿蒙中使用Web组件

提供具有网页显示能力的Web组件，@ohos.web.webview提供web控制能力。
访问在线网页时需添加网络权限：ohos.permission.INTERNET

import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Web({ src: '在线URL地址', controller: this.controller })
    }
  }
}

常用的事件触发：

// 网页开始加载时触发该回调，且只在主frame触发，iframe或者frameset的内容加载时不会触发此回调。
.onPageBegin((event) => {
          if (event) {
            console.log('url:' + event.url);
          }
        })

// 网页加载进度变化时触发该回调。
.onProgressChange((event) => {
          if (event) {
            console.log('newProgress:' + event.newProgress);
          }
        })

// 网页加载完成时触发该回调，且只在主frame触发。
.onPageEnd((event) => {
          if (event) {
            console.log('url:' + event.url);
          }
        })

// 加载网页页面完成时触发该回调，用于应用更新其访问的历史链接。
.onRefreshAccessedHistory((event) => {
          if (event) {
            console.log('url:' + event.url + ' isReload:' + event.isRefreshed);
          }
        })

// 网页document标题更改时触发该回调，当H5未设置<title>元素时会返回对应的URL。
.onTitleReceive((event) => {
          if (event) {
            console.log('title:' + event.title);
          }
        })

@Consume
  pageStack: NavPathStack
/**
   * 回到web容器的上一个页面
   */
  webBack() {
// 判断 web 组件的 页面栈容量
    // this.historySize web 组件返回上一页之后，size 不会变
    if (this.historyCurrentIndex > 0) {
      // web 组件有多个页面栈，web 组件返回上一页
      this.controller.backward()
    } else {
      // web 组件就只有 1 页
      this.pageStack.pop()
    }}

@Consume
  pageStack: NavPathStack
 /**
   * 回到上一个页面
   */
  webClose() {
    this.pageStack.pop()
  }