简介随机点名小程序是一份基于C语言实现的轻量级随机抽取工具源码适合教学、会议、课堂互动等快速点名场景。整个压缩包仅含1个.c源文件大小约2KB无复杂依赖可直接用常见C编译器编译运行。相比动辄上百KB的完整项目这份极小体积的源码反而更容易让初学者看清随机点名核心逻辑——从名单读取如数组或文件到调用rand()生成随机索引再到避免重复项的选择流程。开发者可在此基础上扩展文件解析、去重队列、按权重抽取或图形界面是理解C语言内存管理、数组操作和随机数用法的理想起点也可作为课程设计或小型项目的基础模板。目前已有2346人浏览学习对想快速获取可运行C语言小工具或练习基础算法的读者是一份高性价比的参考。1. 随机点名小程序不只是一个转盘动画随机点名小程序真正难住开发者的往往不是动画多炫、音效多响而是三个容易被忽略的问题一是同一份名单在连续点名时怎么保证不重复抽到同一个人二是名单录入和存储用本地文件还是云开发边界在哪里三是课堂上用和年会上用点名节奏和结果呈现完全是两套需求。换句话说这个标题背后是一个「公平抽样 状态管理 跨端打包」的小型工程题正好覆盖从页面渲染到算法再到数据持久化的完整链路。对刚入门的开发者它比商城、电商小程序轻得多适合第一次完整走通微信小程序发布流程对有经验的工程师它的价值在于如何把随机性做得可解释、可回放、可测试而不是对着Math.random()一把梭。2. 选型与工程骨架为什么用 uni-app 搭随机点名小程序2.1 HBuilderX 创建 uniapp 微信小程序项目的目录约定选 uni-app 不是因为「人云亦云」而是随机点名小程序最常见的诉求是老师用微信小程序公司用钉钉或企业微信年会又想临时投到电视上。一套界面代码同时编译到微信小程序和 H5能省掉至少一半的重复工作。用 HBuilderX 新建项目时选择「默认模板」它会生成pages、static、utils、App.vue、main.js、manifest.json、pages.json这几个核心部分。# HBuilderX 菜单操作路径 文件 - 新建 - 项目 - 选择 uni-app 模板 - 填写项目名称 - 创建 # 命令行创建需要已安装 vue-cli vue create -p dcloudio/uni-preset-vue my-random-picker创建完成后微信小程序编译目录由 HBuilderX 自动生成开发时不需要手动维护app.json而是统一在pages.json里配置页面路由和窗口样式。注意manifest.json里的mp-weixin配置块需要提前填入小程序 AppID否则预览时会一直停在测试号模式真机扫码和部分 API比如订阅消息都用不了。测试号适合验证页面效果但发布前必须换成真实 AppID否则 upload 到微信后台那一步会被拦下来。pages.json里最常调的两个字段是navigationBarTitleText和navigationStyle。标题要动态变就得在页面生命周期里调uni.setNavigationBarTitle这个后面单独展开。目录结构上我一般把随机算法拆到utils/random.js名单和点名历史拆到utils/storage.js页面里只留渲染和交互逻辑这样编译到不同端时差异最小。2.2 随机点名页面的最小渲染骨架data 与列表渲染页面结构不需要一开始就上 canvas 或 web-view。一个能用的随机点名页面核心就三块剩余名单展示、当前抽中者展示、操作按钮。用v-for渲染剩余名单用data里的current字段承载抽中结果按钮触发抽取函数。view classpage view classpool-count剩余可选人数{{ pool.length }}/view view classcurrent-name v-ifcurrent{{ current.name }}/view button typeprimary tappickOne随机点名/button view classpool-list view v-for(item, idx) in pool :keyitem.id classpool-item {{ idx 1 }}. {{ item.name }} /view /view /viewexport default { data() { return { pool: [], // 剩余名单池元素是 { id, name } 对象 current: null // 当前抽中的人展示用 }; }, onLoad() { this.pool this.loadPoolFromStorage(); }, methods: { pickOne() { const picked this.sampleOne(this.pool); this.current picked; } } }这里把pool设计成对象数组而不是纯字符串数组是为了给每个人配一个稳定的id。后期如果要做「点过一次不再点」的标记直接比对id比比对同名字符串可靠得多课堂上如果存在同名学生字符串数组会出现两个人共用一个 key 的渲染警告。key不能用数组下标因为移除元素后下标会整体前移导致已渲染的视图状态错乱。2.3 动态设置导航栏标题与顶部安全区适配随机点名小程序常见的运营需求是「把标题改成今天这场活动的主题」。老师可能希望标题是「初三二班英语课点名」年会主持人可能希望标题是「技术部年会抽奖」。这个需求在微信小程序里对应的是wx.setNavigationBarTitleuni-app 里封装为uni.setNavigationBarTitle。// 页面 onLoad 里调用 uni.setNavigationBarTitle({ title: this.title || 随机点名 });要点是调用时机。如果放在onLoad之前的beforeCreate里执行页面导航栏还没初始化会出现「先闪一下默认标题再变成新标题」的效果。我一般把标题来源放到onLoad里从options读取并配合onShow做一次兜底调用因为从分享链接进入页面时 onLoad 的 options 已经在场景值里带好了。另外这个 API 每次调用有频率限制大约每秒一次正常使用不会触发。顶部安全区适配是另一个经常被忽略的点。小程序页面默认的导航栏高度在 iPhone 上有刘海屏和非刘海屏两套数值直接把内容顶到页面顶部会被状态栏盖住一部分。常见做法是在pages.json里把页面设为navigationStyle: custom自己渲染标题栏然后用uni.getSystemInfoSync().safeArea计算padding-top。但如果只是做点名工具不推荐custom风格保留系统导航栏能少处理很多机型差异动态标题也能正常工作。2.4 从生成到触发 weixin://dl/business 式的跳转时机控制随机点名页面偶尔需要外跳典型场景是「点完名之后把结果发给微信好友」或者「跳转到一个展示大屏网页」。weixin://dl/business这类 scheme 在开发圈里常被提起但它不是给页面内跳转用的。小程序内部跳转页面用uni.navigateTo跳转另一个小程序用uni.navigateToMiniProgram而weixin://dl/business主要用于短信、邮件、H5 网页等外部环境拉起微信。把weixin://scheme 直接写在web-view或者location.href里触发时机不对基本都会被微信拦截。// 正确的小程序内跳转方式 uni.navigateTo({ url: /pages/result/result?name encodeURIComponent(this.current.name) });url参数里的中文必须encodeURIComponent否则小程序路由会解析失败。参数里有特殊符号的场景在点名工具里不常见但如果名单是从 Excel 粘过来的姓名前后可能带空格和换行传参前先trim()掉。外跳 scheme 的生成应该放在后端或云函数里因为需要appid、path和用户身份做签名端上拼出来的 scheme 经常因为缺少合法生成条件而打不开。随机点名工具如果只是分享到群里用onShareAppMessage返回一个自定义路径就够不需要碰 scheme。3. 随机点名算法的公平性从 Math.random 到洗牌取样3.1 为什么连续 Math.random 会让前面的人被抽中两次新手最常写的点名逻辑是从名单里Math.floor(Math.random() * list.length)取一个人名展示出来下一轮再取一次。这个逻辑在「点一次就结束」的场景下没有任何问题但只要是连续点名它就无法避免同一个人被重复抽中。数学上每次抽取都是独立事件上一轮被抽中的人这一轮仍然有相同概率被选中这不是 bug是概率本身的特性。可课堂点名偏偏要求「这一轮抽过的人下一轮不该再出现在待选池里」。另一种常见误用是用splice把抽中的人从数组里删掉。这个做法能得到「不重复」的结果但有两个副作用一是每删一个元素数组后面所有元素的下标全部前移如果同时在做动画或者按索引高亮列表视图会闪烁二是如果要支持「撤销这次点名把人放回池子」用splice删掉后再插回顺序就乱了而且是O(n)级别的数组搬运人数到几百时在低端安卓机上能感知到卡顿。3.2 Fisher–Yates 洗牌抽样的实现与参数说明正确做法是把「选人」和「展示顺序」拆开先对名单做一次 Fisher–Yates 洗牌得到一份乱序但不重复的序列然后从头到尾依次取。洗完牌之后第一轮取第 0 个第二轮取第 1 个天然不重复而且每轮取人的时间复杂度是O(1)只是标记一个游标移动。// utils/random.js export function shuffle(source) { const arr source.slice(); for (let i arr.length - 1; i 0; i--) { const j Math.floor(Math.random() * (i 1)); [arr[i], arr[j]] [arr[j], arr[i]]; } return arr; }参数说明source是原始名单数组函数不修改原数组而是先slice()复制一份避免外部引用被污染循环从最后一个元素开始每次在[0, i]闭区间里随机选一个下标j交换arr[i]和arr[j]。Math.random()返回[0, 1)的左闭右开区间乘以(i 1)再取整才能保证最大下标是i不会越界。这个版本是经典的 Fisher–Yates 内循环写法时间复杂度O(n)400 人名单在页面里执行一万次也感觉不到耗时。用洗牌方案替代连续随机还有一个额外好处点名过程的「顺序」也被固定了老师可以按照洗好的队列顺序倒着点名也可以正着点全凭游标决定。如果某一轮点错了想重来只需要把游标减一不需要对数组做任何增删操作。3.3 已点名池与剩余池索引快照取代「删除再抽」洗牌解决了「不重复」问题但页面展示需要两块数据已点的人和剩余的人。很多实现里在每次点名后把已点的人从pool里shift到history这又回到了splice的老路上。正确方式是用一个整数游标记录「已经点到了第几个」两个展示数组都从洗牌结果里切出来。// 页面数据 data() { return { shuffledList: [], // 洗好的完整队列 cursor: 0, // 当前游标指向下一个该点的人 pool: [], // 剩余池从 shuffledList 切片生成 history: [] // 已点池同样从 shuffledList 切片生成 }; }, methods: { markPicked() { if (this.cursor this.shuffledList.length) return; const picked this.shuffledList[this.cursor]; this.cursor; // 切出剩余池和已点池保证视图展示和游标一致 this.pool this.shuffledList.slice(this.cursor); this.history this.shuffledList.slice(0, this.cursor); this.current picked; }, undoPick() { if (this.cursor 0) return; this.cursor--; this.pool this.shuffledList.slice(this.cursor); this.history this.shuffledList.slice(0, this.cursor); } }markPicked先把游标指向的元素取出来作为当前结果然后游标加一之后用slice重新切出两个视图数组。slice返回的是新数组引用不会影响shuffledList本身所以游标、展示数据和真实队列三者永远保持一致。这个方案支撑「撤销」也特别简单游标减一就行不需要找元素、删元素再插回来。需要注意游标越界的判断抽完最后一个人后cursor等于shuffledList.length此时pool已经空了需要提示「本场点名已完成是否重置」。3.4 带权重点名给迟到概率加权时的应用场景部分随机点名场景需要「加权」典型是年会抽奖产品部 50 人、技术部 20 人如果奖品数量有限主办方希望部门间配额均衡而不是纯粹按人数比例。这种需求可以理解为从当前剩余池里按每个人身上的权重值大小来决定被抽中的概率权重越高「下一轮被抽到」的概率越大。// 按权重抽取一次的函数 export function weightedPick(items, weightKey weight) { const total items.reduce((sum, item) sum (item[weightKey] || 1), 0); let r Math.random() * total; for (let i 0; i items.length; i) { r - (items[i][weightKey] || 1); if (r 0) return items[i]; } return items[items.length - 1]; }weightedPick的处理方式是先把所有权重求和随机数乘以总和得到一个在[0, total)范围内的数然后遍历数组依次减去每个元素的权重值减到小于等于 0 时当前元素就是抽中者。注意权重值不要设为 0 或负数0 权重意味着不应该出现在候选里最好在生成名单时直接过滤掉避免分母出现 0。加权抽取同样要配合剩余池使用——每次抽完后把抽中的人从池子里移出否则高权重的人大概率每轮都被抽中就失去了「随机点名」的意义。聚类得到一个Math.random()与真实随机数的对比表放在这里方便看清楚为什么不能直接拿时间戳取模当随机源随机源分布特性点名场景问题Math.random()直接抽取均匀但独立前后两次可重复抽中同一人Fisher–Yates 洗牌排列均匀无重复需要维护游标状态时间戳取模分布不匀高并发重复不可用于实际点名加权抽取偏置分布需限制抽取次数避免垄断4. 名单管理与完整点名流程从录入到语音播报4.1 名单录入textarea 批量粘贴与单选框去重随机点名小程序最关键的前置操作是「名单从哪里来」。课堂上老师通常有一个 Excel 名单年会主办方可能手里是员工花名册这些信息在手机上逐个输入不现实。比较通用的是提供一个大号textarea支持粘贴整块文本系统自动按分隔符拆成数组解析后立即做 trim 和去重再用单选框让用户确认「按班级/部门分组」还是「全部放入一个大池」。// nameInput 是 textarea 绑定的原始字符串 const raw this.nameInput.trim(); const list raw .split(/[\n,;、\t]/) .map((s) s.trim()) .filter(Boolean); const unique Array.from(new Set(list)); this.pool unique.map((name, idx) ({ id: idx 1, name }));正则[\n,;、\t]把换行、半角逗号、全角逗号、分号、顿号和 Tab 都视为分隔符是这套解析里最不容易踩坑的组合。Excel 复制出来的姓名默认用换行或 Tab 分隔手打名单时中国人习惯用顿号所以这几类都要覆盖。去重用的Set会把同名同姓的人合并成一个人如果同一份名单里确实有两个同名的人需要区分去重策略就要改成「姓名 序号」拼接而不是直接Set。单选按钮组用来切换「当前名单属于哪节课程」切换时直接把对应名单存进 storage避免 A 班名单串到 B 班课上。4.2 用 wx.env.user_data_path 保存点名历史微信小程序提供了wx.env.user_data_path它是小程序用户数据目录的真实路径支持通过FileSystemManager读写本地文件。比wx.setStorage更可控的地方在于数据以 JSON 文件的形式存在开发者可以在开发者工具的 Storage 面板里直接查看也可以导出到电脑上做数据分析。点名记录通常要保留「日期、课程、抽中的人、剩余人数」这几个维度用一个小型 JSON 文件管理最合适。// utils/storage.js const fs wx.getFileSystemManager(); const DATA_PATH wx.env.USER_DATA_PATH /random-picker.json; // 注意大小写 export function saveHistory(history) { try { const dir DATA_PATH.substring(0, DATA_PATH.lastIndexOf(/)); fs.accessSync(dir); } catch (e) { fs.mkdirSync(wx.env.USER_DATA_PATH, true); } fs.writeFileSync(DATA_PATH, JSON.stringify(history), utf-8); } export function loadHistory() { try { const content fs.readFileSync(DATA_PATH, utf-8); return JSON.parse(content); } catch (e) { return []; } }API 名称是wx.env.USER_DATA_PATH全大写不少人在这一步踩坑写成wx.env.user_data_path导致路径为空。writeFileSync的第三个参数是编码必须显式传utf-8。首次写入时目录可能不存在所以要先accessSync判断再决定是否mkdirSync。readFileSync读到空文件或文件不存在时都会抛异常用try/catch兜底返回空数组不要在这种本地读操作上做复杂错误提醒直接当「无历史记录」处理更符合使用习惯。4.3 点名动画、结果确认与 wx.createInnerAudioContext 语音播报点名结果出来的一瞬间用户体验往往决定这个工具是否被长期使用。最基本的反馈是文字放大 颜色变化更进一步是姓名滚动效果——模拟「滚动的名单很快停下来」。滚动动画的高性价比做法是在短时间内高频更新current显示字段速度逐渐减慢最后停在一个真实结果上。注意滚动过程里展示的名字不一定要从名单里精确取值可以先取几个随机展示位最后两帧切换成真实结果因为人的视觉注意力很难盯住每一帧是什么字。// 点名结束后播放提示音 const audio wx.createInnerAudioContext(); audio.src https://example.com/picker-done.mp3; audio.play();wx.createInnerAudioContext是一个轻量音频实例适合短促音效。需要关注三个点src必须是 HTTPS 地址否则真机上会被拦截play()之前建议先seek(0)防止上一轮没播完导致这次没声音音频实例用完后必须destroy()不然页面切走也在后台挂着一个播放器。如果觉得每次点名播提示音太吵可以在页面里加一个静音开关用audio.volume 0实现而不是反复创建和销毁实例。4.4 真实场景参数一节课 40 人点名的节奏控制课堂点名和年会抽奖的节奏完全不一样。一节课 40 人的点名总时长控制在 8~10 分钟内比较合理也就是平均每次问题回答 1~2 分钟点名动画本身不能超过 3 秒。所以动画滚动时间设定在 1.5~2.5 秒之间比较合适超过 3 秒学生就开始不耐烦。而年会抽奖尤其是最后大奖主持人通常会故意拖长悬念动画时间需要做到 5~8 秒此时参数就不能写死在页面里应该提供一个「动画时长」设置项。场景名单人数动画时长点名间隔是否允许重复课堂答题20~601.5~2.5s约 1 分钟不重复部门例会10~302~3s约 30 秒不重复年会抽奖100~5005~8s约 2 分钟视奖品而定名单超过 100 人之后渲染整份v-for列表可能出现安卓低端机首帧卡顿。可行做法是pool列表默认只显示前 50 条配合onReachBottom做分批加载或者干脆只显示「剩余人数」一个数字不渲染完整列表。点名工具的使用者真正盯着的核心区域是「谁被抽中了」名单列表更多是给主持人做心理预期用的牺牲它换流畅度是划算的。5. 随机点名小程序的三个进阶技巧与一个调试建议5.1 可复现随机种子让同一份名单能回放抽中点名如果主办方事后需要核对「这次抽奖是否公平」或者老师想复盘「这节课点过哪些人」依赖Math.random()的默认实现无法回放。改进方式是给洗牌算法增加一个可传入的随机源用固定种子初始化一个伪随机数生成器得到一串完全可复现的点名顺序。// 简单线性同余生成器用于回放不用于加密 function createSeededRandom(seed) { let s seed % 2147483647; if (s 0) s 2147483646; return function () { s (s * 16807) % 2147483647; return (s - 1) / 2147483646; }; }种子建议用「日期 场次」组合生成比如20250412 第2节课这样每次活动的抽点顺序都能通过日志还原。需要说明白这种线性同余生成器的随机性质量远低于Math.random但它足够支撑点名场景且优势是「种子一样序列就完全一样」。只有回放需求才需要它日常点名直接用默认随机源即可不要为了可复现而牺牲随机质量。5.2 用 Charles 抓包看随机点名请求字段的注意点随机点名小程序如果接入了后端统计接口记录哪节课点了谁调试时难免要看真实请求内容。微信开发者工具的 Network 面板能直接看到所有请求但如果要像 charles 抓包电脑端微信小程序那样过滤特定域名就需要做一次完整链路验证。重点看两个地方一是请求头里的referer是否包含小程序的 appid二是 POST body 里的名单字段是明文还是密文。名单属于隐私数据发布版本里不要在data或日志里打印完整名单尤其是课堂场景这会直接影响学生和家长的信任。抓包结果只用于确认「字段名、传参格式、返回结构」三项就够了其他内容不过度采集。5.3 名单超过 100 人时的渲染优化与索引计算边界最后一项技巧是针对大名单的setData性能问题。小程序里setData是整个数据通道的瓶颈一次性把几百人数组塞进去会导致页面明显卡顿。优化手段是把「核心展示数据」和「冷数据」拆开current、cursor、pool.length这类高频变化字段走setData完整名单只在首次加载和用户手动查看时传输平时放在data里但不参与渲染。每次点名只更新「抽中者姓名」和「剩余人数」两个字段页面不需要重新渲染整份列表动画也能保持在 60 帧上下。索引越界的判断要放在取数之前游标走到队尾时先弹提示再决定是否自动进入新一轮洗牌避免「抽了 40 人后第 41 次点击返回 undefined」。本文还有配套的精品资源点击获取 随机点名小程序开发实战：从公平抽样到跨端实现
简介随机点名小程序是一份基于C语言实现的轻量级随机抽取工具源码适合教学、会议、课堂互动等快速点名场景。整个压缩包仅含1个.c源文件大小约2KB无复杂依赖可直接用常见C编译器编译运行。相比动辄上百KB的完整项目这份极小体积的源码反而更容易让初学者看清随机点名核心逻辑——从名单读取如数组或文件到调用rand()生成随机索引再到避免重复项的选择流程。开发者可在此基础上扩展文件解析、去重队列、按权重抽取或图形界面是理解C语言内存管理、数组操作和随机数用法的理想起点也可作为课程设计或小型项目的基础模板。目前已有2346人浏览学习对想快速获取可运行C语言小工具或练习基础算法的读者是一份高性价比的参考。1. 随机点名小程序不只是一个转盘动画随机点名小程序真正难住开发者的往往不是动画多炫、音效多响而是三个容易被忽略的问题一是同一份名单在连续点名时怎么保证不重复抽到同一个人二是名单录入和存储用本地文件还是云开发边界在哪里三是课堂上用和年会上用点名节奏和结果呈现完全是两套需求。换句话说这个标题背后是一个「公平抽样 状态管理 跨端打包」的小型工程题正好覆盖从页面渲染到算法再到数据持久化的完整链路。对刚入门的开发者它比商城、电商小程序轻得多适合第一次完整走通微信小程序发布流程对有经验的工程师它的价值在于如何把随机性做得可解释、可回放、可测试而不是对着Math.random()一把梭。2. 选型与工程骨架为什么用 uni-app 搭随机点名小程序2.1 HBuilderX 创建 uniapp 微信小程序项目的目录约定选 uni-app 不是因为「人云亦云」而是随机点名小程序最常见的诉求是老师用微信小程序公司用钉钉或企业微信年会又想临时投到电视上。一套界面代码同时编译到微信小程序和 H5能省掉至少一半的重复工作。用 HBuilderX 新建项目时选择「默认模板」它会生成pages、static、utils、App.vue、main.js、manifest.json、pages.json这几个核心部分。# HBuilderX 菜单操作路径 文件 - 新建 - 项目 - 选择 uni-app 模板 - 填写项目名称 - 创建 # 命令行创建需要已安装 vue-cli vue create -p dcloudio/uni-preset-vue my-random-picker创建完成后微信小程序编译目录由 HBuilderX 自动生成开发时不需要手动维护app.json而是统一在pages.json里配置页面路由和窗口样式。注意manifest.json里的mp-weixin配置块需要提前填入小程序 AppID否则预览时会一直停在测试号模式真机扫码和部分 API比如订阅消息都用不了。测试号适合验证页面效果但发布前必须换成真实 AppID否则 upload 到微信后台那一步会被拦下来。pages.json里最常调的两个字段是navigationBarTitleText和navigationStyle。标题要动态变就得在页面生命周期里调uni.setNavigationBarTitle这个后面单独展开。目录结构上我一般把随机算法拆到utils/random.js名单和点名历史拆到utils/storage.js页面里只留渲染和交互逻辑这样编译到不同端时差异最小。2.2 随机点名页面的最小渲染骨架data 与列表渲染页面结构不需要一开始就上 canvas 或 web-view。一个能用的随机点名页面核心就三块剩余名单展示、当前抽中者展示、操作按钮。用v-for渲染剩余名单用data里的current字段承载抽中结果按钮触发抽取函数。view classpage view classpool-count剩余可选人数{{ pool.length }}/view view classcurrent-name v-ifcurrent{{ current.name }}/view button typeprimary tappickOne随机点名/button view classpool-list view v-for(item, idx) in pool :keyitem.id classpool-item {{ idx 1 }}. {{ item.name }} /view /view /viewexport default { data() { return { pool: [], // 剩余名单池元素是 { id, name } 对象 current: null // 当前抽中的人展示用 }; }, onLoad() { this.pool this.loadPoolFromStorage(); }, methods: { pickOne() { const picked this.sampleOne(this.pool); this.current picked; } } }这里把pool设计成对象数组而不是纯字符串数组是为了给每个人配一个稳定的id。后期如果要做「点过一次不再点」的标记直接比对id比比对同名字符串可靠得多课堂上如果存在同名学生字符串数组会出现两个人共用一个 key 的渲染警告。key不能用数组下标因为移除元素后下标会整体前移导致已渲染的视图状态错乱。2.3 动态设置导航栏标题与顶部安全区适配随机点名小程序常见的运营需求是「把标题改成今天这场活动的主题」。老师可能希望标题是「初三二班英语课点名」年会主持人可能希望标题是「技术部年会抽奖」。这个需求在微信小程序里对应的是wx.setNavigationBarTitleuni-app 里封装为uni.setNavigationBarTitle。// 页面 onLoad 里调用 uni.setNavigationBarTitle({ title: this.title || 随机点名 });要点是调用时机。如果放在onLoad之前的beforeCreate里执行页面导航栏还没初始化会出现「先闪一下默认标题再变成新标题」的效果。我一般把标题来源放到onLoad里从options读取并配合onShow做一次兜底调用因为从分享链接进入页面时 onLoad 的 options 已经在场景值里带好了。另外这个 API 每次调用有频率限制大约每秒一次正常使用不会触发。顶部安全区适配是另一个经常被忽略的点。小程序页面默认的导航栏高度在 iPhone 上有刘海屏和非刘海屏两套数值直接把内容顶到页面顶部会被状态栏盖住一部分。常见做法是在pages.json里把页面设为navigationStyle: custom自己渲染标题栏然后用uni.getSystemInfoSync().safeArea计算padding-top。但如果只是做点名工具不推荐custom风格保留系统导航栏能少处理很多机型差异动态标题也能正常工作。2.4 从生成到触发 weixin://dl/business 式的跳转时机控制随机点名页面偶尔需要外跳典型场景是「点完名之后把结果发给微信好友」或者「跳转到一个展示大屏网页」。weixin://dl/business这类 scheme 在开发圈里常被提起但它不是给页面内跳转用的。小程序内部跳转页面用uni.navigateTo跳转另一个小程序用uni.navigateToMiniProgram而weixin://dl/business主要用于短信、邮件、H5 网页等外部环境拉起微信。把weixin://scheme 直接写在web-view或者location.href里触发时机不对基本都会被微信拦截。// 正确的小程序内跳转方式 uni.navigateTo({ url: /pages/result/result?name encodeURIComponent(this.current.name) });url参数里的中文必须encodeURIComponent否则小程序路由会解析失败。参数里有特殊符号的场景在点名工具里不常见但如果名单是从 Excel 粘过来的姓名前后可能带空格和换行传参前先trim()掉。外跳 scheme 的生成应该放在后端或云函数里因为需要appid、path和用户身份做签名端上拼出来的 scheme 经常因为缺少合法生成条件而打不开。随机点名工具如果只是分享到群里用onShareAppMessage返回一个自定义路径就够不需要碰 scheme。3. 随机点名算法的公平性从 Math.random 到洗牌取样3.1 为什么连续 Math.random 会让前面的人被抽中两次新手最常写的点名逻辑是从名单里Math.floor(Math.random() * list.length)取一个人名展示出来下一轮再取一次。这个逻辑在「点一次就结束」的场景下没有任何问题但只要是连续点名它就无法避免同一个人被重复抽中。数学上每次抽取都是独立事件上一轮被抽中的人这一轮仍然有相同概率被选中这不是 bug是概率本身的特性。可课堂点名偏偏要求「这一轮抽过的人下一轮不该再出现在待选池里」。另一种常见误用是用splice把抽中的人从数组里删掉。这个做法能得到「不重复」的结果但有两个副作用一是每删一个元素数组后面所有元素的下标全部前移如果同时在做动画或者按索引高亮列表视图会闪烁二是如果要支持「撤销这次点名把人放回池子」用splice删掉后再插回顺序就乱了而且是O(n)级别的数组搬运人数到几百时在低端安卓机上能感知到卡顿。3.2 Fisher–Yates 洗牌抽样的实现与参数说明正确做法是把「选人」和「展示顺序」拆开先对名单做一次 Fisher–Yates 洗牌得到一份乱序但不重复的序列然后从头到尾依次取。洗完牌之后第一轮取第 0 个第二轮取第 1 个天然不重复而且每轮取人的时间复杂度是O(1)只是标记一个游标移动。// utils/random.js export function shuffle(source) { const arr source.slice(); for (let i arr.length - 1; i 0; i--) { const j Math.floor(Math.random() * (i 1)); [arr[i], arr[j]] [arr[j], arr[i]]; } return arr; }参数说明source是原始名单数组函数不修改原数组而是先slice()复制一份避免外部引用被污染循环从最后一个元素开始每次在[0, i]闭区间里随机选一个下标j交换arr[i]和arr[j]。Math.random()返回[0, 1)的左闭右开区间乘以(i 1)再取整才能保证最大下标是i不会越界。这个版本是经典的 Fisher–Yates 内循环写法时间复杂度O(n)400 人名单在页面里执行一万次也感觉不到耗时。用洗牌方案替代连续随机还有一个额外好处点名过程的「顺序」也被固定了老师可以按照洗好的队列顺序倒着点名也可以正着点全凭游标决定。如果某一轮点错了想重来只需要把游标减一不需要对数组做任何增删操作。3.3 已点名池与剩余池索引快照取代「删除再抽」洗牌解决了「不重复」问题但页面展示需要两块数据已点的人和剩余的人。很多实现里在每次点名后把已点的人从pool里shift到history这又回到了splice的老路上。正确方式是用一个整数游标记录「已经点到了第几个」两个展示数组都从洗牌结果里切出来。// 页面数据 data() { return { shuffledList: [], // 洗好的完整队列 cursor: 0, // 当前游标指向下一个该点的人 pool: [], // 剩余池从 shuffledList 切片生成 history: [] // 已点池同样从 shuffledList 切片生成 }; }, methods: { markPicked() { if (this.cursor this.shuffledList.length) return; const picked this.shuffledList[this.cursor]; this.cursor; // 切出剩余池和已点池保证视图展示和游标一致 this.pool this.shuffledList.slice(this.cursor); this.history this.shuffledList.slice(0, this.cursor); this.current picked; }, undoPick() { if (this.cursor 0) return; this.cursor--; this.pool this.shuffledList.slice(this.cursor); this.history this.shuffledList.slice(0, this.cursor); } }markPicked先把游标指向的元素取出来作为当前结果然后游标加一之后用slice重新切出两个视图数组。slice返回的是新数组引用不会影响shuffledList本身所以游标、展示数据和真实队列三者永远保持一致。这个方案支撑「撤销」也特别简单游标减一就行不需要找元素、删元素再插回来。需要注意游标越界的判断抽完最后一个人后cursor等于shuffledList.length此时pool已经空了需要提示「本场点名已完成是否重置」。3.4 带权重点名给迟到概率加权时的应用场景部分随机点名场景需要「加权」典型是年会抽奖产品部 50 人、技术部 20 人如果奖品数量有限主办方希望部门间配额均衡而不是纯粹按人数比例。这种需求可以理解为从当前剩余池里按每个人身上的权重值大小来决定被抽中的概率权重越高「下一轮被抽到」的概率越大。// 按权重抽取一次的函数 export function weightedPick(items, weightKey weight) { const total items.reduce((sum, item) sum (item[weightKey] || 1), 0); let r Math.random() * total; for (let i 0; i items.length; i) { r - (items[i][weightKey] || 1); if (r 0) return items[i]; } return items[items.length - 1]; }weightedPick的处理方式是先把所有权重求和随机数乘以总和得到一个在[0, total)范围内的数然后遍历数组依次减去每个元素的权重值减到小于等于 0 时当前元素就是抽中者。注意权重值不要设为 0 或负数0 权重意味着不应该出现在候选里最好在生成名单时直接过滤掉避免分母出现 0。加权抽取同样要配合剩余池使用——每次抽完后把抽中的人从池子里移出否则高权重的人大概率每轮都被抽中就失去了「随机点名」的意义。聚类得到一个Math.random()与真实随机数的对比表放在这里方便看清楚为什么不能直接拿时间戳取模当随机源随机源分布特性点名场景问题Math.random()直接抽取均匀但独立前后两次可重复抽中同一人Fisher–Yates 洗牌排列均匀无重复需要维护游标状态时间戳取模分布不匀高并发重复不可用于实际点名加权抽取偏置分布需限制抽取次数避免垄断4. 名单管理与完整点名流程从录入到语音播报4.1 名单录入textarea 批量粘贴与单选框去重随机点名小程序最关键的前置操作是「名单从哪里来」。课堂上老师通常有一个 Excel 名单年会主办方可能手里是员工花名册这些信息在手机上逐个输入不现实。比较通用的是提供一个大号textarea支持粘贴整块文本系统自动按分隔符拆成数组解析后立即做 trim 和去重再用单选框让用户确认「按班级/部门分组」还是「全部放入一个大池」。// nameInput 是 textarea 绑定的原始字符串 const raw this.nameInput.trim(); const list raw .split(/[\n,;、\t]/) .map((s) s.trim()) .filter(Boolean); const unique Array.from(new Set(list)); this.pool unique.map((name, idx) ({ id: idx 1, name }));正则[\n,;、\t]把换行、半角逗号、全角逗号、分号、顿号和 Tab 都视为分隔符是这套解析里最不容易踩坑的组合。Excel 复制出来的姓名默认用换行或 Tab 分隔手打名单时中国人习惯用顿号所以这几类都要覆盖。去重用的Set会把同名同姓的人合并成一个人如果同一份名单里确实有两个同名的人需要区分去重策略就要改成「姓名 序号」拼接而不是直接Set。单选按钮组用来切换「当前名单属于哪节课程」切换时直接把对应名单存进 storage避免 A 班名单串到 B 班课上。4.2 用 wx.env.user_data_path 保存点名历史微信小程序提供了wx.env.user_data_path它是小程序用户数据目录的真实路径支持通过FileSystemManager读写本地文件。比wx.setStorage更可控的地方在于数据以 JSON 文件的形式存在开发者可以在开发者工具的 Storage 面板里直接查看也可以导出到电脑上做数据分析。点名记录通常要保留「日期、课程、抽中的人、剩余人数」这几个维度用一个小型 JSON 文件管理最合适。// utils/storage.js const fs wx.getFileSystemManager(); const DATA_PATH wx.env.USER_DATA_PATH /random-picker.json; // 注意大小写 export function saveHistory(history) { try { const dir DATA_PATH.substring(0, DATA_PATH.lastIndexOf(/)); fs.accessSync(dir); } catch (e) { fs.mkdirSync(wx.env.USER_DATA_PATH, true); } fs.writeFileSync(DATA_PATH, JSON.stringify(history), utf-8); } export function loadHistory() { try { const content fs.readFileSync(DATA_PATH, utf-8); return JSON.parse(content); } catch (e) { return []; } }API 名称是wx.env.USER_DATA_PATH全大写不少人在这一步踩坑写成wx.env.user_data_path导致路径为空。writeFileSync的第三个参数是编码必须显式传utf-8。首次写入时目录可能不存在所以要先accessSync判断再决定是否mkdirSync。readFileSync读到空文件或文件不存在时都会抛异常用try/catch兜底返回空数组不要在这种本地读操作上做复杂错误提醒直接当「无历史记录」处理更符合使用习惯。4.3 点名动画、结果确认与 wx.createInnerAudioContext 语音播报点名结果出来的一瞬间用户体验往往决定这个工具是否被长期使用。最基本的反馈是文字放大 颜色变化更进一步是姓名滚动效果——模拟「滚动的名单很快停下来」。滚动动画的高性价比做法是在短时间内高频更新current显示字段速度逐渐减慢最后停在一个真实结果上。注意滚动过程里展示的名字不一定要从名单里精确取值可以先取几个随机展示位最后两帧切换成真实结果因为人的视觉注意力很难盯住每一帧是什么字。// 点名结束后播放提示音 const audio wx.createInnerAudioContext(); audio.src https://example.com/picker-done.mp3; audio.play();wx.createInnerAudioContext是一个轻量音频实例适合短促音效。需要关注三个点src必须是 HTTPS 地址否则真机上会被拦截play()之前建议先seek(0)防止上一轮没播完导致这次没声音音频实例用完后必须destroy()不然页面切走也在后台挂着一个播放器。如果觉得每次点名播提示音太吵可以在页面里加一个静音开关用audio.volume 0实现而不是反复创建和销毁实例。4.4 真实场景参数一节课 40 人点名的节奏控制课堂点名和年会抽奖的节奏完全不一样。一节课 40 人的点名总时长控制在 8~10 分钟内比较合理也就是平均每次问题回答 1~2 分钟点名动画本身不能超过 3 秒。所以动画滚动时间设定在 1.5~2.5 秒之间比较合适超过 3 秒学生就开始不耐烦。而年会抽奖尤其是最后大奖主持人通常会故意拖长悬念动画时间需要做到 5~8 秒此时参数就不能写死在页面里应该提供一个「动画时长」设置项。场景名单人数动画时长点名间隔是否允许重复课堂答题20~601.5~2.5s约 1 分钟不重复部门例会10~302~3s约 30 秒不重复年会抽奖100~5005~8s约 2 分钟视奖品而定名单超过 100 人之后渲染整份v-for列表可能出现安卓低端机首帧卡顿。可行做法是pool列表默认只显示前 50 条配合onReachBottom做分批加载或者干脆只显示「剩余人数」一个数字不渲染完整列表。点名工具的使用者真正盯着的核心区域是「谁被抽中了」名单列表更多是给主持人做心理预期用的牺牲它换流畅度是划算的。5. 随机点名小程序的三个进阶技巧与一个调试建议5.1 可复现随机种子让同一份名单能回放抽中点名如果主办方事后需要核对「这次抽奖是否公平」或者老师想复盘「这节课点过哪些人」依赖Math.random()的默认实现无法回放。改进方式是给洗牌算法增加一个可传入的随机源用固定种子初始化一个伪随机数生成器得到一串完全可复现的点名顺序。// 简单线性同余生成器用于回放不用于加密 function createSeededRandom(seed) { let s seed % 2147483647; if (s 0) s 2147483646; return function () { s (s * 16807) % 2147483647; return (s - 1) / 2147483646; }; }种子建议用「日期 场次」组合生成比如20250412 第2节课这样每次活动的抽点顺序都能通过日志还原。需要说明白这种线性同余生成器的随机性质量远低于Math.random但它足够支撑点名场景且优势是「种子一样序列就完全一样」。只有回放需求才需要它日常点名直接用默认随机源即可不要为了可复现而牺牲随机质量。5.2 用 Charles 抓包看随机点名请求字段的注意点随机点名小程序如果接入了后端统计接口记录哪节课点了谁调试时难免要看真实请求内容。微信开发者工具的 Network 面板能直接看到所有请求但如果要像 charles 抓包电脑端微信小程序那样过滤特定域名就需要做一次完整链路验证。重点看两个地方一是请求头里的referer是否包含小程序的 appid二是 POST body 里的名单字段是明文还是密文。名单属于隐私数据发布版本里不要在data或日志里打印完整名单尤其是课堂场景这会直接影响学生和家长的信任。抓包结果只用于确认「字段名、传参格式、返回结构」三项就够了其他内容不过度采集。5.3 名单超过 100 人时的渲染优化与索引计算边界最后一项技巧是针对大名单的setData性能问题。小程序里setData是整个数据通道的瓶颈一次性把几百人数组塞进去会导致页面明显卡顿。优化手段是把「核心展示数据」和「冷数据」拆开current、cursor、pool.length这类高频变化字段走setData完整名单只在首次加载和用户手动查看时传输平时放在data里但不参与渲染。每次点名只更新「抽中者姓名」和「剩余人数」两个字段页面不需要重新渲染整份列表动画也能保持在 60 帧上下。索引越界的判断要放在取数之前游标走到队尾时先弹提示再决定是否自动进入新一轮洗牌避免「抽了 40 人后第 41 次点击返回 undefined」。本文还有配套的精品资源点击获取