@genee/uno-webview

uno-webview

内部主页 Uno 暴露的结构

class Uno {
    params: Record<string, any>;
    globals: Record<string, any>;
    setParams(params: any, overwrite?: boolean): void;
    observe(key: string): void;
    setSessionId(sessionId: string): void;
    get session(): {
        setItem: (key: string, value: any) => Promise<void>;
        getItem: (key: string) => Promise<any>;
    };
    logger(name?: string): (level: string, ...args: any[]) => void;
}

内部主页 AMD 方式加载

// src/lib/Uno.tsx
import { define, load } from '@genee/pico';
import * as JsonRPCModule from '@genee/json-rpc';
import * as ReactModule from 'react';

define('@genee/json-rpc', JsonRPCModule);
define('react', ReactModule);

let uno: any;
async function loadUno() {
    const UNO_WEBVIEW_URL = 'https://path/to/uno.webview.js';
    uno = await load(UNO_WEBVIEW_URL);
}

const useUno = () => uno.useUno()
const useUnoParams = () => uno.useUnoParams()
const useUnoGlobals = () => uno.useUnoGlobals()

export { loadUno, useUno, useUnoParams, useUnoGlobals };

// src/main.ts
import { loadUno } from './lib/Uno';

async main() {
    const docRoot = document.getElementById('root');
    try {
        await loadUno();
        document.title = config.appName;
        ReactDOM.render(
            <React.StrictMode>
                <App />
            </React.StrictMode>,
            docRoot,
        );
    } catch (e) {
        console.error(e);
        ReactDOM.render(<div className='component-loading'>无法识别当前站点配置或Uno对象加载不正常</div>, docRoot);
    }
}

main();

// App.ts
import { useUnoParams } from './lib/Uno';;
export default function App() {
    const [accessToken] = useUnoParams(['accessToken']);
    return <div>{accessToken}</div>;
}

内部主页, ES 模块加载

// main.ts
ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    docRoot,
);

// App.ts
import { useUnoParams } from '@genee/uno-webview/es/child';
export default function App() {
    const [accessToken] = useUnoParams(['accessToken']);
    return <div>{accessToken}</div>;
}

外部容器

import { useRef } from 'react';
import { WebView, IWebView } from '@genee/uno-webview/es/parent';


function App() {
    const viewRef = useRef<IWebView>();
    const [params, setParams] = useState<Record<string, any>>({ accessToken: 'foobar' });
    const [globals, { setGlobals, addGlobalsObserver }] = useGlobals();
    return (
        <WebView
            ref={viewRef}
            params={params}
            sessionStorage={{
                setItem: (k, v) => sessionStorage.setItem(k, JSON.stringify(v)),
                getItem: (k) => JSON.parse(sessionStorage.getItem(k)),
            }}
            onLocationChange={(uri: string) => {
                console.log(`location changed to ${uri}`);
            }}
            onMethod={(method, params) => {
                // some customized methods
                return false;
            }}
            style={{ backgroundColor: '#eee', width: 640, height: 480 }}
            src='http://localhost:3001'
        />
    );
}