common-station-web/entry/src/main/ets/pages/Index.ets

import web_webview from '@ohos.web.webview';
import process from '@ohos.process'
import router from '@ohos.router';
import uploadInstance from "../utils/UploadUtil"


const TAG = "openHarmonyBridge" //webview和vue沟通的名称
// const webUrl = "http://192.168.1.4:11000/"  //创客前端服务
//const webUrl = "http://192.168.0.49:3005/"  //本地跑的项目
const webUrl = "http://10.88.11.200:11000/"  //险峰服务

class BridgeModel {
  constructor() {

  }

  // this.controller.registerJavaScriptProxy 这个里面要对应
  download(params: string): void {
    // download(value: string, params: BridgeParams): string {
    // let downloadUrl: string = baseUrl + proxyPrefix + params.path
    // console.info(TAG, `download:`, downloadUrl);
    console.info(TAG, `params:`, params);
    // return true;
  }

  goToDevicePage(params: string): void {
    console.info(TAG, `goToDevicePage:`, params);
    uploadInstance.configUploadParam(params)
    router.pushUrl({ url: "pages/StationDevicesPage" })
  }

  selectFile(params: string): void {
    console.info(TAG, `selectFile:`, params);
    uploadInstance.configUploadParam(params)
    router.pushUrl({ url: "pages/SelectFilePage" })
  }

  startCamera(params: string): void {
    console.info(TAG, `startCamera:`, params);
    // 如果在web端第的登录页面传参数不对，这里要注释掉以免报错
    uploadInstance.configUploadParam(params)
    // router.pushUrl({ url: "pages/CameraPage" })
    router.pushUrl({
      url: "pages/CameraVersion2"
    })
  }

  exitApp(params: string): void {
    console.info(TAG, `exitApp:`, params);
    let pro = new process.ProcessManager();
    pro.exit(0);
  }
}


@Entry
@Component
struct Index {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  // 声明需要注册的对象
  @State bridgeObj: BridgeModel = new BridgeModel();
  hasRegistered: boolean = false
  registerJS = () => {

    // 这个必须要调用刷新才起作用， 而且只能执行一次
    if (!this.hasRegistered) {
      console.info(TAG, `registerJavaScriptProxy:`);

      this.controller.registerJavaScriptProxy(this.bridgeObj, TAG, ["download", "selectFile", "startCamera", "goToDevicePage", "exitApp"])
      this.controller.refresh()
      this.hasRegistered = true

      uploadInstance.controller = this.controller
    }
  }

  build() {
    Column() {

      // 这个webview调用相机不知道为什么只能执行一次，选择文件的回到还行，但是为了统一写法还是用registerJavaScriptProxy，但是有时候注册的方法也只能执行一次，不知道为什么。
      // Web({ src: $rawfile('doc_old.html'), controller: this.controller })//测试官方文档 这个是好使的

      Button("跳转到相机页面").onClick(() => {
        router.pushUrl({
          url: "pages/CameraVersion2"
        })
      })
      Web({
        src: webUrl,
        controller: this.controller
      })
        .mixedMode(MixedMode.All)
        .onlineImageAccess(true)
        .javaScriptAccess(true)
        .overviewModeAccess(true)
        .databaseAccess(true)
        .domStorageAccess(true)
        .onShowFileSelector((event) => {
          console.log(TAG, "onShowFileSelector", JSON.stringify(event))
          // this.openGallery()
          // setTimeout(() => {
          //   // 这个会触发addEventListener('change')的事件，但是每次的值都要不同。
          //   event?.result.handleFileList([Date.now() + '.jpg']);
          // }, 1300)
          return true;
        })
        .onProgressChange((e) => {
          if (e && e.newProgress == 100) {
            this.registerJS()
          }
        })

        .onPermissionRequest((event) => {
          console.log(TAG, "onPermissionRequest")

          // event.request.grant([""])
        })
      .onConsole((e) => {
        console.log(TAG, "onConsole", JSON.stringify(e))
        return true
      })



      // 退出程序
      // Row() {
      //   Image($r('app.media.shutdown'))
      //     .width(px2vp(80))
      //     .height(px2vp(80))
      //     .onClick(() => {
      //       let pro = new process.ProcessManager();
      //       pro.exit(0);
      //     })
      //
      // }.width(px2vp(1920))
      // .height(px2vp(80))
      // .justifyContent(FlexAlign.End)
    }
    .width("100%")
    .height("100%")

  }
}