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

import web_webview from '@ohos.web.webview';
import process from '@ohos.process'
import picker from '@ohos.file.picker';
import { BusinessError } from '@ohos.base';
import common from '@ohos.app.ability.common';
import request from '@ohos.request'

interface DownStartModel {
  url: string;
  userAgent: string;
  contentDisposition: string;
  mimetype: string
  contentLength: number
}

interface BridgeParams {
  path?: string
  token?: string
  method?: "get" | "post"
  data?: Record<string, string> //其他参数
}


const TAG = "openHarmonyBridge" //webview和vue沟通的名称
const baseUrl = "http://10.88.11.200:10000"
const proxyPrefix = "/mes-server"

class BridgeModel {
  constructor() {
  }

  // this.controller.registerJavaScriptProxy 这个里面要对应
  download(params: string): string {
    // download(value: string, params: BridgeParams): string {
    // let downloadUrl: string = baseUrl + proxyPrefix + params.path
    // console.info(TAG, `download:`, downloadUrl);
    console.info(TAG, `params:`, params);
    return 'ArkTS收到了下载的请求';
  }
}

@Entry
@Component
struct Index {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  @State mode: MixedMode = MixedMode.All
  UIAbilityContext: common.UIAbilityContext = getContext(this) as common.UIAbilityContext
  // 声明需要注册的对象
  @State bridgeObj: BridgeModel = new BridgeModel();

  aboutToAppear() {
    setTimeout(() => {
      this.controller.registerJavaScriptProxy(this.bridgeObj, TAG, ["download"])
      this.controller.refresh()
    }, 2000)

  }

  build() {


    Column() {
      Stack() {
        // 组件创建时，加载www.example.com


        // Web({ src: $rawfile('download.html'), controller: this.controller })//测试下载proxy互相传值

        // Web({ src: $rawfile('local.html'), controller: this.controller })  //测试webview里面选择文件
        // Web({
        //   src: 'http://10.88.11.200:10000/login',
        //   controller: this.controller
        // })
        // Web({ src: 'http://apm.jgiot.com:7012/login', controller: this.controller})
        Web({
          src: 'http://10.88.20.88:3006/login',
          controller: this.controller
        })//  Web({ src: 'http://10.88.11.200:11000/login', controller: this.controller})
          .mixedMode(this.mode)
          .onlineImageAccess(true)
          .javaScriptAccess(true)
          .overviewModeAccess(true)
          .databaseAccess(true)
          .domStorageAccess(true)
          .onShowFileSelector((event) => {
            console.log('MyFileUploader onShowFileSelector', JSON.stringify(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) => {
              console.error(`Invoke documentViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
            })
            return true
          })
        // .onDownloadStart((event: DownStartModel) => {
        //   console.log('onDownloadStart url:' + event.url)
        //   console.log('onDownloadStart userAgent:' + event.userAgent)
        //   console.log('onDownloadStart contentDisposition:' + event.contentDisposition)
        //   console.log('onDownloadStart contentLength:' + event.contentLength)
        //   console.log('onDownloadStart mimetype:' + event.mimetype)
        //
        //
        // })
        // .onConsole((e) => {
        //   console.log(TAG, 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))
  }
}


// downloadFile(url: string) {
//
//   let filePath = this.UIAbilityContext.filesDir + '/' + "fileName";
//
//   try {
//     request.downloadFile(this.UIAbilityContext, {
//       url: url,
//       filePath: filePath
//     }).then((data) => {
//       // 监听下载完成
//       data.on('complete', () => {
//         console.info('downloadFile task completed.');
//         // 安装应用
//         // this.installApp(filePath);
//       });
//       // 监听下载失败
//       data.on('fail', (err) => {
//         console.info('downloadFile task failed. Cause:' + err);
//       });
//     }).catch(() => {
//       console.error('downloadFile to request the download. Cause: ');
//
//     })
//   } catch (err) {
//     // err.message: bad file path   Download File already exists
//     console.error('downloadFile.code : ' + err.code + ', err.message : ' + err.message);
//
//   }
// }