微信小程序避坑指南:wx:key 的“怪”语法

4 阅读2分钟

两个让新手抓狂,但弄懂后拍大腿的基础知识点

对于刚接触微信小程序开发的朋友来说,有兩個看似不起眼却经常把人绕晕的小问题:一个是列表渲染时的 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