出自运动打卡小程序(Taro 4 + React 18 + TypeScript + Tailwind 4 + NestJS + Supabase)的工程规约,核心是 H5/小程序双端的兼容速查表。

跨端兼容速查(H5 ↔ 微信小程序)

  • Text 组件在小程序端要显式处理块级表现(加 block / 包裹处理),否则布局与 H5 不一致;
  • Input 等表单控件用 View 包裹,避免小程序端原生组件层级问题;
  • position: fixed 与 flex 布局组合在小程序端必须写 inline style,className 方案会失效;
  • 网络请求必须走封装层(禁直连 Taro.request),响应做”双层 data 解包”防御——不同后端的响应包裹层级不一致;
  • 图片一律走 TOS 对象存储(TabBar 图标除外,须打包进包内)。

工程规范要点

  • 包管理强制 pnpm;样式优先 Tailwind 类,禁止硬编码 px(跨端由 weapp-tailwindcss 转换);
  • 组件优先 Taro 适配版 shadcn/ui(约 50 个组件现成),不手搓基础组件;
  • 小程序主包体积约束 ~1MB,设计系统(配色/字号/间距)在 design_guidelines.md 固化后再写页面。

后端与数据建模

  • NestJS 10 + Supabase (PostgreSQL) + Drizzle ORM;
  • RLS(行级安全)必需字段(user_id)提前建索引,排序字段和外键也一样;
  • 统一 200 状态码拦截器:业务错误用 body 里的 code 表达,避免小程序端对非 2xx 的兼容问题。

数据模型细节见 运动打卡数据模型设计。

相关页面

出处 · /home/johnson/.zcode/workspace/default/exercise-checkin/AGENTS.md