🚀 UniappX 开源框架介绍

基于 uni-app x 官方生态二次封装的企业级跨端开发框架，开箱即用。

---

📦 项目简介

这是一个基于 uni-app x 官方能力封装的开源框架，旨在提升多端开发效率，统一组件风格，沉淀通用业务模块。

✨ 核心特性

• 🎨 UI 组件库：基于官方组件二次封装，统一设计风格
• 🔧 业务模块：沉淀通用业务功能，开箱即用
• 📱 多端适配：一套代码，多端运行（App / H5 / 小程序）
• 📦 TypeScript：完整类型支持，开发体验更好
• 🎯 企业级：经过实际项目验证，稳定可靠

---

💡 设计初衷

为什么要做这个框架？

市场现状

目前基于 uni-app x 的开源框架几乎是空白：

• 🔸 官方示例过于简陋：只有基础组件演示，没有实际业务模块
• 🔸 社区框架缺失：uni-app x 发布时间较短，成熟的开源框架很少
• 🔸 现有框架功能单薄：要么只有几个 UI 组件，要么没有后端配套

我们的目标

构建多端一体的开发体验：

• 🌐 Web 端：已有 NexusVue / NexusReact 前端框架
• 🖥️ 后端：已有 Node / Rust 后端，提供完整 API
• 📱 移动端：通过 NexusUniAppX 补齐 App / 小程序端

一套技术体系，从前端到后端到移动端，多端数据互通、风格统一，这就是天工开源项目的整体愿景。

---

🎨 UI 组件库

基于官方组件二次封装，提供更便捷的 API 和统一的交互体验。

基础组件

组件	说明	基于官方
nx-button	按钮组件，支持多种样式和状态	button
nx-input	输入框，带校验和提示	input
nx-cell	列表项，表单常用	view + text
nx-modal	弹窗，支持多种类型	modal
nx-toast	轻提示	toast
nx-loading	加载状态	loading

业务组件

组件	说明
nx-navbar	自定义导航栏，适配多端
nx-tabbar	底部标签栏，可配置
nx-list	下拉刷新 + 上拉加载列表
nx-form	动态表单，支持校验规则
nx-upload	图片/文件上传，带预览
nx-picker	选择器，支持多级联动

---

🔧 通用业务模块

网络请求模块

// 封装 uni.request，统一处理错误、loading、token
import { request } from '@/utils/request'

// GET 请求
request.get('/api/user', { id: 1 })

// POST 请求
request.post('/api/login', { username: 'admin', password: '123456' })

特性：

• 统一请求拦截 / 响应拦截
• 自动携带 token
• 统一错误提示
• 请求 loading 控制
• 请求取消

状态管理（Store）

基于 pinia 封装，提供通用 store 模板：

// 用户信息 store
export const useUserStore = defineStore('user', () => {
  const token = ref('')
  const userInfo = ref({})

  // 登录
  const login = async (form) => { ... }

  // 退出登录
  const logout = () => { ... }

  return { token, userInfo, login, logout }
})

路由封装

• 路由守卫
• 登录权限校验
• 页面跳转封装
• 返回上一页

工具函数

方法	说明
debounce	防抖
throttle	节流
formatDate	日期格式化
deepClone	深拷贝
storage	本地存储封装
validate	常用校验规则

---

📱 多端适配方案

条件编译

// #ifdef H5
console.log('H5 端')
// #endif

// #ifdef APP-PLUS
console.log('App 端')
// #endif

// #ifdef MP-WEIXIN
console.log('微信小程序')
// #endif

样式适配

• rpx 单位：自动适配不同屏幕尺寸
• 安全区适配：刘海屏、底部 Home 指示条自动适配
• 暗色模式：支持主题切换

---

🚀 快速开始

安装

# 克隆项目
git clone https://github.com/你的用户名/uni-appx-framework.git

# 安装依赖
npm install

# 运行 H5
npm run dev:h5

# 运行小程序
npm run dev:mp-weixin

目录结构

├── src
│   ├── components/     # 全局组件
│   ├── pages/          # 页面
│   ├── store/          # 状态管理
│   ├── utils/          # 工具函数
│   ├── api/            # 接口请求
│   ├── static/         # 静态资源
│   └── App.uvue        # 入口文件
├── pages.json          # 页面配置
├── manifest.json       # 应用配置
└── package.json

---

🤝 参与贡献

欢迎提交 Issue 和 PR，一起完善这个框架！

开发规范

• 遵循 TypeScript 严格模式
• 组件命名采用 nx- 前缀
• 提交信息遵循 Conventional Commits

---

📄 License

MIT