51 lines
2.1 KiB
Markdown
51 lines
2.1 KiB
Markdown
|
# 黄精粉小程序 UniApp 运行说明
|
|||
|
|
|
|||
|
|
## 推荐方式：使用 HBuilderX 运行到浏览器（H5）
|
|||
|
|
|
|||
|
|
本 CRMEB 项目的小程序端按 HBuilderX + uni-app 标准目录设计，**推荐使用 HBuilderX 进行开发与预览**：
|
|||
|
|
|
|||
|
|
1. 安装 [HBuilderX](https://www.dcloud.io/hbuilderx.html)（正式版或 App 开发版）。
|
|||
|
|
2. 用 HBuilderX 打开本目录：`pro_v3.5.1/view/uniapp`（即当前 package.json 所在目录）。
|
|||
|
|
3. 在菜单栏选择 **运行 → 运行到浏览器 → 选择 Chrome（或其他浏览器）**。
|
|||
|
|
4. 等待编译完成后，会自动打开浏览器，即可查看 Mock 演示效果。
|
|||
|
|
|
|||
|
|
在 H5 预览下可看到：
|
|||
|
|
- 首页 / 个人中心右下角的 **演示控制面板**（紫色悬浮按钮）
|
|||
|
|
- 切换场景 A/B/C、快捷跳转、退款弹窗等 Mock 演示功能
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 命令行方式（可选）
|
|||
|
|
|
|||
|
|
已在 `package.json` 中配置脚本与依赖，满足以下条件时可尝试命令行启动 H5：
|
|||
|
|
|
|||
|
|
- 需在 **本目录**（`view/uniapp`）下执行。
|
|||
|
|
- 若使用 Vue CLI 5，可能与当前 uni-app 插件的 webpack 规则不兼容，出现 `No matching use for foo.js` 或 `reading 'use'` 等错误，此时请改用 HBuilderX。
|
|||
|
|
|
|||
|
|
### 启动 H5 开发服务
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
cd pro_v3.5.1/view/uniapp
|
|||
|
|
|
|||
|
|
# 设置环境变量并启动（Mac/Linux）
|
|||
|
|
UNI_CLI_CONTEXT=$(pwd) UNI_PLATFORM=h5 UNI_INPUT_DIR=$(pwd) npx vue-cli-service uni-serve --platform h5
|
|||
|
|
|
|||
|
|
# 或使用 npm 脚本（需已安装 cross-env）
|
|||
|
|
npm run dev:h5
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
默认端口：**8080**（在 `vue.config.js` 的 `devServer.port` 中配置）。
|
|||
|
|
启动成功后，在浏览器访问：**http://localhost:8080**。
|
|||
|
|
|
|||
|
|
### 微信小程序开发
|
|||
|
|
|
|||
|
|
使用 HBuilderX 打开本目录后，选择 **运行 → 运行到小程序模拟器 → 微信开发者工具**，并先在本地打开微信开发者工具。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Mock 演示说明
|
|||
|
|
|
|||
|
|
- 所有 HJF 相关接口当前使用 **Mock 数据**（`utils/hjfMockData.js`），无需后端即可演示。
|
|||
|
|
- 右下角 **演示控制面板** 可切换场景 A（新用户）/ B（活跃用户）/ C（VIP），并支持快捷跳转、退款弹窗、重置引导等。
|
|||
|
|
- 完整演示路线与验收点见：**docs/mock-demo-walkthrough.md**。
|