接口: JavaScriptBridge

2022/10/22约 829 字大约 3 分钟老猫

ui/web.JavaScriptBridge

JavaScriptBridge 接口用于在 WebView 和 JavaScript 之间进行双向通信。它继承自 EventEmitter，支持事件监听和消息传递。

继承关系

EventEmitter
↳ JavaScriptBridge

JavaScriptBridge 接口继承自 EventEmitter，因此可以使用所有 EventEmitter 的方法，如 on(), once(), off(), removeListener() 等。

"nodejs";
const { inflateXml } = require("ui/layout");

async function main() {
    const rootView = inflateXml(context, `
        <WebView id="webview" />
    `);
    const webView = rootView.findView("webview");
    
    // 在 WebView 中执行 JavaScript 代码
    const result = await webView.jsBridge.eval("document.title");
    console.log("页面标题:", result);
}
main();

参数

名称	类型	描述
`code`	`string`	要在 WebView 的 JavaScript 上下文中执行的代码

返回值

Promise<any>

返回一个 Promise，resolve 时返回代码执行的结果。

handle

▸ handle(action, handler): JavaScriptBridge

注册一个处理器，用于处理来自 WebView 中 JavaScript 的调用请求。当 WebView 中的 JavaScript 调用 invoke() 方法时，对应的处理器会被调用。

示例

"nodejs";
const { inflateXml } = require("ui/layout");

async function main() {
    const rootView = inflateXml(context, `
        <WebView id="webview" />
    `);
    const webView = rootView.findView("webview");
    
    // 注册处理器
    webView.jsBridge.handle("getData", async (event, ...args) => {
        console.log("收到调用请求:", event.channel, args);
        return { success: true, data: "Hello from Native" };
    });
    
    // 加载包含 JavaScript 代码的页面
    webView.loadUrl("file:///android_asset/index.html");
}
main();

参数

名称	类型	描述
`action`	`string` \| `null` \| `undefined`	要处理的 action 名称。如果为 `null` 或 `undefined`，则处理所有未匹配的调用
`handler`	`InvokeRequestHandler`	处理函数，接收 `InvokeEvent` 和额外的参数，返回处理结果或 Promise

返回值

JavaScriptBridge

返回 JavaScriptBridge 对象本身，支持链式调用。

invoke

▸ invoke(channel, ...args): Promise<any>

从 Native 端调用 WebView 中的 JavaScript 函数。此方法会向 WebView 发送一个调用请求，并等待 JavaScript 端的响应。

示例

"nodejs";
const { inflateXml } = require("ui/layout");

async function main() {
    const rootView = inflateXml(context, `
        <WebView id="webview" />
    `);
    const webView = rootView.findView("webview");
    
    // 加载页面
    await webView.loadUrl("file:///android_asset/index.html");
    
    // 调用 WebView 中的 JavaScript 函数
    const result = await webView.jsBridge.invoke("myFunction", "arg1", "arg2");
    console.log("调用结果:", result);
}
main();

参数

名称	类型	描述
`channel`	`string`	要调用的 JavaScript 函数或 channel 名称
`...args`	`any`	传递给 JavaScript 函数的参数

返回值

Promise<any>

返回一个 Promise，resolve 时返回 JavaScript 端的响应结果。

on

▸ on(event, listener): JavaScriptBridge

监听来自 WebView 中 JavaScript 的事件。当 WebView 中的 JavaScript 调用 send() 方法时，对应的事件监听器会被触发。

示例

"nodejs";
const { inflateXml } = require("ui/layout");

async function main() {
    const rootView = inflateXml(context, `
        <WebView id="webview" />
    `);
    const webView = rootView.findView("webview");
    
    // 监听来自 WebView 的事件
    webView.jsBridge.on("message", (event, ...args) => {
        console.log("收到事件:", event.name, args);
    });
    
    // 加载页面
    webView.loadUrl("file:///android_asset/index.html");
}
main();

参数

名称	类型	描述
`event`	`string`	要监听的事件名称
`listener`	(`event`: `IPCEvent`, ...`args`: `any`) => `void`	事件监听器函数。第一个参数为 `IPCEvent` 对象，后续参数为事件传递的数据

返回值

JavaScriptBridge

返回 JavaScriptBridge 对象本身，支持链式调用。

send

▸ send(event, ...args): void

向 WebView 中的 JavaScript 发送事件。此方法会立即发送事件，不会等待响应。

示例

"nodejs";
const { inflateXml } = require("ui/layout");

async function main() {
    const rootView = inflateXml(context, `
        <WebView id="webview" />
    `);
    const webView = rootView.findView("webview");
    
    // 加载页面
    await webView.loadUrl("file:///android_asset/index.html");
    
    // 向 WebView 发送事件
    webView.jsBridge.send("updateData", { key: "value" });
}
main();

参数

名称	类型	描述
`event`	`string`	要发送的事件名称
`...args`	`any`	要传递的数据，可以是任意类型

返回值

void