Penny Lens 移动端技术架构

技术架构

🏗️ 系统架构

Penny Lens 小程序端采用现代化的跨平台技术栈，基于 UniApp + Vue 3 + TypeScript 构建，提供高性能、可扩展的移动端财务管理解决方案。

🛠️ 技术栈

核心框架

UniApp - 跨平台应用开发框架
Vue 3 - 渐进式 JavaScript 框架，Composition API
TypeScript - 类型安全的 JavaScript 超集

UI 与样式

wot-design-uni - 跨平台 UI 组件库
UnoCSS - 原子化 CSS 引擎
Iconify - 统一的图标库

状态管理与工具

Pinia - Vue 官方状态管理库
VueUse - Vue Composition API 工具集
Vue I18n - 国际化解决方案

开发工具

Vite - 快速构建工具
ESLint - 代码质量检查
Prettier - 代码格式化

📁 项目结构

1
src/
2
├── components/          # 公共组件
3
│   ├── AppProvider/    # 应用提供者组件
4
│   ├── AssetSelector/  # 资产选择器
5
│   ├── Iconify/        # 图标组件
6
│   ├── Keyboard/       # 键盘组件
7
│   └── Prompt/         # 提示组件
8
├── pages/              # 页面目录
9
│   ├── accounting/     # 记账相关页面
10
│   ├── assets/         # 资产管理页面
11
│   ├── auth/           # 认证相关页面
12
│   ├── averageCost/    # 平均成本页面
13
│   ├── mine/           # 个人中心页面
14
│   ├── savings/        # 储蓄页面
15
│   ├── statistics/     # 统计页面
16
│   └── template/       # 模板页面
17
├── store/              # Pinia状态管理
18
│   ├── app.ts         # 应用状态
19
│   ├── user.ts        # 用户状态
20
│   ├── asset.ts        # 资产状态
21
│   ├── accounting.ts   # 记账状态
22
│   ├── savings.ts      # 储蓄状态
23
│   └── global.ts       # 全局状态
24
├── services/           # API服务
25
│   ├── api/           # API接口
26
│   ├── asset.ts       # 资产服务
27
│   └── budget.ts      # 预算服务
28
├── utils/              # 工具函数
29
│   ├── request.ts     # 请求工具
30
│   ├── cache.ts       # 缓存工具
31
│   ├── auth.ts        # 认证工具
32
│   └── ...
33
├── types/              # TypeScript类型定义
34
│   ├── user.ts        # 用户类型
35
│   ├── asset.ts       # 资产类型
36
│   ├── accounting.ts   # 记账类型
37
│   └── ...
38
├── styles/             # 样式文件
39
│   ├── main.css       # 主样式文件
40
│   └── ...
41
├── hooks/              # Vue组合式API钩子
42
│   ├── app/           # 应用钩子
43
│   └── ...
44
├── enums/              # 枚举定义
45
│   ├── cacheEnum.ts   # 缓存枚举
46
│   ├── httpEnum.ts    # HTTP枚举
47
│   └── savingsEnum.ts # 储蓄枚举
48
├── router/             # 路由配置
49
│   ├── index.ts       # 路由入口
50
│   └── guard.ts       # 路由守卫
51
└── settings/           # 配置文件
52
    └── encryptionSetting.ts # 加密设置

🔧 核心功能模块

1. 认证模块

功能: 用户登录、注册、多平台认证

技术实现:

JWT Token 认证
多平台登录支持（微信、支付宝）
自动 Token 刷新
本地数据加密

相关文件:

services/api/user.ts - 用户认证 API
store/user.ts - 用户状态管理
router/guard.ts - 路由守卫

2. 记账模块

功能: 快速记账、分类管理、批量操作

技术实现:

简化的记账流程
智能分类推荐
批量操作支持
离线记账

相关文件:

services/api/accounting.ts - 记账 API
store/accounting.ts - 记账状态管理
pages/accounting/ - 记账相关页面

3. 资产管理模块

功能: 多账户管理、余额跟踪、资产变化

技术实现:

多账户类型支持
实时余额更新
资产变化追踪
转账功能

相关文件:

services/api/asset.ts - 资产 API
store/asset.ts - 资产状态管理
pages/assets/ - 资产相关页面

4. 存钱罐模块

功能: 游戏化储蓄、虚拟交易、目标管理

技术实现:

储蓄目标设定
虚拟交易系统
成就系统
历史记录

相关文件:

services/api/savings.ts - 储蓄 API
store/savings.ts - 储蓄状态管理
pages/savings/ - 储蓄相关页面

5. 统计模块

功能: 收支统计、趋势分析、报表生成

技术实现:

基础收支统计
分类统计
趋势分析
报表生成

相关文件:

services/api/statistics.ts - 统计 API
store/statistics.ts - 统计状态管理
pages/statistics/ - 统计相关页面

🔄 数据流架构

状态管理

// 用户状态管理
export const useUserStore = defineStore('user', () => {
  const userInfo = ref<UserInfo | null>(null)
  const isLoggedIn = computed(() => !!userInfo.value)
  
  const login = async (credentials: LoginCredentials) => {
    // 登录逻辑
  }
  
  const logout = () => {
    // 登出逻辑
  }
  
  return {
    userInfo,
    isLoggedIn,
    login,
    logout
  }
})

API 服务

