WdWebComponent.ets 5.57 KB
import router from '@ohos.router';
import { BridgeHandler, BridgeUtil, BridgeWebViewControl, Callback } from 'wdJsBridge';
import { Logger } from 'wdKit/Index';
import { setDefaultNativeWebSettings } from './WebComponentUtil';
import { Action } from 'wdBean';
import { performJSCallNative } from './JsBridgeBiz';
import { H5CallNativeType } from './H5CallNativeType';
import { Message,WDH5WebDataSource,WDH5WebPageOperationType } from 'wdJsBridge/src/main/ets/bean/Message';
import { JSON } from '@kit.ArkTS';
import { WindowModel } from 'wdKit';

const TAG = 'WdWebComponent';

@Component
export struct WdWebComponent {
  webviewControl: BridgeWebViewControl = new BridgeWebViewControl()
  onWebPrepared: () => void = () => {
  }
  receiveH5SendToNativeData: (data: Message | undefined) => void = () =>{

  }
  @Prop isDefaultPage: boolean = false;
  @Prop webUrl: string = ''
  @Prop @Watch('onReloadStateChanged') reload: number = 0
  @Link isPageEnd: boolean
  @State subjectData : string = ''

  @StorageProp('currentBreakpoint') @Watch("currentChanged")currentBreakpoint: string = 'sm';
  @State userAgent:string = 'Mozilla/5.0 (Phone; OpenHarmony 5.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 ArkWeb/4.1.6.1 Mobile automobile/792 Android'

  currentChanged(){
    ///折叠屏转换
    this.webviewControl.refresh()
  }

  build() {
    Column() {
      Web({ src: this.webUrl, controller: this.webviewControl })
        .backgroundColor(Color.White)
        .domStorageAccess(true)
        .databaseAccess(true)
        .javaScriptAccess(true)
        .imageAccess(true)
        .mixedMode(MixedMode.All)
        .onlineImageAccess(true)
        .enableNativeEmbedMode(true)
        .horizontalScrollBarAccess(false)
        .verticalScrollBarAccess(false)
        .onPageBegin((event) => {
          this.onPageBegin(event?.url);
        })
        .onPageEnd((event) => {
          this.onPageEnd(event?.url)
        })
        .onLoadIntercept((event) => {
          let url: string = event.data.getRequestUrl().toString()
          return this.onLoadIntercept(url);
        })
        // 添加之后影响了专题详情页中 点击稿件进详情的操作,这里先临时注释
        .onControllerAttached(() => {
          if (this.isDefaultPage) {
            this.webviewControl.setCustomUserAgent(this.userAgent);
          }
        })
    }
  }

  private registerHandlers(): void {
    // 注册h5调用js相关
    for (let i = 0; i < H5CallNativeType.JsCallTypeList.length; i++) {
      let handleName = H5CallNativeType.JsCallTypeList[i];
      let handle = (data: Message, f: Callback) => {
        Logger.debugOptimize(TAG, () => {
          return 'recivedData: ' + JSON.stringify(data)
        })
        this.defaultPerformJSCallNative(data, f)
        this.defaultGetReceiveSubjectData(data, f)
      };
      this.webviewControl.registerHandler(handleName, { handle: handle });
    }
  }

  /**
   * 默认【CallNative】逻辑处理
   */
  private defaultPerformJSCallNative: (data: Message, f: Callback) => void = (data: Message, f: Callback) => {
    // H5内部跳转逻辑(前端调用原生的js方法处理)
    performJSCallNative(data, f)
  }

  /**
   * 获取前端返回的数据
   */
  private defaultGetReceiveSubjectData: (data: Message, f: Callback) => void = (data: Message, f: Callback) => {
    if(data.handlerName === H5CallNativeType.jsCall_receiveSubjectData) {
      f('')
      return
    }
    if (data.handlerName === H5CallNativeType.jsCall_receiveH5Data) {
      if (data.data?.dataSource === WDH5WebDataSource.WDH5WebDataSourceTopicPageInfo) {
        this.receiveH5SendToNativeData(data)
        return
      }
    }

    if (data.handlerName === H5CallNativeType.jsCall_currentPageOperate) {
      this.jsCall_currentPageOperate(data)
      return
    }
  }

  private jsCall_currentPageOperate(data: Message) {
    if (data.data?.operateType == WDH5WebPageOperationType.WDH5WebPageOperationTypeSetStatusBar) {
      WindowModel.shared.setWindowSystemBarProperties({ statusBarContentColor: data.data?.statusBarMode =='2'?'#ffffff':'#000000'})
      return
    }

    if (data.data?.operateType == WDH5WebPageOperationType.WDH5WebPageOperationTypeBottomBarMaskViewShow ||
      data.data?.operateType == WDH5WebPageOperationType.WDH5WebPageOperationTypeBottomBarMaskViewHidden) {
      this.receiveH5SendToNativeData(data)
      return
    }
  }

  onPageBegin: (url?: string) => void = () => {
    Logger.debug(TAG, 'onPageBegin');
    this.registerHandlers();
  }
  onPageEnd: (url?: string) => void = () => {
    Logger.debug(TAG, 'onPageEnd');
    this.onWebPrepared()
    this.isPageEnd = true
  }
  onLoadIntercept: (url: string) => boolean = (url: string) => {
    Logger.debug(TAG, 'onLoadIntercept' + url);
    url = url.replace("%(?![0-9a-fA-F]{2})", "%25")
      .replace("\\+", "%2B");
    url = decodeURIComponent(url)
    if (url.startsWith(BridgeUtil.YY_RETURN_DATA)) {
      this.webviewControl.handlerReturnData(url)
      return true
    }
    if (url.startsWith(BridgeUtil.YY_OVERRIDE_SCHEMA)) {
      Logger.debug(TAG, 'flushMessageQueue');
      this.webviewControl.flushMessageQueue()
      // this.webviewControl.receiveDataFromH5(url)
      return true
    }
    if (url.includes(BridgeUtil.BRIDGE_LOADED_MSG)) {
      // jsBridge load通知,注入js
      BridgeUtil.webViewLoadLocalJs(getContext(this), this.webviewControl)
      return true
    }
    return false
  }
  onReloadStateChanged() {
    Logger.info(TAG, `onReloadStateChanged:::refresh, this.reload: ${this.reload}`);
    if (this.reload > 0 && this.isPageEnd) {
      this.webviewControl.refresh()
    }
  }
}