一、实验目标学习 picker 普通选择器modeselector通过range绑定选项数组使用bind:change监听选择变化事件对象e.detail.value可以获取用户选中项的数组下标完成数据更新。掌握 WXML 条件渲染wx:if / wx:elif / wx:else分支判断语法。理解block虚拟标签仅做逻辑包裹不会生成真实 DOM 节点适合批量控制多个组件渲染。掌握input组件bind:blur失焦事件真机typedigit调出带小数点数字键盘。二、案例功能说明页面初始化上方显示红色文字与红色色块下方 input 输入框默认展示红、绿、蓝三色条。picker 点击弹出底部选择列表选中颜色点确定上方文字和色块同步更新。input 输入数字失去焦点触发逻辑输入≤0下方三色条隐藏输入0三色条展示。三、项目配置新建小程序项目不使用云服务、不使用模板。修改app.json指定 webview 渲染引擎{ pages: [ pages/index/index ], window: { navigationBarTextStyle: black, navigationStyle: custom }, style: v2, renderer: webview, componentFramework: glass‑easel, sitemapLocation: sitemap.json, lazyCodeLoading: requiredComponents }四、完整代码实现4.1 pages/index/index.wxmlnavigation-bar title条件渲染和picker组件 back{{false}} colorblack background#FFF/navigation-bar scroll-view classscrollarea scroll-y typelist view classbox view classtitle条件渲染和picker组件/view picker modeselector range{{colors}} bind:changecolorPick 请点击此处的picker组件 /picker view wx:if{{color 0}}红色/view view wx:elif{{color 1}}绿色/view view wx:elif{{color 2}}蓝色/view view wx:elif{{color 3}}紫色/view view classview-item stylebackground-color: {{colors[color]}};/view /view view classbox view classtitleblock中的条件渲染/view input typedigit placeholder请输入一个数字 bind:blurcolorSet / block wx:if{{digitValue 0}} view classview-item bc-red/view view classview-item bc-green/view view classview-item bc-blue/view /block /view /scroll-view关键点解析picker modeselector range{{colors}} bind:changecolorPickrange绑定颜色数组bind:change监听选择变更事件博客园。wx:if/wx:elif做多分支文本渲染根据color下标显示对应颜色文字。stylebackground-color: {{colors[color]}}动态内联样式数组下标映射颜色。block wx:if{{digitValue 0}}block 虚拟标签条件成立才渲染内部 3 个颜色条block 本身不会输出页面元素。bind:blurcolorSet输入框失去焦点触发事件真机typedigit唤起带小数点数字键盘。4.2 pages/index/index.jsPage({ data: { color: 0, digitValue: 1, // 扩展作业增加purple紫色 colors: [red, green, blue, purple] }, // picker选择变更事件 colorPick(e) { console.log(e); this.setData({ color: e.detail.value }) console.log(this.data.color); }, // input失去焦点事件 colorSet(e) { console.log(e); let num Number(e.detail.value) if (!isNaN(num)) { this.setData({ digitValue: num }) } console.log(this.data.digitValue); } })关键点解析colors数组存储颜色字符串picker 的range直接读取该数组扩展作业增加purple。colorPick(e)e.detail.value返回 picker 选中项的数组下标setData()更新页面数据驱动视图刷新。colorSet(e)获取输入框值转为数字判断有效数字后更新digitValue用于 block 条件渲染。4.3 app.wxss全局样式/**app.wxss**/ .box { margin: 20rpx; padding: 20rpx; border: 2rpx solid purple; text-align: center; } .title { font-size: 40rpx; font-weight: bolder; text-align: center; margin-bottom: 30rpx; color: red; }4.4 pages/index/index.wxss页面局部样式/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } picker { color: tomato; margin: 40rpx; background-color: lightgray; font-size: 40rpx; padding: 20rpx; } .view-item { width: 90%; height: 100rpx; margin: auto; } .bc-red { background-color: red; } .bc-green { background-color: green; } .bc-blue { background-color: blue; } .bc-purple { background-color: purple; }五、测试验证功能校验清单表格测试场景预期结果初始化页面上方红色色块下方三色条正常显示点击 picker底部弹出 4 个选项 red/green/blue/purple选中 purple 确定文字显示紫色色块变为紫色分别选择红、绿、蓝文字、色块同步切换原有功能不受影响input 输入 0点击空白失焦下方红、绿、蓝三色条消失input 输入 5点击空白失焦下方三色条重新渲染显示真机点击输入框弹出带小数点的数字键盘六、核心知识点总结picker 普通选择器modeselectorrange接收数组bind:change事件中e.detail.value拿到选中项下标再通过下标取数组真实值微信开放社…。wx:if 条件渲染属于真实销毁 / 创建节点条件为 false 时节点完全不存在页面区别于hidden只是 css 隐藏。多分支搭配wx:if/wx:elif/wx:else。block 标签仅逻辑容器不会生成 DOM适合批量控制一组组件的渲染不要替换成 view否则会多出多余容器节点。bind:blur 失焦事件输入框离开焦点才触发逻辑适合完成输入之后再做业务处理而不是每输入一个字符就执行。七、踩坑记录代码出现unexpected character报错注意不要复制长破折号特殊字符全部使用英文-。模拟器看不到数字键盘typedigit数字键盘仅真机生效模拟器无法观察。picker 没有紫色选项检查index.js中colors数组是否添加purple字符串。