// API 服务层
export const userApi = {
  login: (data: LoginData) => request.post<LoginResponse>('/auth/login', data),
  getUserInfo: () => request.get<UserInfo>('/user/info'),
  updateUserInfo: (data: UserInfo) => request.put<UserInfo>('/user/info', data)
}

组件通信

// 组件间通信
interface Props {
  title: string
  data: any[]
}
 
interface Emits {
  update: [value: string]
  delete: [id: string]
}
 
const props = defineProps<Props>()
const emit = defineEmits<Emits>()

🎨 设计系统集成

主题系统

// 主题配置
export const themeConfig = {
  primary: '#ffda44',
  success: '#10b981',
  warning: '#f59e0b',
  error: '#ef4444',
  info: '#3b82f6'
}

组件规范

<template>
  <div class="component-container">
    <!-- 组件内容 -->
  </div>
</template>
 
<script setup lang="ts">
// 组件逻辑
</script>
 
<style scoped>
.component-container {
  @apply w-full;
}
</style>

🔐 安全架构

数据安全

本地加密: 敏感数据 AES 加密存储
传输加密: HTTPS 传输
访问控制: 基于角色的权限控制
数据备份: 云端数据备份

认证安全

多平台认证: 微信、支付宝登录
会话管理: 安全的会话管理机制
Token 安全: JWT Token 安全机制
权限控制: 细粒度的权限控制

⚡ 性能优化

前端优化

代码分割: 按需加载，减少初始包大小
缓存策略: 智能缓存，提升用户体验
图片优化: 图片压缩和懒加载
CDN 加速: 静态资源 CDN 分发

构建优化

Tree Shaking: 移除未使用的代码
压缩优化: 代码和资源压缩
预加载: 关键资源预加载
缓存策略: 长期缓存策略

📱 多端适配

平台特性

微信小程序

// 微信小程序特有功能
export const wechatFeatures = {
  // 微信登录
  login: () => {
    // 微信登录逻辑
  },
  
  // 微信支付
  payment: () => {
    // 微信支付逻辑
  },
  
  // 微信分享
  share: () => {
    // 微信分享逻辑
  }
}

支付宝小程序

// 支付宝小程序特有功能
export const alipayFeatures = {
  // 支付宝登录
  login: () => {
    // 支付宝登录逻辑
  },
  
  // 支付宝支付
  payment: () => {
    // 支付宝支付逻辑
  },
  
  // 支付宝分享
  share: () => {
    // 支付宝分享逻辑
  }
}

H5

// H5 特有功能
export const h5Features = {
  // PWA 支持
  pwa: () => {
    // PWA 逻辑
  },
  
  // 浏览器兼容
  compatibility: () => {
    // 浏览器兼容逻辑
  }
}

App

// App 特有功能
export const appFeatures = {
  // 原生功能
  native: () => {
    // 原生功能逻辑
  },
  
  // 推送通知
  push: () => {
    // 推送通知逻辑
  }
}

响应式设计

/* 响应式断点 */
@media (max-width: 639px) {
  .mobile-only { display: block; }
  .desktop-only { display: none; }
}
 
@media (min-width: 640px) and (max-width: 1023px) {
  .tablet-only { display: block; }
}
 
@media (min-width: 1024px) {
  .desktop-only { display: block; }
  .mobile-only { display: none; }
}

🧪 测试策略

单元测试

组件测试: Vue Test Utils
工具函数测试: Vitest
状态管理测试: Pinia 测试
API 服务测试: Mock 测试

集成测试

页面测试: 端到端测试
API 集成测试: 真实 API 测试
用户流程测试: 完整用户流程测试

性能测试

加载性能: 页面加载时间测试
渲染性能: 组件渲染性能测试
内存使用: 内存泄漏检测

🚀 部署架构

开发环境

本地开发: Vite 开发服务器
热重载: 实时代码更新
调试工具: Vue DevTools
代码检查: ESLint + Prettier

生产环境

多端构建: 各平台独立构建
CDN 加速: 全球 CDN 分发
缓存策略: 长期缓存策略
监控告警: 性能监控和告警

📊 监控和运维

性能监控

前端监控: 页面性能、用户体验
错误监控: 错误收集和分析
用户行为: 用户行为分析
业务指标: 业务关键指标

日志管理

访问日志: 用户访问记录
错误日志: 系统错误和异常
业务日志: 业务操作记录
性能日志: 性能指标记录

🔄 持续集成

代码管理

版本控制: Git 版本控制
代码审查: Pull Request 代码审查
自动化测试: 单元测试、集成测试
代码质量: ESLint、TypeScript 检查

部署流程

自动化构建: CI/CD 自动化构建
环境管理: 开发、测试、生产环境
回滚机制: 快速回滚机制
灰度发布: 渐进式发布

📱 平台发布

微信小程序

# 构建微信小程序
pnpm build:mp-weixin
 
# 上传到微信开发者工具
# 提交审核
# 发布上线

支付宝小程序

# 构建支付宝小程序
pnpm build:mp-alipay
 
# 上传到支付宝开发者工具
# 提交审核
# 发布上线

H5

# 构建 H5
pnpm build:h5
 
# 部署到 CDN
# 配置域名
# 发布上线

App

# 构建 App
pnpm build:app
 
# 打包 APK/IPA
# 上传到应用商店
# 发布上线

重要提醒:

始终遵循技术架构规范
确保多端兼容性
保持代码质量和性能
优化用户体验和开发体验
遵循最佳实践和设计模式