一.button的外观属性
1.size属性:设置button的大小,可选值有"default"(默认)、"mini"(小尺寸)
<button size="default">默认按钮</button>
<!-- 当button不设置size属性时取默认大小 -->
<button size="mini">小尺寸按钮</button>
2.type属性:设置button的颜色,可选值有"default"(默认)、"primary"(绿色)、"warn"(红色)
<button type="default">默认按钮</button>
<!-- 当不设置type属性时取默认颜色 -->
<button type="primary">绿色按钮</button>
3.plain属性:设置button是否镂空
<button plain>镂空按钮</button>
<!-- 也可以写成plain="{{true}}" -->
<!-- 写成plain="{{false}}"则效果不生效 -->
4.loading属性:设置button是否处于加载状态
<button loading>加载按钮</button>
<!-- 也可以写成loading="{{true}}" 同上 -->
无论是button的大小还是颜色,通过设置属性值来改变其外观是十分受限的,因此不必拘泥或受限于小程序button内置的属性,可以通过添加样式的方法来改变button的外观。
二.button的开发能力(open-type属性)
1.contact值:点击按钮打开客服对话(需要真机调试)
具体步骤:
1)将测试号改为自己的appid,若一开始就使用appid开发则忽略此步骤
2)打开小程序官网添加客服微信
<button open-type="contact">点击按钮打开客服对话</button>
<!-- share、launchApp、openSetting、feedback值写法一致 不再一一列举代码块 -->
2.share值:分享当前的小程序给微信好友,但不能分享到朋友圈
3.launchApp值:在小程序中直接打开APP,但需要先在该APP内打开该小程序
4.openSetting值:打开小程序内置的授权页面,但只会出现用户曾经点击授权过的权限
5.feedback值:打开小程序内置的意见反馈页面,需要真机调试(将测试号改为appid)
6.getPhoneNumber值:获取当前用户的手机号码信息,但只能获取加密后的信息,不是企业的小程序账号没有权限获取用户的手机号码(想要查看解密的号码,需要自己搭建小程序的后台服务器,在后台服务器中解析,然后再返回到小程序中)
当设置open-type的值为getPhoneNumber时,应相对应的设置bindgetphonenumber用来绑定事件,该事件是一个被定义在js文件中的函数,当用户点击按钮时该函数被执行,并且返回用户的手机号信息
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取用户手机号</button>
<!-- getPhoneNumber是函数名 该函数在该页面下的js文件中被定义 并且在点击按钮的时候被执行 -->
//参数e是一个对象,用于接收点击按钮后返回的信息
getPhoneNumber(e){
console.log(e)
//在控制台中输出返回的信息
//用户的手机号信息包含在e对象中
}
7.getUserInfo值:获取当前用户的个人信息(头像、用户名、年龄、籍贯等),同getPhoneNumber,当设置open-type的值为getUserInfo时,应相对应的设置bindgetuserinfo用来绑定事件,该事件是一个被定义在js文件中的函数,当用户点击按钮时该函数被执行,并且返回用户的个人信息
<button open-type="getUserInfo" bindgetuserinfo="getUser">点击按钮获取用户个人信息</button>
getUser(e){
console.log(e)
//在控制台输出用户的个人信息(包含在e对象中)
}