参考文档：https://developers.weixin.qq.com/miniprogram/dev/component/picker.html

wxml

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

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);var data = {multiArray: this.data.multiArray,multiIndex: this.data.multiIndex};data.multiIndex[e.detail.column] = e.detail.value;switch (e.detail.column) {case 0:switch (data.multiIndex[0]) {case 0:data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'];data.multiArray[2] = ['猪肉绦虫', '吸血虫'];break;case 1:data.multiArray[1] = ['鱼', '两栖动物', '爬行动物'];data.multiArray[2] = ['鲫鱼', '带鱼'];break;}data.multiIndex[1] = 0;data.multiIndex[2] = 0;break;case 1:switch (data.multiIndex[0]) {case 0:switch (data.multiIndex[1]) {case 0:data.multiArray[2] = ['猪肉绦虫', '吸血虫'];break;case 1:data.multiArray[2] = ['蛔虫'];break;case 2:data.multiArray[2] = ['蚂蚁', '蚂蟥'];break;case 3:data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓'];break;case 4:data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物'];break;}break;case 1:switch (data.multiIndex[1]) {case 0:data.multiArray[2] = ['鲫鱼', '带鱼'];break;case 1:data.multiArray[2] = ['青蛙', '娃娃鱼'];break;case 2:data.multiArray[2] = ['蜥蜴', '龟', '壁虎'];break;}break;}data.multiIndex[2] = 0;break;}console.log(data.multiIndex);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})}
})

效果
普通选择器;

多列选择器

时分秒(时间选择器)

年月日 日期选择器

省市选择器

传值问题：
微信小程序picker选择器传值
以最简单的普通选择器为例
wxml

<view class="cu-form-group margin-top"><view class="title d-flex">普通选择器</view><picker  class="w-100 h-100 borderBottom flex-1 d-flex jc-start ai-center" style="height:100rpx;font-size: 30rpx;color: #555;" bindchange="bindPickerChange" value="{{index}}" range="{{array}}"><view class="picker">当前选择：{{array[currentChoose]}}</view></picker></view>

js

Page({data: {array: ['工作', '放假', '加班', '调休'],currentChoose: 0},bindPickerChange: function (e) {console.log('picker发送选择改变，携带值为', e.detail.value)this.setData({currentChoose: e.detail.value})},})

wxss

.d-flex {
display: flex;
}
.cu-form-group .title {
text-align: justify;
padding-right: 30rpx;
font-size: 30rpx;
position: relative;
height: 60rpx;
line-height: 60rpx;}
.cu-form-group {background-color: var(--white);padding: 1rpx 30rpx;display: flex;align-items: center;min-height: 100rpx;justify-content: space-between;
}
.borderBottom {border-bottom: 1rpx solid #eee;
}.ai-center {
align-items: center;}
.jc-start {
justify-content: flex-start;}
.flex-1 {
flex: 1;}
.cu-form-group input {flex: 1;font-size: 30rpx;color: #555;padding-right: 20rpx;
}

array: ['工作', '放假', '加班', '调休'],对应的int值分别是0,1,2,3

在实际使用中
例子
微信小程序提交form表单内容
wxml

<form catchsubmit="confirmPublish"><view class="cu-form-group margin-top"><view class="title d-flex">姓名</view><view class="w-100 h-100 borderBottom flex-1 d-flex jc-start ai-center" style="height:100rpx;"><input maxlength="15" placeholder="请输入姓名" value="{{name}}" data-name="name" bindblur="setInput"></input></view></view><view class="cu-form-group margin-top"><view class="title d-flex">性别</view><picker class="w-100 h-100 borderBottom flex-1 d-flex jc-start ai-center" style="height:100rpx;font-size: 30rpx;color: #555;" bindchange="bindPickerChange" value="{{index}}" range="{{array}}"><view class="picker">{{array[sex]}}</view></picker></view><view class="cu-form-group margin-top"><view class="title d-flex">手机号</view><view class="w-100 h-100 borderBottom flex-1 d-flex jc-start ai-center" style="height:100rpx;"><input maxlength="15" placeholder="请输入姓名" value="{{phone}}" data-name="phone" bindblur="setInput"></input></view></view><view class="cu-form-group margin-top"><view class="title d-flex">证件号</view><view class="w-100 h-100 borderBottom flex-1 d-flex jc-start ai-center" style="height:100rpx;"><input maxlength="15" placeholder="请输入姓名" value="{{idNumber}}" data-name="idNumber" bindblur="setInput"></input></view></view><view class="cu-form-group margin-top"><view class="title d-flex">日期选择器</view><view class="picker" class="w-100 h-100 borderBottom flex-1 d-flex jc-start ai-center" style="height:100rpx;font-size: 30rpx;color: #555;" bind:tap="openPicker">{{currentChoose}}</view></view><van-action-sheet show="{{ show }}" bind:close="onClose" bind:getuserinfo="onGetUserInfo"><van-datetime-picker type="datetime" value="{{ currentDate }}" min-date="{{ minDate }}" max-date="{{ maxDate }}" bind:cancel="onCancel" bind:confirm="onConfirm" bind:change="onChange" /></van-action-sheet><view class="cu-form-group margin-top"><view class="title d-flex">来访事由</view><picker class="w-100 h-100 borderBottom flex-1 d-flex jc-start ai-center" style="height:100rpx;font-size: 30rpx;color: #555;" bindchange="bindPickerChangeCause" value="{{index1}}" range="{{visitCausearray}}"><view class="picker">{{visitCausearray[visitCause]}}</view></picker></view><view class="cu-form-group margin-top"><view class="title d-flex">来访公司</view><view class="w-100 h-100 borderBottom flex-1 d-flex jc-start ai-center" style="height:100rpx;"><input maxlength="15" placeholder="请输入姓名" value="{{visitCompany}}" data-name="visitCompany" bindblur="setInput"></input></view></view><view class="cu-form-group margin-top"><view class="title d-flex">被访姓名</view><view class="w-100 h-100 borderBottom flex-1 d-flex jc-start ai-center" style="height:100rpx;"><input maxlength="15" placeholder="请输入姓名" value="{{interviewee}}" data-name="interviewee" bindblur="setInput"></input></view></view><view class="cu-form-group margin-top"><view class="title d-flex">被访部门</view><picker class="w-100 h-100 borderBottom flex-1 d-flex jc-start ai-center" style="height:100rpx;font-size: 30rpx;color: #555;" bindchange="bindPickerOrgan" value="{{index2}}" range="{{organarray}}"><view class="picker">{{organarray[visitOrganId]}}</view></picker></view><button class='btn1' bindtap="bindViewTapsuccess" form-type="submit">完成</button></form>

