小程序组件---表单组件

**

（1）button按钮组件

**
button按钮属性

按钮大小size属性值



按钮type样式类型


![在这里插入图片描述](https://img-blog.csdnimg.cn/20190813190035882.png

button按钮hover类属性

**

对比： ①view视图组件hover-start-time默认50，hover-stay-time默认400 ②navigator导航组件hover-start-time默认50，hover-stay-time默认600

**

form-type触发表单提交/重置操作

form-type 属性值

**

open-type —微信开放能力常用属性值

**

①contact客户会话 ②share分享转发 ③getPhoneNumber获取用户手机号 ④getUserInfo获取用户信息 ⑤openSetting授权设置页 ⑥feedback意见反馈页面

getUserInfo获取用户信息成功后，便不会再次出现授权弹框。成功授权后，再次点击时不会再出现授权弹框
open-type 微信开放能力属性值—openSetting授权设置页
开启小程序之旅授权成功后，此时再点击openSetting打开授权设置页会发现此时开关为打开状态；在设置页关闭开关后，再返回上一页面，再点击getUserInfo时会再次 弹框授权提示
open-type 微信开放能力属性值—feedback意见反馈

**

客服相关

**
1、网页端客服
注意：网页端客服类似于网页版微信，但两者不会互相影响，即该模块虽然是以聊天者状态存在，但可以同时登录
2、 移动端小程序客服
除了网页端客服，还可以登录移动端小程序客服

**

（2）input输入框组件

**
基础属性

type属性值





占位符placeholder属性


注意：placeholder字体大小默认与input字体大小相同，不能分开设置，不然应用户体验。方案：给input设置字体大小即可

焦点类属性

bindfocus打印出的值：


bindblur打印出来的值：


键盘与键盘按钮

confirm-type属性值






注意：confirm-type的最终表现与手机输入法本身的实现有关，部分安卓系统输入法和第三方输入法可能不支持或不完全支持。

cursor-spacing


bindconfirm输出的值：


input输入框现有bug：
①部分微信版本placeholder 在聚焦时出现重影问题
②部分机型 focus 属性设置无效
③input 组件是一个原生组件，字体是系统字体，所以无法设置 font-family

**

（3）textarea多行输入框组件

应用场景：发表评论或发布帖子，点击按钮跳到评论页面
**
发布评论页面代码块


bindinput输出的值：

bindconfirm输出的值：

**

（4）form表单组件

**
作用：将组件内的用户输入的switch input checkbox slider radio picker 提交

注意：当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key

提交评论操作


注意：
提交表单时，必要在需要提交信息的表单组件上，加上 name 来作为 key，否则会获取不到相关信息

（5）form表单组件–单选组件

**

①radio-group单项选择器，内部由多个 radio 组成

**

**

②radio单选项目

**


有时单选项目过多时，需要用到循环指令wx:for

关联组件label

**

label组件用来改进表单组件的可用性

**

作用：使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。
目前可以绑定的控件有：button, checkbox, radio, switch

（6）form表单组件–多选组件

①checkbox-group多选选择器

②checkbox多选项目

（7）表单组件–slider滑动组件

拖动滑块时，两个两个的开始增长。

**

颜色类属性

**

滑块属性

**

拖动事件

**

switch开关组件

picker滚动组件

picker滚动选择器

mode取值：
注意：除了之前的通用属性外，对于不同的mode，picker拥有不同的属性

普通选择器mode = selector

多列选择器mode = multiSelector