赵忠林
1b21f5e5b1
- 新增确认支付页面配置，设置导航栏标题和样式 - 实现小程序支付页完整组件逻辑，包括加载订单、发起JSAPI支付等 - 支持通过 scene 或 subscriptionNo 获取订单参数 - 完善支付流程接口请求及错误处理，支持自动登录和支付确认 - 增加支付成功、支付中、支付失败、取消等状态页面展示 - 支持支付成功后跳转已购产品页或用户页 - 提供取消支付返回逻辑和界面展示 - 细化支付金额显示和提示用户支付后可使用应用功能
53 lines
3.3 KiB
Markdown
53 lines
3.3 KiB
Markdown
# websopy-taro 项目记忆
|
||
|
||
## Tailwind CSS 在小程序中的兼容性规则
|
||
|
||
以下 Tailwind 类名在 WXSS 中不兼容，项目内禁止使用，已通过 PostCSS 插件 `postcss-remove-wxss-incompatible.js` 自动移除对应的 CSS 规则：
|
||
|
||
1. **`!xxx` important 修饰符**（如 `!visible`）：生成 `.!visible` 选择器，WXSS 不支持反斜杠转义的 `!`。
|
||
|
||
2. **带 `0.5` 的类名**（如 `w-0.5`、`h-0.5`、`gap-0.5`）：类名中的 `.` 被转义为 `\.`，生成 `.w-0\.5` 这样的选择器，WXSS 不兼容。应改用等效的整数尺寸或自定义值替代。
|
||
|
||
3. **`space-x-*` / `space-y-*`**（如 `space-y-4`）：依赖 `:not()` + `~` 兄弟组合器 + CSS 变量 + 嵌套 `calc()`，WXSS 全不支持。应改用 `flex flex-col gap-*` 实现等效间距。
|
||
|
||
4. **`divide-x-*` / `divide-y-*`**：同样依赖 `:not()` + `~`，WXSS 不兼容。
|
||
|
||
## 替代方案速查
|
||
|
||
| 禁用类名 | 替代写法 |
|
||
|---------|---------|
|
||
| `space-y-4` | `flex flex-col gap-4` |
|
||
| `space-x-4` | `flex flex-row gap-4` |
|
||
| `!visible` | 直接写 `style={{ visibility: 'visible' }}` 或自定义类 |
|
||
| `w-0.5` | 用自定义值或 `w-1` 替代 |
|
||
|
||
## 微信小程序接口合规
|
||
|
||
### 剪切板接口（运营规范 5.15.4）
|
||
|
||
1. **只允许用户主动触发复制**：所有 `Taro.setClipboardData` 调用必须绑定在明确的用户点击事件上，禁止在无用户操作时自动读写剪切板。
|
||
2. **禁止复制后强制中断流程**：复制成功后不得强制跳转、强制关注、强制添加客服等，不能要求用户通过其他方式才能完成当前业务流程。
|
||
3. **避免重复/失败 Toast 干扰体验**：微信小程序调用 `setClipboardData` 成功后系统会自带「内容已复制」提示。为避免重复提示及误报失败，统一封装 `utils/common.ts` 中的 `copyText` 函数：
|
||
- 小程序端（weapp）直接调用原生 `wx.setClipboardData`，不再额外显示自定义 `复制成功` / `复制失败` Toast
|
||
- 失败时仅通过 `console.error` 输出错误日志，便于排查
|
||
- 非小程序端保留原有成功/失败提示
|
||
|
||
### 项目内剪切板使用现状
|
||
|
||
已审查所有 `setClipboardData` 调用：
|
||
- 均通过按钮点击触发（复制咨询模板、复制密钥、复制链接、复制兑换码等）
|
||
- 无 `getClipboardData`（自动读取剪切板）调用
|
||
- 无复制后强制跳转或中断业务流程的行为
|
||
- 首页「立即开通」等外链按钮点击后复制链接；相对路径入口（如开发者中心）改为 `Taro.navigateTo` 跳转，不再复制
|
||
|
||
当前实现基本符合 5.15.4 规范。
|
||
|
||
## AppSubscription 状态字段语义（踩坑必读）
|
||
|
||
判断"是否已支付"必须用 `payStatus`（0=未支付 / 1=已支付）这个**支付状态**字段，**不能**用 `status`（订阅生命周期 active/pending/expired/cancelled）。
|
||
|
||
- `status`：订阅的生命周期状态，**不等于支付状态**。后端 `renewPay` 为了避免放弃支付导致服务中断，会故意保留原 `status='active'`、只把 `payStatus` 设为 0。
|
||
- `payStatus`：本次订单的支付状态。支付成功（mp-confirm / handleBalancePay）后才置 1。
|
||
|
||
续费场景下这两个字段完全解耦：用 `status === 'active'` 判支付会**直接误判为已支付**，详见 `2026-07-16.md` 修复记录。
|