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

- 实现了在 XWebview 中使用 JavaScript代理的功能
- 添加了 JSSdkClsManager 类来处理 JS SDK 的调用
- 更新了 XWebHelper 和 XWebManager 以支持 JS 代理
- 新增了类型定义文件 types.ets来规范接口和数据结构
这个提交包含在:
徐勤民 2025-02-17 11:55:55 +08:00
父节点 858d57ae38
当前提交 6a95d3324b
共有 5 个文件被更改,包括 96 次插入11 次删除

查看文件

@ -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';
/**

查看文件

@ -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)
}
}

查看文件

@ -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) => {
if (index === 0) {
this.controller.refresh()
} else {
ToolsHelper.showMessage(`用户选择了第${index}个,内容为:${value}`)
}
},
// 用户取消事件
onCancel: () => {

查看文件

@ -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
showMenu?: boolean
closeTag?: string
watermarkTxt?: string
_uuid?: string
_uuidToHtml?: string
showMenu?: boolean
jsParams?: JsParams
closeTag?: 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',

查看文件

@ -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)
}
}
}