|
属性说明 属性名 | 类型 | 默认值 | 说明 | 生效时机 | 平台差异说明 | size | String | default | 按钮的大小 |
|
| type | String | default | 按钮的样式类型 |
|
| plain | Boolean | false | 按钮是否镂空，背景色透明 |
|
| disabled | Boolean | false | 是否禁用 |
|
| loading | Boolean | false | 名称前是否带 loading 图标 |
| App-nvue 平台，在 ios 上为雪花，Android上为圆圈 | form-type | String |
| 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件 |
|
| open-type | String |
| 开放能力 |
|
| hover-class | String | button-hover | 指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果 |
| App-nvue 平台暂不支持 | hover-start-time | Number | 20 | 按住后多久出现点击态，单位毫秒 |
|
| hover-stay-time | Number | 70 | 手指松开后点击态保留时间，单位毫秒 |
|
| app-parameter | String |
| 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 |
| 微信小程序、QQ小程序 | hover-stop-propagation | boolean | false | 指定是否阻止本节点的祖先节点出现点击态 |
| 微信小程序 | lang | string | 'en' | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。 |
| 微信小程序 | session-from | string |
| 会话来源，open-type="contact"时有效 |
| 微信小程序 | send-message-title | string | 当前标题 | 会话内消息卡片标题，open-type="contact"时有效 |
| 微信小程序 | send-message-path | string | 当前分享路径 | 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效 |
| 微信小程序 | send-message-img | string | 截图 | 会话内消息卡片图片，open-type="contact"时有效 |
| 微信小程序 | show-message-card | boolean | false | 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效 |
| 微信小程序 | @getphonenumber | Handler |
| 获取用户手机号回调 | open-type="getPhoneNumber" | 微信小程序 | @getuserinfo | Handler |
| 用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo | open-type="getUserInfo" | 微信小程序 | @error | Handler |
| 当使用开放能力时，发生错误的回调 | open-type="launchApp" | 微信小程序 | @opensetting | Handler |
| 在打开授权设置页并关闭后回调 | open-type="openSetting" | 微信小程序 | @launchapp | Handler |
| 打开 APP 成功的回调 | open-type="launchApp" | 微信小程序 |
注意事项 l button-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;} l open-type="launchApp"时需要调起的APP接入微信OpenSDK详见 size 有效值 type 有效值 值 | 说明 | primary | 微信小程序为绿色，App、H5、百度小程序、支付宝小程序为蓝色，字节跳动小程序为红色，QQ小程序为浅蓝色 | default | 白色 | warn | 红色 |
form-type 有效值 open-type 有效值 值 | 说明 | 平台差异说明 | feedback | 打开“意见反馈”页面，用户可提交反馈内容并上传日志 | App、微信小程序、QQ小程序 | share | 触发用户转发 | 微信小程序、百度小程序、支付宝小程序、字节跳动小程序、QQ小程序 | getUserInfo | 获取用户信息，可以从@getuserinfo回调中获取到用户信息，包括头像、昵称等信息 | 微信小程序、百度小程序、QQ小程序 | contact | 打开客服会话，如果用户在会话中点击消息卡片后返回应用，可以从 @contact 回调中获得具体信息 | 微信小程序、百度小程序 | getPhoneNumber | 获取用户手机号，可以从@getphonenumber回调中获取到用户信息 | 微信小程序、百度小程序、字节跳动小程序、支付宝小程序 | launchApp | 打开APP，可以通过app-parameter属性设定向APP传的参数 | 微信小程序、QQ小程序 | openSetting | 打开授权设置页 | 微信小程序、百度小程序 | getAuthorize | 支持小程序授权 | 支付宝小程序 | contactShare | 分享到通讯录好友 | 支付宝小程序 | lifestyle | 关注生活号 | 支付宝小程序 | openGroupProfile | 呼起QQ群资料卡页面，可以通过group-id属性设定需要打开的群资料卡的群号，同时manifest中必须配置groupIdList | QQ小程序基础库1.4.7版本+ |
注意 l 在小程序中，开发者可以登录 微信小程序管理后台 、QQ小程序后台后，进入菜单“客服反馈”页面获取反馈内容。 l 在 App 中，开发者登录 DCloud开发者中心 后点击应用名称，进入左侧菜单“用户反馈”页面获取反馈内容。 l 点击 share 分享按钮时会触发 onShareAppMessage l 支付宝小程序平台，获取用户手机号时，建议先通过条件编译的方式，调用支付宝原生API，参考 事件务必使用vue语法，比如下面的获取手机号示例小白教程网www.2d5.net 【uniapp参考资料】 （1）uni-app跨平台开发 入门到实战
https://ke.qq.com/course/package/26512
（2）uni-app 完整商城界面设计实战 https://ke.qq.com/course/2381059
（3）基于vue的uniapp商城完整项目源代码
https://ke.qq.com/course/3064977
（4）毕业设计网 http://www.pc-365.net
（5）小程序编程网 http://www.4317.org
（6）计算机编程网
http://www.05423.com
|
