@genee/uno-webview

基于 iframe 的父窗口和子窗口的通讯机制实现，支持 React 和 Vue 3。

安装

npm install @genee/uno-webview

使用方式

React Hooks (默认)

import { useUno, useUnoParams, useUnoGlobals } from '@genee/uno-webview';

function MyComponent() {
    const uno = useUno();
    const params = useUnoParams();
    const globals = useUnoGlobals();

    // 事件订阅
    useUnoEvent('customEvent', (data) => {
        console.log('Received event:', data);
    });

    // 方法创建
    useUnoMethod('customMethod', (param) => {
        console.log('Method called with:', param);
        return 'response';
    });

    // 使用逻辑
    return <div>Hello World</div>;
}

Vue 3 Composition API

import { useUno, useUnoParams, useUnoGlobals, useUnoEvent, useUnoMethod } from '@genee/uno-webview/vue';

export default {
    setup() {
        const uno = useUno();
        const params = useUnoParams();
        const globals = useUnoGlobals();

        // 事件订阅
        useUnoEvent('customEvent', (data) => {
            console.log('Received event:', data);
        });

        // 方法创建
        useUnoMethod('customMethod', (param) => {
            console.log('Method called with:', param);
            return 'response';
        });

        return { uno, params, globals };
    },
};

显式导入 React 模块

import { useUno, useUnoParams, useUnoGlobals } from '@genee/uno-webview/react';

API 参考

核心函数

useUno() / getUno()

获取 Uno 实例，用于与父窗口通信。

useUnoParams(keys?: string[])

获取响应式参数。

• React: 返回 Record<string, any> 或 any[]
• Vue: 返回 Ref<Record<string, any>> 或 Ref<any[]>

useUnoGlobals(keys?: string[])

获取响应式全局状态。

• React: 返回 Record<string, any> 或 any[]
• Vue: 返回 Ref<Record<string, any>> 或 Ref<any[]>

useUnoEvent(event: string, handler: Function)

订阅事件，组件卸载时自动取消订阅。

useUnoMethod(method: string, handler: Function)

创建方法，组件卸载时自动销毁。

类型支持

本库提供完整的 TypeScript 类型定义，支持 React 和 Vue 3 的类型推断。

兼容性

• React 18+
• Vue 3.0+
• TypeScript 4.5+