小程序中的button按钮_button plain

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