# live-record-wx

**Repository Path**: pear66/live-record-wx

## Basic Information

- **Project Name**: live-record-wx
- **Description**: 微信小程序记录每次锻炼、学习
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-14
- **Last Updated**: 2026-07-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 个人养生计划 - 微信小程序

基于 uni-app (Vue 3) 构建的个人养生打卡小程序，纯本地存储，无需登录。

## 环境要求

- HBuilderX（最新版）
- 微信开发者工具
- Node.js >= 14

## 运行方式

1. 用 HBuilderX 打开项目根目录
2. `运行` → `运行到小程序模拟器` → `微信开发者工具`
3. 首次运行需配置微信开发者工具路径

## 遇到问题及解决方案

### 1. TabBar 图标缺失导致编译失败

**现象**：`pages.json` 中配置了 `iconPath` / `selectedIconPath`，但 `static/tab/` 目录下没有对应的 PNG 图标文件，编译报错。

**方案**：移除 `iconPath` 和 `selectedIconPath`，改用 emoji 文字标签：
```json
{
  "tabBar": {
    "list": [
      { "pagePath": "pages/index/index", "text": "🏠 首页" }
    ]
  }
}
```

### 2. App.vue 全局样式与页面 scoped 样式冲突

**现象**：在 `App.vue` 的 `<style>` 中定义了 `.card`、`.progress-bar` 等全局类，各页面 scoped 样式中也定义了同名类。全局样式的 `rpx` 单位与页面 `px` 单位并存，导致样式错乱（如卡片圆角、内边距不一致）。

**方案**：App.vue 的全局样式只保留 `page` 和基础字体设置，删除所有组件级类定义。各页面样式完全独立。
```css
/* App.vue — 仅保留这些 */
page {
  background-color: #F5F5F5;
  font-size: 14px;
  color: #333;
}
```

### 3. rpx 与 px 混用导致布局不一致

**现象**：原型设计稿为 375px 宽度（iPhone 6/7/8），使用 `px` 像素值。如果部分组件用 `rpx`（750rpx = 屏幕宽度，即 1rpx ≈ 0.5px），会导致尺寸翻倍。

**方案**：统一使用 `px` 单位，与原型设计稿保持一致。uni-app 会自动处理不同屏幕的适配。

### 4. Toggle 开关尺寸偏差

**现象**：开关按钮圆球位置计算不精确（`left: 24px` vs `left: 22px`），导致开关未完全归位。

**方案**：开关宽 48px，圆球 24px，初始位置 `left: 2px`，开启时 `left: 22px`（圆心位置 = 48 - 24 - 2 = 22）。
```css
.toggle { width: 48px; height: 28px; border-radius: 14px; }
.toggle::after { width: 24px; height: 24px; top: 2px; left: 2px; }
.toggle.on::after { left: 22px; }
```

### 5. 发版提示"启用组件按需注入"

**现象**：微信开发者工具上传代码时提示需启用组件按需注入。

**方案**：在 `manifest.json` 的 `mp-weixin` 节点下添加：
```json
{
  "mp-weixin": {
    "lazyCodeLoading": "requiredComponents"
  }
}
```

### 6. 记录保存逻辑 — 同一天多次提交覆盖

**现象**：用户当天多次提交记录后出现重复数据。

**方案**：`saveRecord()` 函数使用 `findIndex` 按 `date` 字段匹配：
```javascript
const index = records.findIndex(r => r.date === record.date)
if (index >= 0) {
  records[index] = { ...records[index], ...record, updatedAt: new Date().toISOString() }
} else {
  records.unshift({ ...record, createdAt: new Date().toISOString(), updatedAt: new Date().toISOString() })
}
```
同一天提交 = 覆盖更新，不同天提交 = 新增记录。

### 7. 编辑历史记录不影响当前用户状态

**现象**：如果用户通过日期选择器修改了昨天的记录，会导致积分和连续达标天数异常变化。

**方案**：记录保存时判断 `recordDate === today`：
```javascript
// 仅当记录的是今天时才更新用户状态
if (this.isToday) {
  updateUserState({ totalScore: ..., consecutiveGoalDays: ... })
}
```
编辑历史记录只更新 records 数组，不触发状态变更。

### 8. 日期格式不一致导致数据查询失败

**现象**：`getFriendlyDate(d)` 传入 Date 对象但函数期望字符串参数，导致记录查找失败。

**方案**：统一使用 `formatDate(date)` 获取 `YYYY-MM-DD` 格式字符串，再用于存储查询。
```javascript
import { formatDate } from '../../utils/date'
const dateStr = formatDate(new Date()) // "2026-06-28"
const record = records.find(r => r.date === dateStr)
```

### 9. uni-app 的 uni 对象引用

**现象**：在 JS 文件中直接使用 `uni.getStorageSync()` 可能报 `uni is not defined`。

**方案**：uni-app 中 `uni` 是全局对象，但某些编译场景下需确保文件在 uni-app 上下文中引用。工具函数文件应从页面组件中调用，不单独引用。

## 项目结构

```
project-wx/
├── pages/
│   ├── index/          # 首页 / 今日概览
│   ├── record/         # 记录录入（含日期选择器）
│   ├── score/          # 积分看板（含近7天趋势柱状图）
│   ├── rules/          # 规则手册
│   └── profile/        # 我的（用户信息、数据导出/重置）
├── utils/
│   ├── storage.js      # 本地存储读写
│   ├── score.js        # 积分计算与状态更新
│   ├── date.js         # 日期工具函数
│   └── rules.js        # 规则静态配置
├── App.vue             # 应用入口
├── main.js             # 主入口
├── pages.json          # 页面路由与 TabBar 配置
├── manifest.json       # 微信小程序配置
└── 设计.md             # 设计文档
```

## 技术栈

| 项 | 方案 |
|----|------|
| 框架 | uni-app (Vue 3) |
| 存储 | wx.storage（纯本地） |
| UI | 纯 CSS，参照原型设计稿 |
| 登录 | 无需登录 |

### 10. 运行时提示 "caniuse-lite is outdated"

**现象**：运行到微信小程序时控制台输出：
```
Browserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
```

**原因**：此警告来自 HBuilderX / uni-app 编译器内置的 Browserslist，项目本身没有 `package.json`，无法通过 npm 更新。

**方案**：这是**无害警告**，不影响编译和运行。项目不依赖 npm，此警告可忽略。未来 HBuilderX 升级后会自动消除。

---

## 版本记录

| 版本 | 日期 | 内容 |
|------|------|------|
| 1.0.0 | 2026-06 | 首版发布，基础养生打卡+积分体系+数据导出 |