优先使用uView的u-rate组件，支持半星（allow-half）和只读（disabled），v-model绑定Number类型值，需初始化为null避免校验错误。
uni-app里怎么用van-rate实现美团式星级评分
直接用 vant-weapp 的 van-rate 在 uni-app 里跑不通——它依赖微信小程序原生组件机制，uni-app 的跨端编译会丢掉自定义组件生命周期。真要用，得换路子：用纯 Vue 实现的轻量级五星组件，或者改用 u-rate（uView 提供，uni-app 官方推荐兼容性好）。
实操建议：
- 优先装
uview-ui（npm install uview-ui），在main.js全局引入后，直接用<u-rate></u-rate>，支持点击、只读、半星、颜色定制 - 别手动写
v-for+@click模拟星级——容易漏掉 touchend 延迟、iOS 点透、键盘聚焦干扰等问题 -
u-rate的v-model绑定的是 Number 类型（如 4.5），不是布尔或字符串，传错类型会导致星星不响应
uni-app中u-rate怎么支持半星和只读态（比如商家详情页展示）
美团商家页的评价星级是只读的，但要显示 4.3 分这种带小数的半星效果——u-rate 默认支持，但得关掉交互并显式设置 disabled 和 allow-half。
常见错误现象：设置了 :value="4.3" 但只显示 4 颗整星，没半星；或者点了没反应但控制台没报错——其实是忘了加 allow-half 或 disabled 写成了 :disabled="true"（必须是布尔值，不能是字符串）。
参数差异注意点：
-
value必须是 Number，"4.3"（字符串）会被当 0 处理 -
size单位是px，不是rpx，设成36比较接近美团 App 的视觉大小 - 只读场景下，
void-color（未选中色）建议设为#e0e0e0，和美团灰一致
用户提交评价时，u-rate 怎么和表单联动并校验必填
用户点完星星就得立刻存到 data，否则提交时拿不到值。不能只靠 @change，得用 v-model 双向绑定，再配合 uni-app 的 form 校验逻辑。
容易踩的坑：
- 把
v-model绑到一个未初始化的变量（如score: null），首次点击会触发[Vue warn] Invalid prop: type check failed，因为null不是 Number - 表单提交前校验写成
if (!this.score)—— 0 是合法评分，但会被当成 false，结果 0 分用户无法提交 - 应该用
if (this.score === undefined || this.score === null)判断是否未选
简短示例：
<u-rate v-model="formData.score" :max="5" allow-half />
// data 中初始化
data() {
return {
formData: {
score: null // 注意：不是 0，也不是 undefined
}
}
}
为什么不用原生 canvas 或 CSS 动画手写五星组件
有人想“更轻量”，自己用 div + background-image 拼五星——在 H5 端没问题，但在小程序端会遇到两个硬伤：iOS 微信小程序 canvas 绘制星级有明显延迟；安卓部分低端机上 CSS transform 缩放半星会出现锯齿，且 touch-action: manipulation 不生效，导致点两下才触发。
性能与兼容性影响很实际：
- 手写组件在 app 端（Android/iOS）可能因 uni-app 的 native 渲染层限制，
z-index错乱，被键盘遮住 -
u-rate内部已做 touchstart/touchend 节流、preventDefault、focus 管理，这些细节自己补容易漏 - 如果项目用了 uView，那
u-rate已经随框架加载，零额外体积；自己写反而多出 2KB+ JS 和图片资源
真正需要定制的，只是改 active-color 和 void-color 这两个样式属性，别碰结构。
