摘要

随机工具不是一个 Math.random() 就结束。本文从“转盘决定吧”的转盘、随机抽取、硬币、骰子四类功能出发，拆解一个随机功能的完整技术闭环：输入校验、随机生成、动画反馈、结果页展示、历史记录写入。

1. 随机功能的最小闭环

一个可发布的随机工具至少包含：

入口 输入数据 异常校验 随机生成 视觉反馈 结果展示 历史记录 返回或再次开始

如果只写：

Math.random()

那只是算法片段，不是产品功能。

2. 随机前必须校验数据

随机抽取和转盘都依赖选项数组。空数组必须处理：

if (options.length === 0) {   promptAction.showToast({ message: '请先添加选项' });   return; }

否则会得到：

undefined

这个 undefined 会继续污染结果页、历史记录、分享文案。

3. 随机索引生成

基础随机索引：

const index = Math.floor(Math.random() * options.length); const selected = options[index];

如果要控制动画角度，可以把结果索引转换成目标扇区：

sectorAngle = 360 / options.length targetAngle = baseRounds * 360 + index * sectorAngle + sectorAngle / 2

转盘动画和最终结果必须来自同一个索引，不能动画停在 A，结果页显示 B。

4. WheelCanvas 的职责边界

WheelCanvas 应只负责绘制：

扇区颜色 扇区文字 旋转角度 指针 中心按钮

不负责：

读取转盘配置 写历史记录 路由跳转 弹 Toast

这样的组件更容易维护。Canvas 出问题时只查绘制，业务出问题时只查页面和 service。

5. 结果页为什么不能省

Toast 展示结果有三个问题：

1. 消失太快。
2. 不适合截图。
3. 不方便保存历史。

结果页可以承接：

展示结果 再来一次 返回首页 保存历史 分享结果

这才是一个完整随机工具。

6. 历史记录模型

推荐模型：

interface HistoryRecord {   id: string;   type: 'wheel' | 'pick' | 'coin' | 'dice';   result: string;   createdAt: number; }

不要只存 result 字符串。类型和时间后续会用于筛选、排序和展示。

7. 技术结论

随机工具的核心技术不是随机数，而是状态一致性。输入、动画、结果、历史必须来自同一条数据链路。只要这条链路稳定，转盘、抽取、硬币、骰子都能复用同一套思想。再帮帮孩子吧，我这个应用用代码一个一个敲出来的，帮忙到应用市场下载一个评论一下体验一哈，谢谢支持，转盘决定吧