位置:电子教程 > Uni-app入门到精通教程 (如果看不到内容请使用360浏览器) 推荐学习资源
前言
第1章 uni-app入门
2.1.1 应用生命周期
2.2 路由
2.3 运行环境判断
2.4 页面样式与布局
2.5 template 和 block
2.7 NPM支持
2.8 TypeScript 支持
2.9 小程序组件支持
2.10 WXS
3.1 配置概要
3.2 配置项列表 pages.json
3.3 manifest.json 配置项列表
3.4 package.json
3.5 vue-config.js
3.6 uni.scss
3.7 App.vue 3.7.1 应用生命周期
3.8 main.js
4.1 JSON 简介
4.2 JSON 语法
4.3 JSON 对象
4.4 JSON 数组
4.5 JSON.parse()
4.6 JSON.stringify()转字符串
4.7 eval函数
5.1uni-app常用语法
5.2 uni-app接口的使用
5.3 uni-app中表单的使用
5.4 uni-app中参数的使用
第6章 uni-app常用组件
当前阅读教程:Uni-app入门到精通教程 > 6.4.1 button按钮
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 6.3.4 progress进度条 下一篇: 6.4.2 checkbox-group多项选择器

6.4.1 button按钮

image.png

属性说明

属性名

类型

默认值

说明

生效时机

平台差异说明

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 有效值

说明

default

默认大小

mini

小尺寸

 

type 有效值

说明

primary

微信小程序为绿色,App、H5、百度小程序、支付宝小程序为蓝色,字节跳动小程序为红色,QQ小程序为浅蓝色

default

白色

warn

红色

 

form-type 有效值

说明

submit

提交表单

reset

重置表单

 

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


上一篇: 6.3.4 progress进度条 下一篇: 6.4.2 checkbox-group多项选择器
计算机毕业设计作品网      毕业设计文档网      小程序教程网       毕业设计资料网  |         毕业设计定制QQ:45157718(微信同号)(备注:毕设)