1.

作为移动端的分发入口，微信小程序虽然没有当初期望的那么火，但是却是一个不能忽视的入口。撇开微信小程序对于腾讯生态的原因不说，微信小程序对于开发还是很方便的，特别是对于白痴选手来说，基本不需要多少过多的学习，就能写一个不错的小程序。

2.

下面就微信小程序常见的组件分别做详细的介绍，本篇主要介绍picker组件。运行效果如下：picker选择器分为5种：分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器，可以用mode属性区分。

属性普通选择器3.

设置modeselector。

属性名类型默认值说明rangeArray/ObjectArray[]mode为selector或multiSelector时，range有效range-keyString当range是一个ObjectArray时，通过range-key来指定Object中key的值作为选择器显示内容valueNumber0value的值表示选择了range中的第几个（下标从0开始）bindchangeEventHandlevalue改变时触发change事件，event.detail{value:value}disabledBooleanfalse是否禁用多列选择器4.

modemultiSelector（最低版本：1.4.0）。

属性名类型默认值说明range二维Array/二维ObjectArray[]mode为selector或multiSelector时，range有效。二维数组，长度表示多少列，数组的每项表示每列的数据，如[[“a”,”b”],[“c”,”d”]]range-keyString当range是一个二维ObjectArray时，通过range-key来指定Object中key的值作为选择器显示内容valueArray[]value每一项的值表示选择了range对应项中的第几个（下标从0开始）bindchangeEventHandlevalue改变时触发change事件，event.detail{value:value}bindcolumnchangeEventHandle某一列的值改变时触发columnchange事件，event.detail{column:column,value:value}，column的值表示改变了第几列（下标从0开始），value的值表示变更值的下标disabledBooleanfalse是否禁用时间选择器5.

时间选择器：modetime。

日期选择器6.

日期选择器：modedate。

7.

fields自动对应的有效值：

省市区选择器8.

moderegion（最低版本：1.4.0）。

官方示例示例代码：9.

picker.wxml

viewclass"section"viewclass"section__title"普通选择器/viewpickerbindchange"bindPickerChange"value"{{index}}"range"{{array}}"viewclass"picker"当前选择：{{array[index]}}/view/picker/viewviewclass"section"viewclass"section__title"多列选择器/viewpickermode"multiSelector"bindchange"bindMultiPickerChange"bindcolumnchange"bindMultiPickerColumnChange"value"{{multiIndex}}"range"{{multiArray}}"viewclass"picker"当前选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}/view/picker/viewviewclass"section"viewclass"section__title"时间选择器/viewpickermode"time"value"{{time}}"start"09:01"end"21:01"bindchange"bindTimeChange"viewclass"picker"当前选择:{{time}}/view/picker/viewviewclass"section"viewclass"section__title"日期选择器/viewpickermode"date"value"{{date}}"start"2015-09-01"end"2017-09-01"bindchange"bindDateChange"viewclass"picker"当前选择:{{date}}/view/picker/viewviewclass"section"viewclass"section__title"省市区选择器/viewpickermode"region"bindchange"bindRegionChange"value"{{region}}"custom-item"{{customItem}}"viewclass"picker"当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}/view/picker/view10.

对应的packer.js文件

Page({data:{array:['美国','中国','巴西','日本'],objectArray:[{id:0,name:'美国'},{id:1,name:'中国'},{id:2,name:'巴西'},{id:3,name:'日本'}],index:0,multiArray:[['无脊柱动物','脊柱动物'],['扁性动物','线形动物','环节动物','软体动物','节肢动物'],['猪肉绦虫','吸血虫']],objectMultiArray:[[{id:0,name:'无脊柱动物'},{id:1,name:'脊柱动物'}],[{id:0,name:'扁性动物'},{id:1,name:'线形动物'},{id:2,name:'环节动物'},{id:3,name:'软体动物'},{id:3,name:'节肢动物'}],[{id:0,name:'猪肉绦虫'},{id:1,name:'吸血虫'}]],multiIndex:[0,0,0],date:'2016-09-01',time:'12:01',region:['广东省','广州市','海珠区'],customItem:'全部'},bindPickerChange:function(e){console.log('picker发送选择改变，携带值为',e.detail.value)this.setData({index:e.detail.value})},bindMultiPickerChange:function(e){console.log('picker发送选择改变，携带值为',e.detail.value)this.setData({multiIndex:e.detail.value})},bindMultiPickerColumnChange:function(e){console.log('修改的列为',e.detail.column,'，值为',e.detail.value);vardata{multiArray:this.data.multiArray,multiIndex:this.data.multiIndex};data.multiIndex[e.detail.column]e.detail.value;switch(e.detail.column){case0:switch(data.multiIndex[0]){case0:data.multiArray[1]['扁性动物','线形动物','环节动物','软体动物','节肢动物'];data.multiArray[2]['猪肉绦虫','吸血虫'];break;case1:data.multiArray[1]['鱼','两栖动物','爬行动物'];data.multiArray[2]['鲫鱼','带鱼'];break;}data.multiIndex[1]0;data.multiIndex[2]0;break;case1:switch(data.multiIndex[0]){case0:switch(data.multiIndex[1]){case0:data.multiArray[2]['猪肉绦虫','吸血虫'];break;case1:data.multiArray[2]['蛔虫'];break;case2:data.multiArray[2]['蚂蚁','蚂蟥'];break;case3:data.multiArray[2]['河蚌','蜗牛','蛞蝓'];break;case4:data.multiArray[2]['昆虫','甲壳动物','蛛形动物','多足动物'];break;}break;case1:switch(data.multiIndex[1]){case0:data.multiArray[2]['鲫鱼','带鱼'];break;case1:data.multiArray[2]['青蛙','娃娃鱼'];break;case2:data.multiArray[2]['蜥蜴','龟','壁虎'];break;}break;}data.multiIndex[2]0;console.log(data.multiIndex);break;}this.setData(data);},bindDateChange:function(e){console.log('picker发送选择改变，携带值为',e.detail.value)this.setData({date:e.detail.value})},bindTimeChange:function(e){console.log('picker发送选择改变，携带值为',e.detail.value)this.setData({time:e.detail.value})},bindRegionChange:function(e){console.log('picker发送选择改变，携带值为',e.detail.value)this.setData({region:e.detail.value})}})11.

