鸿蒙OSUniApp微服务架构实践：从设计到鸿蒙部署#三方框架 #Uniapp

news2025/6/4 19:54:37

UniApp微服务架构实践：从设计到鸿蒙部署

引言

在最近的一个大型跨平台项目中，我们面临着一个有趣的挑战：如何在UniApp框架下构建一个可扩展的微服务架构，并确保其在包括鸿蒙在内的多个操作系统上流畅运行。本文将分享我们的实践经验，从架构设计到具体实现，再到鸿蒙系统的特殊适配。

技术栈选择

在项目初期，我们经过反复论证，最终确定了以下技术栈：

前端框架：UniApp + Vue3 + TypeScript
状态管理：Pinia
网络请求：封装的Axios适配层
微服务通信：基于WebSocket的自研消息总线
数据存储：本地SQLite + 云端分布式存储
鸿蒙适配：HMS Core套件

整体架构设计

1. 分层架构

我们采用了清晰的分层架构设计：

├── src/
│   ├── core/                 # 核心功能模块
│   │   ├── bus/             # 消息总线
│   │   ├── network/         # 网络请求层
│   │   └── storage/         # 存储层
│   ├── services/            # 微服务模块
│   │   ├── auth/            # 认证服务
│   │   ├── payment/         # 支付服务
│   │   └── user/            # 用户服务
│   ├── ui/                  # UI组件
│   └── utils/               # 工具类

2. 微服务通信实现

以下是我们实现的消息总线核心代码：

// core/bus/MessageBus.ts
export class MessageBus {
    private static instance: MessageBus;
    private subscribers: Map<string, Function[]>;
    private ws: WebSocket | null;
    private reconnectAttempts: number = 0;
    private readonly MAX_RECONNECT_ATTEMPTS = 5;

    private constructor() {
        this.subscribers = new Map();
        this.initializeWebSocket();
    }

    static getInstance(): MessageBus {
        if (!MessageBus.instance) {
            MessageBus.instance = new MessageBus();
        }
        return MessageBus.instance;
    }

    private initializeWebSocket() {
        // 根据平台选择适当的连接地址
        const platform = uni.getSystemInfoSync().platform;
        const wsUrl = platform === 'harmony' 
            ? 'ws://harmony-specific-endpoint'
            : 'ws://default-endpoint';

        this.ws = new WebSocket(wsUrl);
        
        this.ws.onmessage = (event) => {
            try {
                const message = JSON.parse(event.data);
                this.handleMessage(message);
            } catch (error) {
                console.error('消息解析失败:', error);
            }
        };

        this.ws.onclose = () => {
            if (this.reconnectAttempts < this.MAX_RECONNECT_ATTEMPTS) {
                setTimeout(() => {
                    this.reconnectAttempts++;
                    this.initializeWebSocket();
                }, 1000 * Math.pow(2, this.reconnectAttempts));
            }
        };
    }

    private handleMessage(message: any) {
        const { type, payload } = message;
        const subscribers = this.subscribers.get(type) || [];
        subscribers.forEach(callback => callback(payload));
    }

    subscribe(type: string, callback: Function) {
        const subscribers = this.subscribers.get(type) || [];
        subscribers.push(callback);
        this.subscribers.set(type, subscribers);
    }

    publish(type: string, payload: any) {
        if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
            throw new Error('WebSocket连接未建立');
        }

        this.ws.send(JSON.stringify({ type, payload }));
    }
}

3. 网络请求适配层

为了处理不同平台的网络请求特性，我们封装了统一的请求层：

// core/network/HttpClient.ts
import { Platform } from '@/utils/platform';

export class HttpClient {
    private static instance: HttpClient;
    private platform: Platform;

    private constructor() {
        this.platform = new Platform();
    }

    static getInstance(): HttpClient {
        if (!HttpClient.instance) {
            HttpClient.instance = new HttpClient();
        }
        return HttpClient.instance;
    }

    async request<T>(config: RequestConfig): Promise<T> {
        // 鸿蒙系统特殊处理
        if (this.platform.isHarmony()) {
            return this.harmonyRequest<T>(config);
        }

        // 其他平台通用处理
        return new Promise((resolve, reject) => {
            uni.request({
                ...config,
                success: (response) => {
                    resolve(response.data as T);
                },
                fail: (error) => {
                    reject(error);
                }
            });
        });
    }

    private async harmonyRequest<T>(config: RequestConfig): Promise<T> {
        // 鸿蒙平台特殊网络请求处理
        const harmonyHttp = uni.requireNativePlugin('http');
        
        return new Promise((resolve, reject) => {
            harmonyHttp.request({
                ...config,
                headers: {
                    ...config.headers,
                    'harmony-version': '2.0'
                },
                success: (response: any) => {
                    resolve(response.data as T);
                },
                fail: (error: any) => {
                    reject(error);
                }
            });
        });
    }
}

实战案例：支付服务实现

下面是一个实际的支付服务实现示例：

// services/payment/PaymentService.ts
import { MessageBus } from '@/core/bus/MessageBus';
import { HttpClient } from '@/core/network/HttpClient';
import { Platform } from '@/utils/platform';

export class PaymentService {
    private messageBus: MessageBus;
    private httpClient: HttpClient;
    private platform: Platform;

    constructor() {
        this.messageBus = MessageBus.getInstance();
        this.httpClient = HttpClient.getInstance();
        this.platform = new Platform();
    }

    async initiatePayment(orderInfo: OrderInfo): Promise<PaymentResult> {
        try {
            // 根据平台选择支付方式
            if (this.platform.isHarmony()) {
                return await this.handleHarmonyPayment(orderInfo);
            } else if (this.platform.isWeixin()) {
                return await this.handleWeixinPayment(orderInfo);
            }

            throw new Error('不支持的支付平台');
        } catch (error) {
            console.error('支付发起失败:', error);
            throw error;
        }
    }

    private async handleHarmonyPayment(orderInfo: OrderInfo): Promise<PaymentResult> {
        // 调用鸿蒙支付API
        const harmonyPay = uni.requireNativePlugin('harmony-pay');
        
        return new Promise((resolve, reject) => {
            harmonyPay.pay({
                orderId: orderInfo.orderId,
                amount: orderInfo.amount,
                description: orderInfo.description,
                success: (result: any) => {
                    // 发布支付成功事件
                    this.messageBus.publish('payment.success', {
                        orderId: orderInfo.orderId,
                        timestamp: Date.now()
                    });
                    resolve(result);
                },
                fail: (error: any) => {
                    reject(error);
                }
            });
        });
    }

    private async handleWeixinPayment(orderInfo: OrderInfo): Promise<PaymentResult> {
        // 微信支付实现...
    }
}