feat(XWebview): 新增 JavaScript 代理功能
- 实现了在 XWebview 中使用 JavaScript代理的功能 - 添加了 JSSdkClsManager 类来处理 JS SDK 的调用 - 更新了 XWebHelper 和 XWebManager 以支持 JS 代理 - 新增了类型定义文件 types.ets来规范接口和数据结构
这个提交包含在:
父节点
858d57ae38
当前提交
6a95d3324b
@ -2,8 +2,8 @@
|
|||||||
* Use these variables when you tailor your ArkTS code. They must be of the const type.
|
* 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 HAR_VERSION = '1.0.6';
|
||||||
export const BUILD_MODE_NAME = 'release';
|
export const BUILD_MODE_NAME = 'debug';
|
||||||
export const DEBUG = false;
|
export const DEBUG = true;
|
||||||
export const TARGET_NAME = 'default';
|
export const TARGET_NAME = 'default';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
17
src/main/ets/pages/ClasTest.ets
普通文件
17
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)
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -6,7 +6,7 @@ import { XDialogList } from '../dialog/XDialogList';
|
|||||||
import { picker } from '@kit.CoreFileKit';
|
import { picker } from '@kit.CoreFileKit';
|
||||||
import { BusinessError } from '@kit.BasicServicesKit';
|
import { BusinessError } from '@kit.BasicServicesKit';
|
||||||
import { ToolsHelper } from '../utils/ToolsHelper';
|
import { ToolsHelper } from '../utils/ToolsHelper';
|
||||||
import { XWebController, XWebParams } from '../utils/XWebHelper';
|
import { JsParams, XWebController, XWebParams } from '../utils/XWebHelper';
|
||||||
import { WindowHelper } from '../utils/WindowHelper';
|
import { WindowHelper } from '../utils/WindowHelper';
|
||||||
import { SZYXLocalStorageHelper } from '../utils/SZYXLocalStorageHelper';
|
import { SZYXLocalStorageHelper } from '../utils/SZYXLocalStorageHelper';
|
||||||
import { SZYXLocalStorageKeys } from '../utils/SZYXLocalStorageKeys';
|
import { SZYXLocalStorageKeys } from '../utils/SZYXLocalStorageKeys';
|
||||||
@ -18,10 +18,12 @@ export struct XWebview {
|
|||||||
// 手机号
|
// 手机号
|
||||||
@State headers?: Array<WebHeader> = (router.getParams() as XWebParams).headers
|
@State headers?: Array<WebHeader> = (router.getParams() as XWebParams).headers
|
||||||
@State url?: string = (router.getParams() as XWebParams).url
|
@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 zoomAccess?: boolean = (router.getParams() as XWebParams).zoomAccess
|
||||||
@State content?: string = (router.getParams() as XWebParams).content
|
@State content?: string = (router.getParams() as XWebParams).content
|
||||||
@State title?: string = (router.getParams() as XWebParams).title
|
@State title?: string = (router.getParams() as XWebParams).title
|
||||||
@State xController?: XWebController = (router.getParams() as XWebParams).controller
|
@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 closeTag?: string = (router.getParams() as XWebParams).closeTag
|
||||||
@State showMenu: boolean = (router.getParams() as XWebParams).showMenu ?? false
|
@State showMenu: boolean = (router.getParams() as XWebParams).showMenu ?? false
|
||||||
@State errorInfo: string | null = null
|
@State errorInfo: string | null = null
|
||||||
@ -35,7 +37,6 @@ export struct XWebview {
|
|||||||
aboutToAppear(): void {
|
aboutToAppear(): void {
|
||||||
SZYXLocalStorageHelper.storage.setOrCreate(SZYXLocalStorageKeys.XWebViewCLose, undefined)
|
SZYXLocalStorageHelper.storage.setOrCreate(SZYXLocalStorageKeys.XWebViewCLose, undefined)
|
||||||
webview.WebviewController.setWebDebuggingAccess(true);
|
webview.WebviewController.setWebDebuggingAccess(true);
|
||||||
|
|
||||||
if (this._uuidToHtml) {
|
if (this._uuidToHtml) {
|
||||||
XWebManager.addOnMessageToHtml(this._uuidToHtml, (msg) => {
|
XWebManager.addOnMessageToHtml(this._uuidToHtml, (msg) => {
|
||||||
if (this.ports && this.ports[1]) {
|
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 {
|
aboutToDisappear(): void {
|
||||||
@ -51,6 +57,14 @@ export struct XWebview {
|
|||||||
}
|
}
|
||||||
XWebManager.removeOnMessage(this._uuid)
|
XWebManager.removeOnMessage(this._uuid)
|
||||||
XWebManager.removeOnMessageToHtml(this._uuidToHtml)
|
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 {
|
onBackPress(): boolean | void {
|
||||||
@ -118,6 +132,12 @@ export struct XWebview {
|
|||||||
|
|
||||||
Web({ src: this.url ?? 'www.example.com', controller: this.controller })
|
Web({ src: this.url ?? 'www.example.com', controller: this.controller })
|
||||||
.javaScriptAccess(true)
|
.javaScriptAccess(true)
|
||||||
|
.javaScriptProxy({
|
||||||
|
object: XWebManager.objs.get(this._uuidToHtml),
|
||||||
|
name: this.jsParams?.name,
|
||||||
|
methodList: this.jsParams?.methodList,
|
||||||
|
controller: this.controller
|
||||||
|
})
|
||||||
.domStorageAccess(true)
|
.domStorageAccess(true)
|
||||||
.geolocationAccess(true)
|
.geolocationAccess(true)
|
||||||
.width('100%')
|
.width('100%')
|
||||||
@ -312,7 +332,11 @@ export struct XWebview {
|
|||||||
values: ['刷新', '浏览器打开', '分享', '复制地址'],
|
values: ['刷新', '浏览器打开', '分享', '复制地址'],
|
||||||
// 用户选择事件
|
// 用户选择事件
|
||||||
onSelected: (index: number, value: string) => {
|
onSelected: (index: number, value: string) => {
|
||||||
ToolsHelper.showMessage(`用户选择了第${index}个,内容为:${value}`)
|
if (index === 0) {
|
||||||
|
this.controller.refresh()
|
||||||
|
} else {
|
||||||
|
ToolsHelper.showMessage(`用户选择了第${index}个,内容为:${value}`)
|
||||||
|
}
|
||||||
},
|
},
|
||||||
// 用户取消事件
|
// 用户取消事件
|
||||||
onCancel: () => {
|
onCancel: () => {
|
||||||
|
|||||||
@ -12,19 +12,31 @@ export interface XWebController {
|
|||||||
sendMessage: (message: string) => void
|
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 {
|
export interface XWebParams {
|
||||||
url?: string
|
url?: string
|
||||||
zoomAccess?: boolean
|
|
||||||
content?: string
|
content?: string
|
||||||
title?: string
|
title?: string
|
||||||
showMenu?: boolean
|
|
||||||
closeTag?: string
|
|
||||||
watermarkTxt?: string
|
watermarkTxt?: string
|
||||||
_uuid?: string
|
showMenu?: boolean
|
||||||
_uuidToHtml?: string
|
jsParams?: JsParams
|
||||||
|
closeTag?: string
|
||||||
|
headers?: Array<WebHeader>
|
||||||
onMessage?: (message: string) => void
|
onMessage?: (message: string) => void
|
||||||
controller?: XWebController
|
controller?: XWebController
|
||||||
headers?: Array<WebHeader>
|
zoomAccess?: boolean
|
||||||
|
_uuid?: string
|
||||||
|
_uuidToHtml?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
export class XWebHelper {
|
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) => {
|
return new Promise((resolve) => {
|
||||||
router.pushNamedRoute({
|
router.pushNamedRoute({
|
||||||
name: 'XWebview',
|
name: 'XWebview',
|
||||||
|
|||||||
@ -2,6 +2,7 @@ import { ToolsHelper } from './ToolsHelper';
|
|||||||
|
|
||||||
export class XWebManager {
|
export class XWebManager {
|
||||||
private static MapEventListener = new Map<string, (msg: string) => void>();
|
private static MapEventListener = new Map<string, (msg: string) => void>();
|
||||||
|
static objs:Map<string,object> = new Map()
|
||||||
|
|
||||||
static addOnMessage(listener: (msg: string) => void): string {
|
static addOnMessage(listener: (msg: string) => void): string {
|
||||||
const id = ToolsHelper.getUuid()
|
const id = ToolsHelper.getUuid()
|
||||||
@ -38,4 +39,22 @@ export class XWebManager {
|
|||||||
item(message)
|
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)
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
正在加载...
在新工单中引用
屏蔽一个用户