Bläddra i källkod

feat(XWebview): 新增 JavaScript 代理功能

- 实现了在 XWebview 中使用 JavaScript代理的功能
- 添加了 JSSdkClsManager 类来处理 JS SDK 的调用
- 更新了 XWebHelper 和 XWebManager 以支持 JS 代理
- 新增了类型定义文件 types.ets来规范接口和数据结构
徐勤民 2 månader sedan
förälder
incheckning
6a95d3324b

+ 2 - 2
BuildProfile.ets

@@ -2,8 +2,8 @@
  * Use these variables when you tailor your ArkTS code. They must be of the const type.
  */
 export const HAR_VERSION = '1.0.6';
-export const BUILD_MODE_NAME = 'release';
-export const DEBUG = false;
+export const BUILD_MODE_NAME = 'debug';
+export const DEBUG = true;
 export const TARGET_NAME = 'default';
 
 /**

+ 17 - 0
src/main/ets/pages/ClasTest.ets

@@ -0,0 +1,17 @@
+import { ToolsHelper } from "../utils/ToolsHelper";
+
+export class ClasTest{
+  constructor() {
+  }
+
+  test(): string {
+    return "ArkUI Web Component";
+  }
+
+  toString(): void {
+    console.log('Web Component toString');
+  }
+  postMsg(res: string): void {
+    ToolsHelper.showMessage(res)
+  }
+}

+ 27 - 3
src/main/ets/pages/XWebview.ets

@@ -6,7 +6,7 @@ import { XDialogList } from '../dialog/XDialogList';
 import { picker } from '@kit.CoreFileKit';
 import { BusinessError } from '@kit.BasicServicesKit';
 import { ToolsHelper } from '../utils/ToolsHelper';
-import { XWebController, XWebParams } from '../utils/XWebHelper';
+import { JsParams, XWebController, XWebParams } from '../utils/XWebHelper';
 import { WindowHelper } from '../utils/WindowHelper';
 import { SZYXLocalStorageHelper } from '../utils/SZYXLocalStorageHelper';
 import { SZYXLocalStorageKeys } from '../utils/SZYXLocalStorageKeys';
@@ -18,10 +18,12 @@ export struct XWebview {
   // 手机号
   @State headers?: Array<WebHeader> = (router.getParams() as XWebParams).headers
   @State url?: string = (router.getParams() as XWebParams).url
+  @State jsParams?: JsParams = (router.getParams() as XWebParams).jsParams
   @State zoomAccess?: boolean = (router.getParams() as XWebParams).zoomAccess
   @State content?: string = (router.getParams() as XWebParams).content
   @State title?: string = (router.getParams() as XWebParams).title
   @State xController?: XWebController = (router.getParams() as XWebParams).controller
+  // @State xJsController?: XWebController = (router.getParams() as XWebParams).jsController
   @State closeTag?: string = (router.getParams() as XWebParams).closeTag
   @State showMenu: boolean = (router.getParams() as XWebParams).showMenu ?? false
   @State errorInfo: string | null = null
@@ -35,7 +37,6 @@ export struct XWebview {
   aboutToAppear(): void {
     SZYXLocalStorageHelper.storage.setOrCreate(SZYXLocalStorageKeys.XWebViewCLose, undefined)
     webview.WebviewController.setWebDebuggingAccess(true);
-
     if (this._uuidToHtml) {
       XWebManager.addOnMessageToHtml(this._uuidToHtml, (msg) => {
         if (this.ports && this.ports[1]) {
@@ -43,6 +44,11 @@ export struct XWebview {
         }
       })
     }
+    if (this.jsParams?.controller && this._uuidToHtml) {
+      XWebManager.addOnMessageToWeb(this._uuidToHtml, (msg) => {
+        this.controller.runJavaScript(msg)
+      })
+    }
   }
 
   aboutToDisappear(): void {
@@ -51,6 +57,14 @@ export struct XWebview {
     }
     XWebManager.removeOnMessage(this._uuid)
     XWebManager.removeOnMessageToHtml(this._uuidToHtml)
+    if (this._uuidToHtml) {
+      XWebManager.objs.delete(this._uuidToHtml)
+    }
+    try {
+      this.controller.deleteJavaScriptRegister(this.jsParams?.name);
+    } catch (error) {
+      console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
+    }
   }
 
   onBackPress(): boolean | void {
@@ -118,6 +132,12 @@ export struct XWebview {
 
       Web({ src: this.url ?? 'www.example.com', controller: this.controller })
         .javaScriptAccess(true)
+        .javaScriptProxy({
+          object: XWebManager.objs.get(this._uuidToHtml),
+          name: this.jsParams?.name,
+          methodList: this.jsParams?.methodList,
+          controller: this.controller
+        })
         .domStorageAccess(true)
         .geolocationAccess(true)
         .width('100%')
@@ -312,7 +332,11 @@ export struct XWebview {
         values: ['刷新', '浏览器打开', '分享', '复制地址'],
         // 用户选择事件
         onSelected: (index: number, value: string) => {
-          ToolsHelper.showMessage(`用户选择了第${index}个,内容为:${value}`)
+          if (index === 0) {
+            this.controller.refresh()
+          } else {
+            ToolsHelper.showMessage(`用户选择了第${index}个,内容为:${value}`)
+          }
         },
         // 用户取消事件
         onCancel: () => {

+ 30 - 5
src/main/ets/utils/XWebHelper.ets

@@ -12,19 +12,31 @@ export interface XWebController {
   sendMessage: (message: string) => void
 }
 
+export interface XWebJsController {
+  sendMessage: (message: string) => void
+}
+
+export interface JsParams {
+  obj: object;
+  name: string;
+  methodList: Array<string>;
+  controller?: XWebJsController
+}
+
 export interface XWebParams {
   url?: string
-  zoomAccess?: boolean
   content?: string
   title?: string
+  watermarkTxt?: string
   showMenu?: boolean
+  jsParams?: JsParams
   closeTag?: string
-  watermarkTxt?: string
-  _uuid?: string
-  _uuidToHtml?: string
+  headers?: Array<WebHeader>
   onMessage?: (message: string) => void
   controller?: XWebController
-  headers?: Array<WebHeader>
+  zoomAccess?: boolean
+  _uuid?: string
+  _uuidToHtml?: string
 }
 
 export class XWebHelper {
@@ -46,6 +58,19 @@ export class XWebHelper {
       }
     }
 
+    if (params.jsParams && params.jsParams.obj) {
+      if (!params._uuidToHtml) {
+        params._uuidToHtml = ToolsHelper.getUuid()
+      }
+      XWebManager.objs.set(params._uuidToHtml, params.jsParams.obj)
+
+      if (params.jsParams?.controller) {
+        params.jsParams.controller.sendMessage = (msg) => {
+          XWebManager.sendMessageToWeb(msg)
+        }
+      }
+    }
+
     return new Promise((resolve) => {
       router.pushNamedRoute({
         name: 'XWebview',

+ 19 - 0
src/main/ets/utils/XWebManager.ets

@@ -2,6 +2,7 @@ import { ToolsHelper } from './ToolsHelper';
 
 export class XWebManager {
   private static MapEventListener = new Map<string, (msg: string) => void>();
+  static objs:Map<string,object>  = new Map()
 
   static addOnMessage(listener: (msg: string) => void): string {
     const id = ToolsHelper.getUuid()
@@ -38,4 +39,22 @@ export class XWebManager {
       item(message)
     }
   }
+
+  private static MapEventListenerToWeb = new Map<string, (msg: string) => void>();
+
+  static addOnMessageToWeb(id: string, listener: (msg: string) => void) {
+    XWebManager.MapEventListenerToWeb.set(id, listener)
+  }
+
+  static removeOnMessageToWeb(id?: string) {
+    if (id) {
+      XWebManager.MapEventListenerToWeb.delete(id)
+    }
+  }
+
+  static sendMessageToWeb(message: string) {
+    for (let item of XWebManager.MapEventListenerToWeb.values()) {
+      item(message)
+    }
+  }
 }