一.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对象中)
}