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

import web_webview from '@ohos.web.webview';
import webview from '@ohos.web.webview';
import { router, WebHeader } from '@kit.ArkUI';
import { XDialogController } from '../dialog/XDialogController';
import { XDialogList } from '../dialog/XDialogList';
import { fileUri, picker } from '@kit.CoreFileKit';
import { BusinessError, pasteboard, request } from '@kit.BasicServicesKit';
import { ToolsHelper } from '../utils/ToolsHelper';
import { JsParams, XWebController, XWebParams } from '../utils/XWebHelper';
import { WindowHelper } from '../utils/WindowHelper';
import { SZYXLocalStorageHelper } from '../utils/SZYXLocalStorageHelper';
import { SZYXLocalStorageKeys } from '../utils/SZYXLocalStorageKeys';
import { XWebManager } from '../utils/XWebManager';
import { TitleBarBtn } from '../view/SafeView';
import { GlobalContext } from '../ContextConfig';
import { common } from '@kit.AbilityKit';
import { LogHelper } from '../utils/LogHelper';

@Entry({ routeName: 'XWebview' })
@Component
export struct XWebview {
  @LocalStorageLink('refresh_web_base') @Watch('onRefresh') refresh_web_base: number = -1
  // 手机号
  @State headers?: Array<WebHeader> = (router.getParams() as XWebParams).headers
  @State url?: string = (router.getParams() as XWebParams).url
  @State jsParams?: JsParams = (router.getParams() as XWebParams).jsParams
  @State zoomAccess?: boolean = (router.getParams() as XWebParams).zoomAccess
  @State content?: string = (router.getParams() as XWebParams).content
  @State title?: string = (router.getParams() as XWebParams).title
  @State xController?: XWebController = (router.getParams() as XWebParams).controller
  // @State xJsController?: XWebController = (router.getParams() as XWebParams).jsController
  @State closeTag?: string = (router.getParams() as XWebParams).closeTag
  @State showMenu: boolean = (router.getParams() as XWebParams).showMenu ?? false
  @State clickMenu?: TitleBarBtn = (router.getParams() as XWebParams).clickMenu
  @State errorInfo: string | null = null
  @State progress: number = 0
  @State _uuid?: string = (router.getParams() as XWebParams)._uuid
  @State _uuidToHtml?: string = (router.getParams() as XWebParams)._uuidToHtml
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  dialogController: XDialogController = {} as XDialogController
  ports: webview.WebMessagePort[] = [];
  @State isDownload: boolean = false
  @State receivedSize: number = 0
  @State totalSize: number = 0

  onRefresh() {
    if (this.refresh_web_base !== -1) {
      this.controller.refresh()
    }

  }

  aboutToAppear(): void {
    XWebManager.onClose(() => {
      router.back()
    })
    XWebManager.onGetUrl = () => {
      return this.controller.getUrl()
    }
    XWebManager.onGetTitle = () => {
      return this.controller.getTitle()
    }
    XWebManager.onRefresh = () => {
      this.controller.refresh()
    }


    SZYXLocalStorageHelper.storage.setOrCreate('refresh_web_base', -1)
    SZYXLocalStorageHelper.storage.setOrCreate(SZYXLocalStorageKeys.XWebViewCLose, undefined)
    webview.WebviewController.setWebDebuggingAccess(true);
    if (this._uuidToHtml) {
      XWebManager.addOnMessageToHtml(this._uuidToHtml, (msg) => {
        if (this.ports && this.ports[1]) {
          this.ports[1].postMessageEvent(msg);
        }
      })
    }
  }

  aboutToDisappear(): void {
    if (this.closeTag !== undefined) {
      SZYXLocalStorageHelper.storage.setOrCreate(SZYXLocalStorageKeys.XWebViewCLose, this.closeTag)
    }
    XWebManager.removeOnMessageToWeb(this._uuidToHtml)
    XWebManager.removeOnMessage(this._uuid)
    XWebManager.removeOnMessageToHtml(this._uuidToHtml)
    if (this._uuidToHtml) {
      XWebManager.objs.delete(this._uuidToHtml)
    }
    try {
      this.controller.deleteJavaScriptRegister(this.jsParams?.name);
    } catch (error) {
      console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
    }
  }

