CRMEB/frontend/uni-app

CRMEB 开源版 — Uni-App 前端

项目简介

CRMEB 开源版 v8 的 Uni-App 前端项目，基于 uni-app（Vue 3 + <script setup>） + Pinia + Vue-i18n v9 构建，支持一套代码发布到 H5、微信小程序、支付宝小程序、APP (iOS/Android) 等多端。

工程为 uni-app 官方 CLI（Vite）结构，全部开发、调试、打包均可通过 npm 命令行完成，不依赖 HBuilderX。

技术栈

技术	说明
uni-app	3.0.0-5020420260813003（CLI / Vite 5，对应 HBuilderX 5.02.04 编译器）
Vue	^3.4
Pinia	^2.1
Vue-i18n	^9（legacy 模式，保留 this.$t / i18n.t() 双写法）
Sass	~1.78（dart-sass）
Node	>= 18

快速开始

# 0. 先启动后端（仓库根）：./run.sh install 或 ./run.sh start
npm ci                 # 使用镜像加速可追加 --registry=https://registry.npmmirror.com
npm run dev:h5         # H5 开发（浏览器访问 http://localhost:5173）

H5 接口地址已在 .env.development 配置为 http://localhost:8011（直连后端，后端已内置 CORS）；小程序 / APP 真机联调同样使用该地址，部署环境请改用 .env.production 或 .env.*.local 覆盖。

命令一览（dev 启动 / build 打包）

平台	启动	打包	产物目录
H5	npm run dev:h5	npm run build:h5	dist/build/h5
微信小程序	npm run dev:mp-weixin	npm run build:mp-weixin	dist/{dev,build}/mp-weixin
支付宝小程序	npm run dev:mp-alipay	npm run build:mp-alipay	dist/{dev,build}/mp-alipay
APP	npm run dev:app	npm run build:app	dist/{dev,build}/app

小程序调试

1. npm run dev:mp-weixin（或 build）后，用 微信开发者工具 导入 dist/dev/mp-weixin（或 dist/build/mp-weixin）
2. 小程序 appid 在 src/manifest.json 的 mp-weixin.appid 中配置（编译时会写入产物 project.config.json；未配置时为游客 appid，真机预览需填入自己的 appid）
3. 支付宝小程序同理，用支付宝开发者工具导入 dist/dev/mp-alipay

APP 打包说明

• npm run build:app 生成本地 APP 资源（dist/build/app），可用于 wgt 热更新包（将该目录压缩为 zip 改名 .wgt）
• 打 apk / ipa 安装包仍需 HBuilderX 云打包或离线 SDK（DCloud 平台限制，CLI 无法生成原生安装包）；HBuilderX 亦可直接导入本 CLI 工程操作

目录结构

├── index.html               # H5 模板（CLI 工程约定：位于项目根）
├── package.json             # npm 依赖与 dev/build 脚本
├── vite.config.js           # Vite 配置（uni 插件 + UNI_APP_API_URL 注入）
├── .env / .env.development / .env.production   # 环境变量（接口地址）
└── src/                     # 源码根（@/ 别名指向此处）
    ├── api/                 # 接口层（order-center.js / product-center.js 为中台新接口）
    ├── composables/         # 组合式函数：useColorTheme / useSendVerifyCode / useSharePoster
    ├── dynamic-pages/       # 动态页面渲染引擎层（订单中心 page_config 驱动）
    ├── pages/               # 页面（主包仅 5 个 tab/guide 页，其余全部分包）
    ├── subpackage/          # diyComponents 分包（DIY 装修组件 + productSections）
    ├── components/          # 公共组件（mp-html 富文本等）
    ├── plugin/              # 本地第三方库（dayjs / clipboard / jweixin 等）
    ├── static/              # 静态资源
    ├── store/               # Pinia（app / hotWords / indexData）
    ├── libs/ utils/ config/ # 工具与配置
    ├── App.vue  main.js     # 应用入口
    ├── manifest.json        # uni-app 平台配置（appid、各端设置）
    ├── pages.json           # 路由配置（带注释 JSON，10 个分包）
    └── uni.scss             # 全局样式变量

架构细节（动态渲染引擎、产品类型扩展、编码规范）见 AGENTS.md。

环境配置

接口地址通过 .env 系列文件管理（变量 UNI_APP_API_URL）：

• .env.development — 开发环境（dev 命令生效）
• .env.production — 生产环境（build 命令生效）
• .env.local / .env.*.local — 本地覆盖（已 gitignore，不入库）

优先级：.env.local > .env.[mode] > .env；未配置时回退 src/config/app.js 内各端默认值（H5 自动取当前域名）。vite.config.js 负责把该变量注入 process.env.UNI_APP_API_URL。

技术说明

• 请求封装：src/utils/request.js 统一处理请求拦截、Token 注入、错误处理
• 状态管理：Pinia（src/store/），禁止新增 Vuex 用法
• 国际化：src/utils/lang.js 多语言支持，语言包由后端下发
• 条件编译：#ifdef H5 / MP / MP-WEIXIN / APP-PLUS 等实现多端差异
• 小程序端动态组件限制：MP 端不支持 <component :is>，订单详情 section 在 MP 端经 SectionDispatcher 枚举分发（H5/APP 端仍为动态组件），新增 detail 组件需同步补一行分支

相关项目

• 后端 API：CRMEB 开源版 PHP 后端（ThinkPHP 8，多应用 /adminapi / /api / /outapi），见仓库 backend/
• 管理后台：CRMEB 开源版 Admin 前端（Vue 3 + Element Plus），见仓库 frontend/admin/