README-TEMPLATE.md



老来赛 (lls_program)


基于 Taro 4 + Vue 3 + NutUI 的微信小程序 - 家庭活动和积分奖励管理系统


📖 项目简介

老来赛 是一个专注于家庭活动和积分奖励管理的微信小程序，提供以下核心功能：


🏠 家庭管理 - 创建家庭、邀请成员、管理成员权限
💎 积分系统 - 获取积分、兑换奖励、排行榜竞争
📸 打卡活动 - 上传照片、生成海报、分享成就
🎁 优惠券 - 积分兑换、优惠券管理


🚀 快速开始


环境要求


Node.js >= 16.x

pnpm >= 8.x（推荐）或 npm >= 8.x

微信开发者工具 下载地址


安装依赖

# 使用 pnpm（推荐）
pnpm install

# 或使用 npm
npm install


开发模式

# 微信小程序
pnpm run dev:weapp

# H5
pnpm run dev:h5

# 支付宝小程序
pnpm run dev:alipay

# 抖音小程序
pnpm run dev:tt


构建生产版本

# 微信小程序
pnpm run build:weapp

# H5
pnpm run build:h5


在微信开发者工具中打开


打开微信开发者工具
导入项目，选择 dist/ 目录
AppID 使用测试号或自己的 AppID


📚 文档导航


核心文档


CLAUDE.md - 完整的项目开发指南

项目状态报告 - 项目当前状态和规模

开发指南 - 开发规范和最佳实践

代码规范 - 命名、注释、测试规范

Git 工作流 - 分支策略和提交规范


技术文档


API 集成日志 - API 接口文档和集成经验

快速迁移指南 - 静默授权功能迁移

微信小程序审核合规性分析报告 - 合规性要点


🛠️ 技术栈


核心框架


Taro 4.1.7 - 跨平台小程序开发框架

Vue 3.3 - 渐进式 JavaScript 框架

Pinia 3.0 - Vue 3 状态管理


UI 组件


NutUI Taro 4.3.13 - 京东 Vue 3 移动端组件库（自动导入）


样式方案


TailwindCSS 3.4 - 原子化 CSS 框架

Less - CSS 预处理器


HTTP 客户端


axios-miniprogram 2.7.2 - 小程序 HTTP 客户端


📁 项目结构

src/
├── api/              # API 接口（按业务领域组织）
├── assets/           # 静态资源（图片、样式）
├── components/       # 可复用组件（22 个）
├── composables/      # Vue 3 组合式函数
├── pages/            # Taro 页面（36 个）
│   ├── Dashboard/    # 仪表盘（首页）
│   ├── MyFamily/     # 我的家庭
│   ├── Activities/   # 活动列表
│   └── ...
├── stores/           # Pinia 状态管理
├── utils/            # 工具函数
│   ├── request.js    # HTTP 请求拦截器
│   ├── authRedirect.js # 静默授权
│   └── tools.js      # 通用工具
├── app.config.js     # Taro 应用配置
├── app.js            # 应用入口
└── app.less          # 全局样式


🔑 核心特性


双设计宽度配置

// NutUI 组件：375px
// 其他内容：750px（Taro 标准）

designWidth (input) {
  if (input?.file?.indexOf('@nutui') > -1) {
    return 375
  }
  return 750
}


SessionID 认证机制

// 请求拦截器自动注入 sessionid
service.interceptors.request.use(config => {
  const sessionid = getSessionId() // 从 wx.storage 读取
  if (sessionid) {
    config.headers.cookie = sessionid
  }
  return config
})


401 自动处理

// 响应拦截器自动处理 401
service.interceptors.response.use(
  response => response,
  error => {
    if (error.response?.status === 401) {
      // 清除 sessionid 并跳转登录
      wx.removeStorageSync('sessionid')
      Taro.reLaunch({ url: '/pages/login/index' })
    }
    return Promise.reject(error)
  }
)


📋 开发命令

# 开发
pnpm run dev:weapp        # 微信小程序
pnpm run dev:h5           # H5
pnpm run dev:alipay       # 支付宝小程序

# 构建
pnpm run build:weapp      # 微信小程序
pnpm run build:h5         # H5

# 代码检查（待添加）
pnpm run lint             # ESLint 检查
pnpm run format           # Prettier 格式化

# 测试（待添加）
pnpm run test             # 单元测试
pnpm run test:e2e         # E2E 测试


🎯 开发注意事项


❌ 禁止使用 Web API

// 错误 - 会导致小程序崩溃
window.document.getElementById()
localStorage
window.location.href
fetch()


✅ 必须使用 Taro API

// 正确
Taro.createSelectorQuery()
Taro.getStorage()
Taro.navigateTo()
Taro.request()


API 响应检查

// ✅ 正确 - 检查 res.code === 1
if (res.code === 1) {
  // 处理成功
}

// ❌ 错误 - 不检查或错误检查
if (res.code) {  // 错误
  // ...
}


📊 项目统计


类别
数量


页面
36 个


组件
22 个


API 模块
12 个


Store
4 个


工具函数
7 个


🤝 贡献指南

欢迎贡献代码！请遵循以下步骤：


Fork 本仓库
创建功能分支 (git checkout -b feature/AmazingFeature)
提交更改 (git commit -m 'feat: 添加某个功能')
推送到分支 (git push origin feature/AmazingFeature)
创建 Pull Request


Commit Message 规范

feat: 新功能
fix: Bug 修复
docs: 文档更新
style: 代码格式（不影响功能）
refactor: 重构
perf: 性能优化
test: 测试相关
chore: 构建/工具链相关


详见 Git 工作流规范。


📄 许可证

MIT


🔗 相关链接


Taro 官方文档
Vue 3 官方文档
NutUI Taro 文档
TailwindCSS 文档
微信小程序开发文档


📞 联系方式

如有问题或建议，请提交 Issue 或 Pull Request。


开发团队 | 最后更新: 2026-02-05