feat(timer): 训练完成分享海报(canvas+小程序码),解决截图被截断

根因:onShareAppMessage 未返回 imageUrl,微信默认截页面顶部,
完成弹窗垂直居中导致分享卡片只截到上半部分。

实现:
- 隐藏 canvas 2d 绘制 5:4(500x400)成绩海报,含绿色星星图标、状态文案、
  大数字时长、连续打卡、底部引导与右下角小程序码
- _saveAndShowCompletion 弹窗数据就绪后预生成,onShareAppMessage 直接复用
- onTrainAgain 清空 _shareImageUrl 防旧图复用
- 新增 static/share-qr.jpg(用户提供的小程序码)
This commit is contained in:
2026-08-14 09:13:03 +08:00
parent 845a1bfd8d
commit 8ca709b86b
5 changed files with 227 additions and 1 deletions
+11
View File
@@ -11,3 +11,14 @@
- **根因**:偶数 set 数时 `sets×hold/2` 正好落在某组练完→休息切换的那一 tick。`_circuitCue` 先播 halfway 并设 `_voiceBusyUntil=now+2600` 占麦;紧接着 `_advance()``_circuitPhase('resting')` 检查麦占用,`restStart` 被静音。原代码注释有意让"进度提示优先于阶段提示",但偶数组数下两者撞车。
- **修复**`_circuitCue` 里先算 `atRestBoundary`(phaseRemaining<=0 && rest>0 && setIndex<sets) 与 `restWillSpeak`(hold>=10 && rest>=5)halfway/last30/last10 在"落在休息边界且 restStart 会播"时跳过自身,让休息语音优先。奇数组数一半点在中段不会撞车,不动;短组配置 rest 不播也保持原 halfway 行为,无回归。改 `pages/timer/timer.js``_circuitCue`
- 顺带:last30/last10 在更长偶数组数(如 4 组×30s 的 set3→rest)也会撞同一问题,一并按同规则让位,行为一致。
## 新增:训练完成分享海报(canvas 绘制 + 小程序码)
- **现象**:训练完成后点分享,微信默认截取当前页面,因完成弹窗垂直居中,卡片只截到上半部分(绿色星星+"完成!"),大数字和按钮被切掉。
- **方案**:用隐藏 canvas 2d 绘制一张 5:4(500×400 逻辑像素)的专用分享海报,在 `onShareAppMessage` 里作为 `imageUrl` 返回;提前在 `_saveAndShowCompletion` 弹窗数据就绪后生成,避免分享时现场绘制延迟。
- **海报内容**:浅灰底 + 顶部品牌 + 白色圆角成绩卡 + 绿色渐变星星图标 + 状态文案 + 大数字时长 + 连续打卡(如有)+ 底部"扫码一起打卡"引导 + 右下角小程序二维码。
- **文件改动**
- `pages/timer/timer.wxml`:添加隐藏 `<canvas type="2d" id="sharePoster">`
- `pages/timer/timer.wxss``.share-poster-canvas` 移出视口、不响应点击
- `pages/timer/timer.js`:新增 `_drawSharePoster()``_formatShareDuration()``_saveAndShowCompletion()` 里 setData 后预生成;`onShareAppMessage()` 返回 `imageUrl: this._shareImageUrl``onTrainAgain()` 清空旧图防止复用
- `static/share-qr.jpg`:加入用户提供的小程序二维码资源
- **注意**:导出用 jpg quality 0.9、dest 500×400,控制文件在 128KB 以内;二维码路径 `/static/share-qr.jpg` 为相对小程序根目录;若二维码加载失败仍导出无二维码的海报,保证分享入口不灰。