两个让新手抓狂,但弄懂后拍大腿的基础知识点
对于刚接触微信小程序开发的朋友来说,有兩個看似不起眼却经常把人绕晕的小问题:一个是列表渲染时的 wx:key 写法,另一个是手滑点了“拒绝”权限后的补救方法。本文就来一次性讲清楚这两件事,帮你节省半小时的无效排查时间。
一、wx:key 的“反直觉”语法:为什么不写 item.id?
现象
很多从 Vue 或 React 转过来的开发者,会下意识地这样写:
<!-- 错误示范 ❌ -->
<view wx:for="{{students}}" wx:key="item.id">
{{item.name}}
</view>
结果控制台飘红:wx:key 的值无效。
正确写法
<!-- 正确写法 ✅ -->
<view wx:for="{{students}}" wx:key="id">
{{item.name}}
</view>
原理深究
1、wx:key 接受的是字符串路径,不是表达式
框架解析 wx:key 时,会把这个字符串作为当前循环项(item)的属性访问路径。也就是说,你写的 id ,框架内部做的事情近似于 item['id'];如果你写 "item.id",它就会去找 item['item.id'] —— 明细这个属性是不存在的。
2、保持模版简洁
既然 wx:for 已经声明了循环对象是 item (默认变量名), 再在 wx:key 里重复写 item. 就显得冗余。小程序团队选择了更简洁的声明书方法:只写属性名。
3、 支持嵌套
如果你的数据对象是这样的:
{
id: 1,
user: { uuid: 'abc-123' }
}
你可以写 wx:key="user.uuid" ,框架会自动解析路径,依然不需要写 item
特殊情况
wx:key="*this":表示用整个数据项本身作为 key(仅当数据项是唯一字符串或数字时使用)。wx:key="index":使用循环下标作为 key(不推荐,尤其是在动态增删列表的场景下,会有性能问题)。
一句话记忆
写属性名,别写
item.前缀,框架自己会去找item.xxx。