js

// pages/addsign/addsign.js
var util = require('../../utils/util.js');
const app = getApp()
Page({/*** 页面的初始数据*/data: {globalid: [],array: ['男', '女'],sex: 0,visitCausearray: ['面试', '开会', '拜访顾客', '项目实施', '其他'],visitCause: 0,organarray: ['生产部', '运营部', '营销部'],visitOrganId: 0,date: '2021-06-01',name: '',phone: '',idNumber: '',subscribeTime: '',visitCompany: '',interviewee: '',visitOrgan: '',//日期选择器minHour: 0,maxHour: 24,minDate: new Date(1990, 1, 1).getTime(),maxDate: new Date(2099, 12, 31).getTime(),currentDate: new Date().getTime(),show: false,currentChoose: ''},//日期选择器的处理openPicker() {this.setData({show: true})},onConfirm(e) {this.setData({show: false,currentChoose: this.formatDate(new Date(e.detail))})},onClose() {this.setData({show: false})},onCancel() {this.setData({show: false})},formatDate(date) {let taskStartTimeif (date.getMonth() < 9) {taskStartTime = date.getFullYear() + "-0" + (date.getMonth() + 1) + "-"} else {taskStartTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-"}if (date.getDate() < 10) {taskStartTime += "0" + date.getDate()} else {taskStartTime += date.getDate()}taskStartTime += " " + date.getHours() + ":" + date.getMinutes()this.setData({taskStartTime: taskStartTime,})return taskStartTime;},//男女bindPickerChange: function(e) {console.log('picker发送选择改变，携带值为', e.detail.value)this.setData({sex: e.detail.value})},//来访事由bindPickerChangeCause: function(e) {console.log('picker发送选择改变，携带值为', e.detail.value)this.setData({visitCause: e.detail.value})},//部门bindPickerOrgan: function(e) {console.log('picker发送选择改变，携带值为', e.detail.value)this.setData({visitOrganId: e.detail.value})},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {// 调用函数时，传入new Date()参数，返回值是日期和时间var time = util.formatTime(new Date());this.setData({currentChoose: time});},setInput: function(e) {const {name} = e.target.datasetthis.data[name] = e.detail.valuethis.setData(this.data)},confirmPublish: function() {var that = thisconst data = {}data.name = this.data.namedata.sex = this.data.sexdata.phone = this.data.phonedata.idNumber = this.data.idNumberdata.subscribeTime = this.data.currentChoosedata.visitCause = this.data.visitCausedata.visitCompany = this.data.visitCompanydata.interviewee = this.data.intervieweedata.visitOrgan = this.data.visitOrgandata.visitOrganId = this.data.visitOrganIdconsole.log(JSON.stringify(data))wx.request({url: 'http://192.xxx.4.1xx:8093/cs-applet/subscribe/addCallerSubscribe',method: 'POST',data: data,header: {'content-type': 'application/json',},success: function(res) {},fail: function(error) {wx.showToast({title: error.message || '保存失败'})console.log(error)}})},
})

css

/* 确认发布的按钮 */.btn1 {width: 90%;margin-top: 70rpx;margin-bottom: 70rpx;background-color: #09bb07;color: white;font-size: 33rpx;border-radius: 13rpx;display: flex;flex-direction: row;align-items: center;justify-content: center;
}.d-flex {display: flex;
}.cu-form-group .title {text-align: justify;padding-right: 30rpx;font-size: 30rpx;position: relative;height: 60rpx;line-height: 60rpx;
}.cu-form-group {background-color: var(--white);padding: 1rpx 30rpx;display: flex;align-items: center;min-height: 100rpx;justify-content: space-between;
}.borderBottom {border-bottom: 1rpx solid #eee;
}.ai-center {align-items: center;
}.jc-start {justify-content: flex-start;
}.flex-1 {flex: 1;
}.cu-form-group input {flex: 1;font-size: 30rpx;color: #555;padding-right: 20rpx;
}

点击完成的时候，将所有填写的值传给后端