  onBackPress(): boolean | void {
    if (this.controller.accessBackward()) {
      this.controller.backward()
    } else {
      ToolsHelper.doubleAndExit(() => {
        router.back()
      })
    }
    return true
  }

  build() {
    Stack() {
      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 }) {
            if (this.clickMenu?.img) {
              Image(this.clickMenu?.img)
                .width(15).height(15).objectFit(ImageFit.Contain)
            } else if (this.clickMenu?.text) {
              Text(this.clickMenu.text)
                .fontColor(this.clickMenu?.color ?? '#17171A')
                .fontSize(13)
                .textAlign(TextAlign.Center)
                .ellipsisMode(EllipsisMode.END)
                .textOverflow({
                  overflow: TextOverflow.Ellipsis
                })
            } else {
              Image($r('sys.media.ohos_ic_public_more'))
                .width(26).height(26)
            }
          }.width(65)
          .onClick(() => {
            if (this.clickMenu) {
              XWebManager.menuClick()
              return
            }
            if (this.dialogController != null) {
              this.dialogController.open()
            }
          }).visibility(this.showMenu || this.clickMenu ? Visibility.Visible : Visibility.Hidden)
        }
        .width('100%')
        .height(45)
        .justifyContent(FlexAlign.SpaceBetween)
        .padding({ left: 15, right: 15 })

        Row().backgroundColor('#CCCCCC').height(2).width('100%')
        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 })
          .javaScriptAccess(true)
          .javaScriptProxy({
            object: XWebManager.objs.get(this._uuidToHtml),
            name: this.jsParams?.name,
            methodList: this.jsParams?.methodList,
            controller: this.controller
          })
          .domStorageAccess(true)
          .geolocationAccess(true)
          .width('100%')
          .height('100%')
          .visibility(this.errorInfo == null ? Visibility.Visible : Visibility.None)
          .mixedMode(MixedMode.All)//允许加载HTTP和HTTPS混合内容
          .zoomAccess(this.zoomAccess ?? false)//不支持手势进行缩放
          .mediaPlayGestureAccess(false)//有声视频播放不需要用户手动点击
          .cacheMode(CacheMode.Online)//设置缓存模式
          .onConfirm((event) => { // 自定义Confirm弹窗
            if (event) {
              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) {
              AlertDialog.show({
                title: '提示',
                message: event.message,
                secondaryButton: {
                  value: '确定',
                  action: () => {
                    event.result.handleConfirm()
                  }
                }
              })
            }
            return true
          })
          .onDownloadStart((event) => { // 下载文件
            if (event) {
              this.isDownload = true
              let context = getContext(this) as common.UIAbilityContext;

              let filesDir = context.filesDir;
              const filePath =
                `${filesDir}/${ToolsHelper.getUuid()}.${event.mimetype ? event.mimetype.split('/')[1] : ''}`

              try {
                request.downloadFile(context, {
                  url: event.url,
                  filePath: filePath
                }).then((downloadTask: request.DownloadTask) => {
                  downloadTask.on('progress', (receivedSize: number, totalSize: number) => {
                    this.receivedSize = receivedSize
                    this.totalSize = totalSize
                  })
                  downloadTask.on('complete', () => {
                    this.isDownload = false
                    LogHelper.info(filePath);
                    GlobalContext.getContext().startAbility({
                      uri: fileUri.getUriFromPath(filePath),
                      type: event.mimetype,
                      flags: 0x00000002
                    })
                  })
                  downloadTask.on('fail', () => {
                    this.isDownload = false
                    ToolsHelper.showMessage('下载失败')
                  })
                }).catch((err: BusinessError) => {
                  this.isDownload = false
                  LogHelper.error(`Invoke downloadTask failed, code is ${err.code}, message is ${err.message}`);
                  ToolsHelper.showMessage(err.message)
                });
              } catch (error) {
                this.isDownload = false
                let err: BusinessError = error as BusinessError;
                LogHelper.error(`Invoke downloadFile failed, code is ${err.code}, message is ${err.message}`);
                ToolsHelper.showMessage(err.message)
              }
              // ToolsHelper.log("")
              // ToolsHelper.log('url:' + event.url)
              // ToolsHelper.log('userAgent:' + event.userAgent)
              // ToolsHelper.log('contentDisposition:' + event.contentDisposition)
              // ToolsHelper.log('contentLength:' + event.contentLength)
              // ToolsHelper.log('mimetype:' + event.mimetype)

            }
          })
          .onPageEnd((url) => {
            // 1、创建两个消息端口。
            this.ports = this.controller.createWebMessagePorts();
            this.ports[1].onMessageEvent((result: webview.WebMessage) => {
              if (typeof (result) === 'string') {
                // ToolsHelper.log(result, typeof (result))
                XWebManager.sendMessage(result)
              }
            })
            this.controller.postMessage('__init_port__', [this.ports[0]], '*');
          })
          .onControllerAttached(() => {
            if (this.jsParams?.controller && this._uuidToHtml) {
              XWebManager.addOnMessageToWeb(this._uuidToHtml, (msg) => {
                this.controller.runJavaScript(msg)
              })
            }
            if (this.content) {
              try {
                this.controller.loadData(this.content, 'text/html', 'UTF-8', " ", " ")
              } catch (e) {
                ToolsHelper.showAlertDialog({
                  title: '警告',
                  msg: e.message ?? '加载内容失败',
                  action: {
                    onClick: () => {
                      router.back()
                    }
                  }
                })
              }
            } else if (this.url) {
              if (this.headers) {
                this.controller.loadUrl(this.url, this.headers);
              } else {
                this.controller.loadUrl(this.url);
              }
            } else {
              ToolsHelper.showAlertDialog({
                title: '警告',
                msg: '请传入url或content',
                action: {
                  onClick: () => {
                    router.back()
                  }
                }
              })
            }
            try {
              let userAgent = this.controller.getUserAgent() + '/szyx_sdk';
              this.controller.setCustomUserAgent(userAgent);

            } catch (error) {
              console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
            }
          })
          .onErrorReceive((event) => { // 加载失败
            if (this.progress > 65) {
              return
            }
            if (event) {
              this.errorInfo = `错误码：${event.error.getErrorCode()}\n${event.error.getErrorInfo()}`
            } else {
              this.errorInfo = '错误码：-1\n未知错误'
            }
            ToolsHelper.log(JSON.stringify(event), this.url)
          })
          .onHttpErrorReceive((event) => { // 加载失败
            if (this.progress > 65) {
              return
            }
            if (event) {
              this.errorInfo = `错误码：${event.response.getResponseCode()}\n${event.response.getReasonMessage()}`
            } else {
              this.errorInfo = '错误码：-1\n未知错误'
            }
            ToolsHelper.log(this.errorInfo, this.url)
          })
          .onProgressChange((event) => { // 加载进度
            if (event) {
              this.progress = event.newProgress
            }
          })
          .onTitleReceive((event) => {
            // 如果没有传输title，则从H5获取title赋值
            if (event && !this.title) {
              this.title = event.title
            }
          })
          .onShowFileSelector((event) => { // 选择文件
            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) => {
            if (index === 0) {
              this.controller.refresh()
            } else if (index === 1) {
              GlobalContext.getContext().openLink(this.controller.getUrl())
            } else {
              pasteboard.getSystemPasteboard()
                .setData(pasteboard.createData(pasteboard.MIMETYPE_TEXT_PLAIN, this.controller.getUrl()), () => {
                  ToolsHelper.showMessage('已复制到剪切板')
                })
            }
          },
          // 用户取消事件
          onCancel: () => {
            // ToolsHelper.showMessage('用户取消操作')
          },
          // 是否可取消(点击空白处，或者物理返回键)
          autoCancel: true
        })

      }.width('100%').height('100%')
      .padding({
        top: WindowHelper.topRectHeight,
        bottom: WindowHelper.bottomRectHeight
      })

      Column() {
        LoadingProgress()
          .color(Color.White)
          .width(80).height(80)
        Text(`努力下载中(${Math.floor(this.receivedSize / this.totalSize * 100)}%)..`)
          .fontSize(16)
          .fontColor(Color.White)
      }
      .visibility(this.isDownload ? Visibility.Visible : Visibility.None)
      .width('100%')
      .height('100%')
      .backgroundColor('#40000000')
      .justifyContent(FlexAlign.Center)
    }
    .align(Alignment.Top)
    .width('100%')
    .height('100%')
  }
}