微信小程序开发，picker组件从入门到精通实战指南

拿到微信小程序，你大概率绕不开一个组件——picker。你翻文档，它写得明明白白，从底部弹起一个滚动选择器，支持普通选择、多列、时间日期、地区。但真上手写代码，你会发现文档只讲它能干什么，没人告诉你什么时候该用它、怎么用得顺手。我搞了三年小程序开发，踩过不少坑，今天就把picker这玩意从入门到实战给你捋清楚，争取你看完就能上手改自己项目里的代码。

先说说picker最基础的用法，也就是mode="selector"，普通单列选择。比如你做个表单，让用户选性别、选城市、选套餐，这种场景直接用就行。代码其实简单，一个picker标签包着view，bindchange事件里拿e.detail.value，这个value是索引，不是具体内容。很多人第一次写就栽在这儿，以为value是字符串，结果setData进去回显的时候发现是空的。正确做法是维护一个数组，用索引去取数组里的值。比如你有一个categories数组，picker的range绑定这个数组，change事件里写this.setData({categoryIndex: e.detail.value})，显示的时候用categories[categoryIndex]。这个思路通了，后续所有模式都差不多。

再往下走，多列选择器，mode="multiSelector"。这玩意儿最坑的就是列与列之间的联动。你做个省市区三级联动，选了省，市那列要重置，选了市，区那列要重置。文档里给了一个columnchange事件，你得自己判断用户改的是哪一列，然后重新组织range数组。我见过不少新手把三列数据全写死，结果用户选了广东，市列表里还躺着北京，这就是没理解动态数据源。正确逻辑是：维护一个二维数组，第一维是省，第二维是市，第三维是区，每次columnchange触发时，根据当前选中的省索引去更新市的列，再根据市索引更新区的列。记得在更新列的同时，把对应的索引也重置为0，不然会出现索引越界或者数据错乱。

时间日期选择器，mode="time"和mode="date"，这两个相对简单，但也有细节。time模式返回值是字符串，比如"14:30"，你直接存就行。date模式默认返回"2024-01-01"这种格式，如果你要提交给后端做日期筛选，记得转成时间戳或者统一格式。还有一个容易忽略的点，date组件支持start和end属性，用来限制可选范围，比如你做个预约系统，只能选未来七天，那就start="today" end="+7d"。这个属性很多人不知道，导致用户能选过去的时间，得自己写校验逻辑，麻烦得要死。能用组件属性解决的事，别自己写函数。

地区选择器，mode="region"，这是我最推荐用的，因为微信官方已经帮你维护好了省市区数据，你只需要拿返回值就行。返回值是一个数组，比如['广东省', '深圳市', '南山区']。但有个坑，这个返回值是中文名称，如果你后端存的是行政区划代码，你还得自己映射。我一般做法是，前端显示用region模式，选完后把中文传给后端，后端自己处理。如果你非要拿代码，那得自己写个映射表，或者用第三方接口。不过话说回来，对于大多数场景，中文名称完全够用了，别为了技术上的“完美”给自己找麻烦。

picker还有一个容易被忽略的属性，就是disabled。有时候用户已经提交了表单，你再让他改，就得把picker禁用了。这个很简单，绑个布尔值就行。但我想说的是另一个场景——动态控制picker可选项。比如你有个下拉选商品分类，选了分类A，商品列表只能显示分类A下的商品，这时候你既要更新range数组，又要确保用户之前选的商品索引有效。如果索引超出新数组长度，picker会崩或者显示空白。我的习惯是，在更新range之后，立刻检查当前索引是否超出范围，如果超出就重置为0，并且清空关联的其他字段。这个习惯帮我避免了很多线上bug。

说到实战，我给你讲个我实际做过的项目。一个餐饮点餐小程序，用户选菜品规格，比如“辣度：微辣/中辣/特辣”，然后选“份量：小份/大份”。这其实就是两个独立的picker，用multiSelector反而麻烦，因为规格之间没有联动关系。我当时直接用两个selector，各自维护索引。但后来需求改了，要加“加料”选项，而且加料列表要根据辣度变化。这时候才把两个selector换成multiSelector，配合columnchange做联动。所以你看，技术选型不是固定的，得跟着业务走。picker这东西，用对了省事，用错了代码乱成一团。

给你个建议，如果你在小程序里频繁用到picker，别每次都写重复的样式和逻辑。封装一个公共组件，比如叫custom-picker，props接收range、value、mode，内部处理好change事件，对外只暴露一个selected事件。这样你换肤、加校验、加禁用逻辑，都只改一处。我项目里就是这么干的，后来新增了十几个带picker的页面，每个页面就写三五行代