HarmonyOSBaseLibs/src/main/ets/pages/XWebview.ets

import web_webview from '@ohos.web.webview';
import { router } from '@kit.ArkUI';
import { XDialogController } from '../dialog/XDialogController';
import { XDialogList } from '../dialog/XDialogList';
import { picker } from '@kit.CoreFileKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { ToolsHelper } from '../utils/ToolsHelper';
import { XWebParams } from '../utils/XWebHelper';

@Entry({ routeName: 'XWebview' })
@Preview
@Component
export struct XWebview {
  // 手机号
  @State url: string = (router.getParams() as XWebParams).url
  @State title?: string = (router.getParams() as XWebParams).title
  @State errorInfo: string | null = null
  @State progress: number = 0
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  dialogController: XDialogController = {} as XDialogController

  aboutToAppear(): void {
  }

  aboutToDisappear(): void {
  }

  onBackPress(): boolean | void {
    if (this.controller.accessBackward()) {
      this.controller.backward()
    }
    return true
  }

  build() {
    Column() {

      Row() {
        Row() {
          Button({ buttonStyle: ButtonStyleMode.TEXTUAL }) {
            Image($r('sys.media.ohos_ic_back'))
              .width(26).height(26)
          }.onClick(() => {
            this.onBackPress()
          })

          Button({ buttonStyle: ButtonStyleMode.TEXTUAL }) {
            Image($r('sys.media.ohos_ic_public_close'))
              .width(26).height(26)
          }.margin({ left: 12 })
          .onClick(() => {
            router.back()
          })
        }.width(65)

        Text(this.title)
          .maxLines(1)
          .fontColor('#222222')
          .fontSize(18)
          .textAlign(TextAlign.Center)
          .width('50%')
          .ellipsisMode(EllipsisMode.END)
          .textOverflow({
            overflow: TextOverflow.Ellipsis
          })

        Button({ buttonStyle: ButtonStyleMode.TEXTUAL }) {
          Image($r('sys.media.ohos_ic_public_more'))
            .width(26).height(26)
        }.width(65)
        .onClick(() => {
          if (this.dialogController != null) {
            this.dialogController.open()
          }
        })
      }
      .width('100%')
      .height(45)
      .justifyContent(FlexAlign.SpaceBetween)
      .padding({ left: 15, right: 15 })

      Divider().height(2).color(0xCCCCCC)
      Progress({ value: this.progress, type: ProgressType.Linear })
        .visibility(this.progress > 95 || this.progress == 0 ? Visibility.None : Visibility.Visible)
        .width('100%')

      Web({ src: this.url, controller: this.controller })
        .width('100%')
        .height('100%')
        .visibility(this.errorInfo == null ? Visibility.Visible : Visibility.None)
        .mixedMode(MixedMode.All)//允许加载HTTP和HTTPS混合内容
        .zoomAccess(false)//不支持手势进行缩放
        .mediaPlayGestureAccess(false)//有声视频播放不需要用户手动点击
        .cacheMode(CacheMode.Default)//设置缓存模式
        .onConfirm((event) => { // 自定义Confirm弹窗
          if (event) {
            console.log("event.url:" + event.url)
            console.log("event.message:" + event.message)
            AlertDialog.show({
              title: '提示',
              message: event.message,
              primaryButton: {
                value: '取消',
                action: () => {
                  event.result.handleCancel()
                }
              },
              secondaryButton: {
                value: '确定',
                action: () => {
                  event.result.handleConfirm()
                }
              },
              cancel: () => {
                event.result.handleCancel()
              }
            })
          }
          return true
        })
        .onAlert((event) => { // 自定义Alert弹窗
          if (event) {
            console.log("event.url:" + event.url)
            console.log("event.message:" + event.message)
            AlertDialog.show({
              title: '提示',
              message: event.message,
              secondaryButton: {
                value: '确定',
                action: () => {
                  event.result.handleConfirm()
                }
              }
            })
          }
          return true
        })
        .onDownloadStart((event) => { // 下载文件
          if (event) {
            console.log('url:' + event.url)
            console.log('userAgent:' + event.userAgent)
            console.log('contentDisposition:' + event.contentDisposition)
            console.log('contentLength:' + event.contentLength)
            console.log('mimetype:' + event.mimetype)
          }
        })
        .onErrorReceive((event) => { // 加载失败
          if (this.progress > 65) return
          if (event) {
            this.errorInfo = `错误码：${event.error.getErrorCode()}\n${event.error.getErrorInfo()}`
          } else {
            this.errorInfo = '错误码：-1\n未知错误'
          }
        })
        .onHttpErrorReceive((event) => { // 加载失败
          if (this.progress > 65) return
          if (event) {
            this.errorInfo = `错误码：${event.response.getResponseCode()}\n${event.response.getReasonMessage()}`
          } else {
            this.errorInfo = '错误码：-1\n未知错误'
          }
        })
        .onProgressChange((event) => { // 加载进度
          if (event) {
            console.log('newProgress:' + event.newProgress)
            this.progress = event.newProgress
          }
        })
        .onTitleReceive((event) => {
          // 如果没有传输title，则从H5获取title赋值
          if (event && !this.title) {
            this.title = event.title
          }
        })
        .onShowFileSelector((event) => { // 选择文件
          console.log('MyFileUploader onShowFileSelector invoked')
          const documentSelectOptions = new picker.DocumentSelectOptions();
          let uri: string | null = null;
          const documentViewPicker = new picker.DocumentViewPicker();
          documentViewPicker.select(documentSelectOptions).then((documentSelectResult) => {
            uri = documentSelectResult[0];
            console.info('documentViewPicker.select to file succeed and uri is:' + uri);
            if (event) {
              event.result.handleFileList([uri]);
            }
          }).catch((err: BusinessError) => {
            if (event) {
              event.result.handleFileList([])
            }
            ToolsHelper.showMessage(`Invoke documentViewPicker.select failed, code is ${err.code}, message is ${err.message}`)
            console.error(`Invoke documentViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
          })
          return true
        })
      Column() {
        Text(this.errorInfo)
        Button('点击重试')
          .onClick(() => {
            this.controller.refresh()
            this.errorInfo = null
            this.progress = 0
          })
          .margin({ top: 30 })
      }
      .visibility(this.errorInfo == null ? Visibility.None : Visibility.Visible)
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)
      .padding({ bottom: 80 })

      XDialogList({
        // 控制器
        controller: this.dialogController,
        // 标题(可选)
        title: '选择您的操作',
        // 选择内容列表
        values: ['刷新', '浏览器打开', '分享', '复制地址'],
        // 用户选择事件
        onSelected: (index: number, value: string) => {
          ToolsHelper.showMessage(`用户选择了第${index}个，内容为：${value}`)
        },
        // 用户取消事件
        onCancel: () => {
          ToolsHelper.showMessage('用户取消操作')
        },
        // 是否可取消(点击空白处，或者物理返回键)
        autoCancel: true
      })

    }.width('100%').height('100%')
  }
}