手册

微信小程序框架

MINA 文件目录结构小程序配置

逻辑层(App Service)

注册程序注册页面模块化 API

微信小程序 WXML

微信小程序数据绑定微信小程序条件渲染 wx:if 微信小程序列表渲染 wx:for 微信小程序模板微信小程序事件微信小程序引用微信小程序 WXSS 微信小程序基础组件微信小程序WeUI.js网页开发样式库

视图容器

微信小程序视图容器微信小程序可滚动视图区域微信小程序滑块视图容器

基础内容

微信小程序内容组件图标 icon 微信小程序内容组件 text（文本）微信小程序内容组件进度条：progress

表单组件

微信小程序按钮组件：button 微信小程序表单组件 checkbox 微信小程序表单组件 form 微信小程序表单组件输入框 input 微信小程序表单组件 label 微信小程序表单组件选择器 picker 微信小程序表单组件picker-view（嵌入页面的滚动选择器）微信小程序表单组件单选框 radio 微信小程序表单组件滑动选择器 slider 微信小程序表单组件开关 switch 微信小程序表单组件多行输入框 textarea

操作反馈

wxapp操作反馈上拉菜单 action-sheet wxapp操作反馈模式对话框 modal wxapp操作反馈消息提示框：toast wxapp操作反馈消息提示框：loading

微信小程序导航

微信小程序导航 navigator

媒体组件

媒体组件 audio 媒体组件 image 媒体组件 video（视频）

地图

微信小程序地图 map

画布

wxapp画布 canvas

客服会话

微信小程序组件 contact-button（客服会话按钮）

网络

微信小程序API 发起请求微信小程序API 上传、下载微信小程序API Websocket

媒体

微信小程序API 图片微信小程序API 录音微信小程序API 音频播放控制微信小程序API 音乐播放控制微信小程序API 视频微信小程序音频组件控制微信小程序视频组件控制微信小程序API 文件

数据

微信小程序API 数据缓存

位置

微信小程序API 位置微信小程序API 获取位置微信小程序API 查看位置微信小程序API 地图组件控制

设备

微信小程序API 系统信息微信小程序API 网络状态微信小程序API 重力感应微信小程序API 罗盘微信小程序API 拨打电话微信小程序API 扫码

界面交互

微信小程序API 交互反馈微信小程序API 设置导航条微信小程序API 导航微信小程序API 动画

绘图

开放接口

微信小程序API 登录微信小程序API 用户数据的签名验证和加解密微信小程序API 用户信息微信小程序API 微信支付微信小程序API 模板消息微信小程序API 接收消息和事件微信小程序API 发送客服消息微信小程序API 临时素材接口微信小程序API 接入指引微信小程序API 分享微信小程序API 获取小程序页面二维码

工具

微信小程序工具概览微信小程序工具程序调试的三大主要功能区微信小程序工具代码编辑微信小程序工具项目页卡三大主要功能微信小程序工具下载地址微信小程序工具细节点微信小程序开发者工具测试版本的下载微信小程序联系我们微信小程序 Q&A

微信小程序设计规范

微信小程序设计规范（1）友好礼貌微信小程序设计规范（2）清晰明确微信小程序设计规范（3）便捷优雅微信小程序设计规范（4）统一稳定微信小程序设计规范（5）视觉规范

首页移动端小程序微信小程序开发文档

微信小程序表单组件选择器 picker

阅读91490

更新时间2022-04-11

微信小程序表单组件 label

微信小程序表单组件picker-view（嵌入页面的滚动选择器）

微信小程序picker

滚动选择器，现支持三种选择器，通过mode来区分，分别是普通选择器，时间选择器，日期选择器，默认是普通选择器

普通选择器：mode=selector

时间选择器：mode=time

日期选择器：mode=date

QQ截图20170208155852.png

示例代码：

<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="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>

Page({
  data: {
    array:["美国","中国","巴西","日本"],
    index:0,
    date:"2016-09-01",
    time:"12:01"
  },
  bindPickerChange: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  },
  bindDateChange:function(e){
    this.setData({
      date:e.detail.value
    })
  },
  bindTimeChange:function(e){
    this.setData({
      time:e.detail.time
    })
  }
})

picker

微信小程序表单组件 label

微信小程序表单组件picker-view（嵌入页面的滚动选择器）