鸿蒙webview 上传和下载文件的初步实现。

AppScope/resources/base/element/string.json

@@ -2,7 +2,7 @@
   "string": [
     {
       "name": "app_name",
-      "value": "一体机终端"
+      "value": "MES一体机"
     }
   ]
 }

build-profile.json5

@@ -1,35 +1,35 @@
 {
   "app": {
-    "signingConfigs": [
-      {
-        "name": "default",
-        "material": {
-          "certpath": "C:/Users/Administrator/.ohos/config/openharmony/default_ohos-web_7r9bg_kCVCLkB8b9LmoIUU-odpbhDZZyXDsJXLnYcFA=.cer",
-          "storePassword": "0000001B08BB632513EA76ABF287B8A2D6626D82DBF69759F53B3DA9947158568C50855C87D53197603A72",
-          "keyAlias": "debugKey",
-          "keyPassword": "0000001B87C6566E2E1473CD54DA458F84EABDF5F14F7A3663C5D45EBEBE95BF73CFEFCC31E1067024CD03",
-          "profile": "C:/Users/Administrator/.ohos/config/openharmony/default_ohos-web_7r9bg_kCVCLkB8b9LmoIUU-odpbhDZZyXDsJXLnYcFA=.p7b",
-          "signAlg": "SHA256withECDSA",
-          "storeFile": "C:/Users/Administrator/.ohos/config/openharmony/default_ohos-web_7r9bg_kCVCLkB8b9LmoIUU-odpbhDZZyXDsJXLnYcFA=.p12"
-        }
-      }
-    ],
     "products": [
       {
         "name": "default",
         "signingConfig": "default",
         "compileSdkVersion": 10,
         "compatibleSdkVersion": 10,
-        "runtimeOS": "OpenHarmony",
+        "runtimeOS": "OpenHarmony"
       }
     ],
     "buildModeSet": [
       {
-        "name": "debug",
+        "name": "debug"
       },
       {
         "name": "release"
       }
+    ],
+    "signingConfigs": [
+      {
+        "name": "default",
+        "material": {
+          "certpath": "C:/Users/Administrator/.ohos/config/openharmony/default_common-station-web_RYQhOtG3oPpAUMsnAlEeKMLDDcU6Dxe3sz7pow0GVEQ=.cer",
+          "storePassword": "0000001BA48FC8B717FE11F8FAD5FE5D2E48E86E65E7AC295F6247025CA544AEE7FBC3E82A572EFC9B6E00",
+          "keyAlias": "debugKey",
+          "keyPassword": "0000001B1F1C43099C9DD60B22877D018B9CDBB66926D6F0ED4832CF4BE0DCE4A2CCAC505CA95CAE427044",
+          "profile": "C:/Users/Administrator/.ohos/config/openharmony/default_common-station-web_RYQhOtG3oPpAUMsnAlEeKMLDDcU6Dxe3sz7pow0GVEQ=.p7b",
+          "signAlg": "SHA256withECDSA",
+          "storeFile": "C:/Users/Administrator/.ohos/config/openharmony/default_common-station-web_RYQhOtG3oPpAUMsnAlEeKMLDDcU6Dxe3sz7pow0GVEQ=.p12"
+        }
+      }
     ]
   },
   "modules": [

entry/src/main/ets/entryability/EntryAbility.ets

@@ -15,6 +15,8 @@ export default class EntryAbility extends UIAbility {
 
 
   onWindowStageCreate(windowStage: window.WindowStage): void {
+
+
     // Main window is created, set main page for this ability
     hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
     // 1.获取应用主窗口。
@@ -28,7 +30,7 @@ export default class EntryAbility extends UIAbility {
       windowClass = data;
       console.info('Succeeded in obtaining the main window. Data: ' + JSON.stringify(data));
       // 2.实现沉浸式效果：设置导航栏、状态栏不显示。
-      let names:[] = [];
+      let names: [] = [];
       windowClass.setWindowSystemBarEnable(names, (err) => {
         if (err.code) {
           console.error('Failed to set the system bar to be visible. Cause:' + JSON.stringify(err));

entry/src/main/ets/pages/Index.ets

@@ -1,29 +1,124 @@
 import web_webview from '@ohos.web.webview';
-import business_error from '@ohos.base';
 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(){
+      Stack() {
         // 组件创建时，加载www.example.com
-       // Web({ src: 'http://apm.jgiot.com:7012/login', controller: this.controller})
-       //  Web({ src: 'http://10.88.19.200:10000/login', controller: this.controller})
-        Web({ src: 'http://10.88.19.222:3005/login', controller: this.controller})
-        .mixedMode(this.mode)
+
+
+        // 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)
-        Row(){
+          .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(()=>{
+            .onClick(() => {
               let pro = new process.ProcessManager();
               pro.exit(0);
             })
@@ -35,9 +130,39 @@ struct Index {
       .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);
+//
+//   }
+// }

entry/src/main/resources/rawfile/download.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<body>
+<button type="button" onclick="callArkTS()">Click Me!</button>
+<p id="demo"></p>
+<script>
+    function callArkTS() {
+        let str = testObjName.test("哈哈哈哈哈哈");
+        document.getElementById("demo").innerHTML = str;
+        console.info({message: 'ArkTS Hello World!'});
+    }
+
+
+</script>
+</body>
+</html>

entry/src/main/resources/rawfile/local.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>File Selector</title>
+    <script>
+        function handleFileSelect(evt) {
+            const files = evt.target.files; // FileList object
+            for (let i = 0, f; f = files[i]; i++) {
+                document.getElementById('output').innerHTML += `<p>${f.name}</p>`;
+            }
+        }
+
+        document.addEventListener('DOMContentLoaded', (event) => {
+            document.getElementById('files').addEventListener('change', handleFileSelect, false);
+        });
+
+    </script>
+</head>
+<body>
+<input type="file" id="files" name="files[]" multiple/>
+<output id="output"></output>
+</body>
+</html>

entry/src/main/resources/zh_CN/element/string.json

@@ -10,7 +10,7 @@
     },
     {
       "name": "EntryAbility_label",
-      "value": "一体机终端"
+      "value": "MES一体机"
     }
   ]
 }