# miniProgram_doit

**Repository Path**: hou_chengwei/mini-program_doit

## Basic Information

- **Project Name**: miniProgram_doit
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-10-27
- **Last Updated**: 2026-10-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 做了么 · uni-app（Vue 3）版

习惯打卡小程序，从原生微信小程序工程迁移为 **uni-app + Vue 3 + Vite** 工程。
视觉与业务逻辑与原原型一致（今日打卡 / 圈子 / 榜单 / 我的 / 创建 / 模板库）。

## 快速开始

```bash
npm install            # 首次
npm run dev:mp-weixin  # 开发（watch，产物在 dist/dev/mp-weixin）
npm run build:mp-weixin # 发行（产物在 dist/build/mp-weixin）
```

## 怎么预览（微信开发者工具）

**唯一要点：导入的是 `dist` 里的产物目录，不是工程根目录。**

### 方式 A：直接看（不用起命令行）

1. 先构建一次：`npm run build:mp-weixin`
2. 微信开发者工具 → **导入项目**
3. 目录填：`C:\Users\kevin.hou.477\WorkBuddy\2026-10-27-16-23-03\zuoleme-uniapp\dist\build\mp-weixin`
4. AppID 填自己的，或直接点「测试号」
5. 确定 → 自动编译，看到登录页即成功

### 方式 B：开发时用（改代码自动重编译）★推荐

1. 终端在 `zuoleme-uniapp` 下执行并**保持窗口不关**：

   ```bash
   npm run dev:mp-weixin
   ```

   看到 `DONE Build complete. watching...` 即就绪
2. 开发者工具 → 导入项目 → 目录填 `dist\dev\mp-weixin`
3. 之后改 `src/**` 保存 → 工具里点「编译」（或开自动预览）即可看到变化
4. 停止：终端里 `Ctrl + C`

### 方式 C：用 HBuilderX 运行

本工程是 **CLI 工程**（npm 脚本驱动），HBuilderX 只是"调度器"，真正编译仍是 Vite：

1. **导入**：HBuilderX → 文件 → 导入 → 从本地目录导入 → 选 `zuoleme-uniapp` 根目录。
   标题栏应显示 `zuoleme-uniapp`（uni-app 项目标识）。若显示成 `zuoleme-uniapp - Web`，说明没被识别：
   先把项目从项目管理器移除（不勾选删除磁盘），确认 `package.json` 的 `dependencies` 里有 `@dcloudio/vite-plugin-uni` 后重新导入。
2. **前置配置（各做一次）**：
   - HBuilderX：菜单 工具 → 设置 → 运行配置 → 「微信开发者工具路径」指向 devtools 安装目录
   - 微信开发者工具：设置 → 安全设置 → **开启服务端口**
3. **运行**：菜单 运行 → 运行到小程序模拟器 → 微信开发者工具。
   HBuilderX 会自动执行 `npm run dev:mp-weixin` 并拉起工具（控制台看到 `Build complete. watching...` 为正常）。
4. **发行**：菜单 发行 → 小程序-微信，产物同样在 `dist/build/mp-weixin`。

> ⚠️ 不要在 HBuilderX 里对它点「运行到浏览器」当普通 Web 项目跑——会报「根目录缺少 index.html / 是否支持 vue3」，那说明它被识别成了 Web 项目，按第 1 步重新导入即可。
> HBuilderX 首次运行 CLI 工程时若提示执行 `npm install`，允许即可（依赖已装好，会很快）。

### 开发者工具里的三个建议设置

| 位置 | 设置 | 原因 |
| --- | --- | --- |
| 详情 → 本地设置 | 勾选「不校验合法域名、TLS 版本以及 HTTPS 证书」 | 否则云服务的 HTTPS 请求会被拦，登录报网络错误 |
| 工具栏 → 编译模式 | 添加 `pages/index/index` 等自定义编译 | 直接从某个页面调起，省得每次点进来 |
| 菜单 → 工具 → 清除缓存 | 改动「看起来没生效」时清一次 | 避免旧模块缓存 |

### 常见问题

