aile-capacitor-aiff/dist/aiff-integration.js

AIFF WebView plugin for Capacitor with iframe-based web implementation

/**
 * AIFF框架集成示例
 * 展示了如何使用Capacitor-AIFF插件与AIFF前端框架进行交互
 */
export class AiffIntegration {
    /**
     * 打开AIFF页面并建立通信
     */
    static async openAiffPage(webView, url, options = {}) {
        const defaultOptions = Object.assign({ url, title: 'AIFF应用', toolbarType: 'activity', theme: 'auto', allowPopups: true }, options);
        // 监听来自AIFF页面的消息
        webView.addListener('messageFromWebview', (event) => {
            console.log('收到来自AIFF页面的消息:', event.detail);
            this.handleAiffMessage(event.detail, webView);
        });
        // 监听URL变化
        webView.addListener('urlChangeEvent', (event) => {
            console.log('AIFF页面URL变化:', event.url);
        });
        // 监听关闭事件
        webView.addListener('closeEvent', (event) => {
            console.log('AIFF页面关闭:', event.url);
        });
        await webView.openWebView(defaultOptions);
    }
    /**
     * 向AIFF页面发送消息
     */
    static async sendMessageToAiff(webView, message) {
        await webView.postMessage({ detail: message });
    }
    /**
     * 发送数据到AIFF页面
     */
    static async sendDataToAiff(webView, data, type = 'data') {
        await this.sendMessageToAiff(webView, {
            type,
            data
        });
    }
    /**
     * 处理来自AIFF页面的消息
     */
    static handleAiffMessage(message, webView) {
        switch (message.type) {
            case 'ready':
                console.log('AIFF页面已准备就绪');
                break;
            case 'request':
                console.log('AIFF页面请求数据:', message.data);
                // 处理请求并返回数据
                this.handleAiffRequest(message.data, message.id, webView);
                break;
            case 'action':
                console.log('AIFF页面执行操作:', message.data);
                // 执行相应的操作
                this.handleAiffAction(message.data, webView);
                break;
            default:
                console.log('未知消息类型:', message.type, message);
        }
    }
    /**
     * 处理AIFF页面的数据请求
     */
    static async handleAiffRequest(request, requestId, webView) {
        let response = null;
        switch (request.type) {
            case 'user-info':
                // 获取用户信息
                response = await this.getUserInfo();
                break;
            case 'device-info':
                // 获取设备信息
                response = await this.getDeviceInfo();
                break;
            case 'app-config':
                // 获取应用配置
                response = await this.getAppConfig();
                break;
            default:
                console.warn('未知的请求类型:', request.type);
        }
        if (requestId && webView) {
            // 发送响应
            await this.sendMessageToAiff(webView, {
                type: 'response',
                data: response,
                id: requestId
            });
        }
    }
    /**
     * 处理AIFF页面的操作请求
     */
    static async handleAiffAction(action, webView) {
        switch (action.type) {
            case 'close':
                // 关闭WebView - 通过postMessage通知关闭
                break;
            case 'reload':
                // 重新加载页面
                await webView.reload();
                break;
            case 'navigate':
                // 导航到新URL
                if (action.url) {
                    await webView.setUrl({ url: action.url });
                }
                break;
            default:
                console.warn('未知的操作类型:', action.type);
        }
    }
    /**
     * 获取用户信息（示例实现）
     */
    static async getUserInfo() {
        // 这里应该从实际的用户服务获取数据
        return {
            id: 'user123',
            name: '张三',
            email: 'zhangsan@example.com',
            avatar: 'https://example.com/avatar.jpg'
        };
    }
    /**
     * 获取设备信息（示例实现）
     */
    static async getDeviceInfo() {
        return {
            platform: 'web',
            version: '1.0.0',
            userAgent: navigator.userAgent,
            screen: {
                width: window.screen.width,
                height: window.screen.height
            }
        };
    }
    /**
     * 获取应用配置（示例实现）
     */
    static async getAppConfig() {
        return {
            theme: 'light',
            language: 'zh-CN',
            apiEndpoint: 'https://api.example.com',
            features: {
                notifications: true,
                analytics: true,
                cache: true
            }
        };
    }
}