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://10.88.11.200:11000"

// const webUrl = "http://10.88.20.88:3005/"

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);
    uploadInstance.configUploadParam(params)
    router.pushUrl({ url: "pages/CameraPage" })
  }
}


@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"])
      this.controller.refresh()
      this.hasRegistered = true
    }
  }

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

        Web({
          src: "http://10.88.20.88:3005",
          controller: this.controller
        })// 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(px2vp(1920))
      .height(px2vp(1080))
      .align(Alignment.BottomEnd)

    }
    .width(px2vp(1920))
    .height(px2vp(1080))

  }
}