| 现象 | 原因 / 处理 |
| --- | --- |
| 导入后报「app.json 未找到」 | 导错目录了，必须是 `dist/build/mp-weixin` 或 `dist/dev/mp-weixin` |
| 提示 AppID 无权限 / 未注册 | 详情 → 基本信息 → AppID 改成自己的；或改 `src/manifest.json` 的 `mp-weixin.appid` 后重新构建 |
| 页面白屏、Console 无报错 | 多半是还没起 `dev` 构建（产物是旧的），重新 `npm run dev:mp-weixin` |
| 登录/打卡报网络错误 | 打开上面「不校验合法域名」；再不行把 Console 红字发我 |
| 底部 tabBar 只有文字没有图标 | 当前未配图标（纯文字），需要图标时把 png 放进 `src/static/tabbar/` 并在 `pages.json` 补 `iconPath` |

## 目录结构

```
src/
├── App.vue                    # 应用入口 + 全局样式（设计令牌 CSS 变量）
├── main.js                    # createSSRApp
├── pages.json                 # 路由 + 全局窗口 + tabBar（替代 app.json）
├── manifest.json              # 应用配置（vueVersion: 3、mp-weixin appid）
├── uni.scss                   # 全局 SCSS 变量
├── pages/
│   ├── index/index.vue        # 今日打卡（Tab1）
│   ├── circle/circle.vue      # 圈子动态流（Tab2）
│   ├── rank/rank.vue          # 周榜（Tab3）
│   ├── profile/profile.vue    # 我的（Tab4）
│   ├── create/create.vue      # 创建活动
│   └── templates/templates.vue# 模板库
├── components/
│   ├── login-panel/login-panel.vue      # 邮箱验证码登录
│   └── checkin-editor/checkin-editor.vue# 打卡半屏弹层
└── utils/
    ├── cloud.js               # 云服务客户端（唯一实例）
    ├── session.js             # 会话缓存（30s、失败不缓存）
    ├── services.js            # 业务数据读写（ESM）
    ├── templates-data.js      # 模板静态数据
    ├── workbuddy-cloud-diagnostics.js
    └── vendor/                # 云 SDK 的 ESM 构建（已内置，无需构建 npm）
```

## 原生写法 → Vue 3 写法对照

| 原生 | uni-app（Vue 3） |
| --- | --- |
| `Page({ data })` | `<script setup>` + `ref()` |
| `this.setData({ a })` | `a.value = x` |
| `wx:if / wx:elif / wx:else` | `v-if / v-else-if / v-else`（`<block>` → `<template>`） |
| `wx:for="{{list}}" wx:key="id"` | `v-for="item in list" :key="item.id"` |
| `bindtap` / `catchtap` | `@tap` / `@tap.stop` |
| `data-id` + `e.currentTarget.dataset.id` | 直接把对象传进方法：`@tap="open(item)"` |
| `Component({ properties, methods })` | `defineProps` + `defineEmits` |
| `observers: { show() {} }` | `watch(() => props.show, cb)` |
| `wx.showToast` | `uni.showToast` |
| `wx.navigateTo` | `uni.navigateTo` |
| `app.json` 页面与 tabBar | `pages.json` |
| `App({ ensureSession })` 全局方法 | `utils/session.js` 导出的函数 |
| `onShow()` 页面生命周期 | 从 `@dcloudio/uni-app` 导入 `onShow` |
| 页面 `.css`（WXSS） | SFC 内 `<style>`，`rpx` 与 CSS 变量完全通用 |

## 云服务说明

- 云服务应用：`做了么`（`wbapp_fMozZfOi6hLmcp96oLumff`），数据表 `activities` / `checkins` / `profiles` + RLS。
- SDK 以 **vendored ESM 构建** 放在 `src/utils/vendor/`，`require`/构建 npm 都不需要。
  如需升级 SDK：`npm i @tencent-ai/workbuddy-cloud-sdk@dev`，把 `node_modules/@tencent-ai/workbuddy-cloud-sdk/lib/miniprogram.js`
  与配套 `chunk-*.js` 复制进 `src/utils/vendor/`（重命名为 `workbuddy-cloud-sdk-miniprogram.js` / `workbuddy-cloud-sdk-chunk.js`），并修正其中的 chunk 引用路径。
- 发布前需在小程序后台填写「用户隐私保护指引」，清单见根目录 `.wbapp_fMozZfOi6hLmcp96oLumff.privacy.json`。

## 发布

`npm run build:mp-weixin` 后，用开发者工具打开 `dist/build/mp-weixin`，上传审核即可。