注：关于wxss样式文件这里不再罗列

省市县示例12.

我们再来看一下本文开始的时候的例子：

13.

相关代码如下：feedback.wxml

viewclass"container"pickerbindchange"bindPickerChange"value"{{index}}"range"{{array}}"viewclass"picker"viewclass"fb-type"viewclass"type-label"{{array[index]}}/viewimageclass"type-icon"src"http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/pickerArrow-a8b918f05f.png"/image/view/view/pickerviewclass"fb-body"textareaclass"content"placeholder"对我们网站、商品、服务，你还有什么建议吗？你还希望在严选上买到什么？请告诉我们..."/viewclass"text-count"0/500/view/viewviewclass"fb-mobile"viewclass"label"手机号码/viewviewclass"mobile-box"inputclass"mobile"placeholder"方便我们与你联系"/imageclass"clear-icon"src"http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/clear-fb-dd9d604f86.png"/image/view/viewbuttonclass"fb-btn"提交/button/view14.

样式文件feedback.wxss

page{background:#f4f4f4;min-height:100%;}.container{background:#f4f4f4;min-height:100%;padding-top:30rpx;}.fb-type{height:104rpx;width:100%;background:#fff;margin-bottom:20rpx;display:flex;flex-direction:row;align-items:center;padding-left:30rpx;padding-right:30rpx;}.fb-type.type-label{height:36rpx;flex:1;color:#333;font-size:28rpx;}.fb-type.type-icon{height:36rpx;width:36rpx;}.fb-body{width:100%;background:#fff;height:374rpx;padding:18rpx30rpx64rpx30rpx;}.fb-body.content{width:100%;height:100%;color:#333;line-height:40rpx;font-size:28rpx;}.fb-body.text-count{padding-top:17rpx;line-height:30rpx;float:right;color:#666;font-size:24rpx;}.fb-mobile{height:162rpx;width:100%;}.fb-mobile.label{height:58rpx;width:100%;padding-top:14rpx;padding-bottom:11rpx;color:#7f7f7f;font-size:24rpx;padding-left:30rpx;padding-right:30rpx;line-height:33rpx;}.fb-mobile.mobile-box{height:104rpx;width:100%;color:#333;padding-left:30rpx;padding-right:30rpx;font-size:24rpx;background:#fff;position:relative;}.fb-mobile.mobile{position:absolute;top:27rpx;left:30rpx;height:50rpx;width:100%;color:#333;line-height:50rpx;font-size:24rpx;}.clear-icon{position:absolute;top:43rpx;right:30rpx;width:28rpx;height:28rpx;}.fb-btn{width:100%;height:98rpx;line-height:98rpx;background:#b4282d;position:fixed;bottom:0;left:0;border-radius:0;color:#fff;font-size:28rpx;}15.

逻辑js：feedback.js

varappgetApp();Page({data:{array:['请选择反馈类型','商品相关','物流状况','客户服务','优惠活动','功能异常','产品建议','其他'],index:0,},bindPickerChange:function(e){console.log('picker发送选择改变，携带值为',e.detail.value)this.setData({index:e.detail.value})},onLoad:function(options){},onReady:function(){},onShow:function(){},onHide:function(){//页面隐藏},onUnload:function(){//页面关闭}})