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> {// 调用鸿蒙支付APIconst 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> {// 微信支付实现...}
}