微信小程序学习Course 5 view组件、input组件、button组件
微信小程序学习Course 5 视图组件、input组件、button组件
5.1 view组件
5.2 input组件
此组件具有以下属性
出处：https://developers.weixin.qq.com/miniprogram/dev/component/input.html
| 属性名 | 类型 | 默认值 | 说明 | 最低版本 |
|---|---|---|---|---|
| value | String | 输入框的初始内容 | ||
| type | String | "text" | input 的类型 text文本、number数字、idcard身份证类型、digit带小数的数字键盘 | |
| password | Boolean | false | 是否是密码类型 | |
| placeholder | String | 输入框为空时占位符；当还没有输入数据时显示的文字 | ||
| placeholder-style | String | 指定 placeholder 的样式 | ||
| placeholder-class | String | "input-placeholder" | 指定 placeholder 的样式类 | |
| disabled | Boolean | false | 是否禁用 | |
| maxlength | Number | 140 | 最大输入长度，设置为 -1 的时候不限制最大长度 | |
| cursor-spacing | Number | 0 | 指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 | |
| auto-focus | Boolean | false | (即将废弃，请直接使用 focus )自动聚焦，拉起键盘 | |
| focus | Boolean | false | 获取焦点 | |
| confirm-type | String | "done" | 设置键盘右下角按钮的文字，仅在type='text'时生效 | 1.1.0 |
| confirm-hold | Boolean | false | 点击键盘右下角按钮时是否保持键盘不收起 | 1.1.0 |
| cursor | Number | 指定focus时的光标位置 | 1.5.0 | |
| selection-start | Number | -1 | 光标起始位置，自动聚集时有效，需与selection-end搭配使用 | 1.9.0 |
| selection-end | Number | -1 | 光标结束位置，自动聚集时有效，需与selection-start搭配使用 | 1.9.0 |
| adjust-position | Boolean | true | 键盘弹起时，是否自动上推页面 | 1.9.90 |
| bindinput | EventHandle | 键盘输入时触发，event.detail = {value, cursor, keyCode}，value为输入的值；keyCode 为键值，2.1.0 起支持，处理函数可以直接 return 一个字符串，将替换输入框的内容。 | ||
| bindfocus | EventHandle | 输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度，在基础库 1.9.90 起支持 | ||
| bindblur | EventHandle | 输入框失去焦点时触发，event.detail = {value: value} | ||
| bindconfirm | EventHandle | 点击完成按钮时触发，event.detail = {value: value} |
重要组件已经用黑色标注
5.3 button组件
bindTap点击事件。
出处：https://developers.weixin.qq.com/miniprogram/dev/component/button.html
| 属性名 | 类型 | 默认值 | 说明 | 生效时机 | 最低版本 |
|---|---|---|---|---|---|
| size | String | default | 按钮的大小 | ||
| type | String | default | 按钮的样式类型 | ||
| plain | Boolean | false | 按钮是否镂空，背景色透明 | ||
| disabled | Boolean | false | 是否禁用 | ||
| loading | Boolean | false | 名称前是否带 loading 图标 | ||
| form-type | String | 用于 <form/> 组件，点击分别会触发 <form/>组件的 submit/reset 事件 |
|||
| open-type | String | 微信开放能力 | 1.1.0 | ||
| hover-class | String | button-hover | 指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果 |
||
| hover-stop-propagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态 | 1.5.0 | |
| hover-start-time | Number | 20 | 按住后多久出现点击态，单位毫秒 | ||
| hover-stay-time | Number | 70 | 手指松开后点击态保留时间，单位毫秒 | ||
| lang | String | en | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。 | open-type="getUserInfo" | 1.3.0 |
| bindgetuserinfo | Handler | 用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致 | open-type="getUserInfo" | 1.3.0 | |
| session-from | String | 会话来源 | open-type="contact" | 1.4.0 | |
| send-message-title | String | 当前标题 | 会话内消息卡片标题 | open-type="contact" | 1.5.0 |
| send-message-path | String | 当前分享路径 | 会话内消息卡片点击跳转小程序路径 | open-type="contact" | 1.5.0 |
| send-message-img | String | 截图 | 会话内消息卡片图片 | open-type="contact" | 1.5.0 |
| show-message-card | Boolean | false | 显示会话内消息卡片 | open-type="contact" | 1.5.0 |
| bindcontact | Handler | 客服消息回调 | open-type="contact" | 1.5.0 | |
| bindgetphonenumber | Handler | 获取用户手机号回调 | open-type="getPhoneNumber" | 1.2.0 | |
| app-parameter | String | 打开 APP 时，向 APP 传递的参数 | open-type="launchApp" | 1.9.5 | |
| binderror | Handler | 当使用开放能力时，发生错误的回调 | open-type="launchApp" | 1.9.5 | |
| bindopensetting | Handler | 在打开授权设置页后回调 | open-type="openSetting" | 2.0.7 |
