uni-app中用uni.showtoast反馈投票成功、uni.setstoragesync持久化计数,需在onshow中读取缓存并重算百分比,避免onload失效、tofixed精度误差及存储键冲突。

uni-app里怎么用uni.showToast和uni.setStorageSync做投票计数
直接改本地缓存就能实现无后端的投票统计,适合快速原型或内部小工具。关键不是“展示比例”,而是先让点击真正生效并持久化——很多人卡在点了没反应,其实是忘了写uni.setStorageSync存数据,或者存了但没重新读取渲染。
实操建议:
- 投票选项用
Array结构存,比如[{id:1,name:'A',count:0},{id:2,name:'B',count:0}],方便遍历渲染和更新 - 每次点击后,先用
uni.getStorageSync读当前数据,修改对应项的count,再用uni.setStorageSync写回去 - 别在
data里直接写死初始count值,要从缓存读取,否则重启App就归零 - 用
uni.showToast反馈“已投票”比console.log更可靠,用户真能感知到操作成功
怎么算并显示百分比——小心toFixed(1)导致的精度丢失
比例不是简单除法完事。比如总票数是3,A得2票,2/3≈66.666...%,直接toFixed(1)得66.7%,但多个选项加起来可能变成99.9%或100.1%,视觉上就不对。
实操建议:
- 先算每个选项的原始比例(
item.count / total),再乘100转成百分比数值 - 显示时统一用
Math.round(value * 10) / 10代替toFixed(1),避免字符串转换引发的浮点误差 - 进度条宽度用
:style="{width: item.percent + '%'}",不要用v-bind:width这种错误写法 - 如果总票数为0,所有百分比显示0%,避免出现
NaN%或报错
为什么onLoad里不刷新数据?必须用onShow
用户投完票返回首页,发现比例没变——因为onLoad只在页面首次加载时触发,而投票页和结果页可能是同一个页面,切换标签或返回时onLoad根本不会执行。
实操建议:
- 把读取缓存、计算百分比的逻辑全塞进
onShow钩子,确保每次页面可见都重算 - 不要在
data()里初始化选项数组,放到onShow里做,否则第一次进页面时data里的默认值会覆盖缓存值 - 如果用了
vuex或pinia,也要在onShow里手动commit或store.refresh(),别指望状态自动同步
真机调试时uni.getStorageSync报错“not found”?检查存储路径和大小限制
H5下一切正常,但微信小程序真机跑起来提示storage not found,大概率是键名冲突或超限。uni-app的uni.setStorageSync底层调的是平台原生API,各端限制差异大。
实操建议:
- 存储键名别用
'voteData'这种泛泛的名字,加上项目前缀,比如'myapp-vote-2024',避免被其他插件覆盖 - 微信小程序单次
setStorageSync不能超过1MB,但你只是存几个数字,所以问题通常出在——你存了个带__ob__的响应式对象(比如直接存this.options),序列化后体积暴增 - 存之前先
JSON.stringify(data)试试长度:JSON.stringify(data).length > 1024 * 10就该警觉 - 安卓微信偶尔会清空storage,加个兜底:
try/catch捕获getStorageSync失败,然后初始化默认数据
实际最难的不是写代码,是让用户相信“我点过了”。进度条动了、数字变了、弹窗出了,三者缺一不可;而最容易被忽略的,是每次页面显示都得重读缓存——毕竟用户可能在别的设备上也投了票。











