button
官方文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/button.html
我这里废话不多说，很简单就是直接来使用这个组件，说下使用当中的注意点。
属性
!> 注意点：默认情况下小程序中的按钮是块级元素
size
设置按钮的大小：
?> 默认情况下 size 的取值为 default，显示的样式为：display：block
index.wxml:
<button size="default">我是按钮</button>?> 如果设置 size 的取值为 mini，那么就会从 display：block 修改为 display：inline-block
index.wxml:
<button size="mini">我是按钮</button>
<text>我是text</text>
type
按钮的样式类型：
!> 注意点：type 仅仅是提供了一些内置样式，如果不满足我们的需求也可以通过 CSS 自定义按钮样式。
index.wxml:
<button type="primary">我是按钮</button>
<button type="default">我是按钮</button>
<button type="warn">我是按钮</button>plain
按钮是否镂空，背景色透明:
index.wxml:
<button type="primary" plain="{{true}}">我是按钮</button>disabled
是否禁用:
index.wxml:
<button type="primary" plain="{{true}}" disabled="{{true}}">我是按钮</button>loading
名称前是否带 loading 图标:
index.wxml:
<button type="primary" loading="{{true}}">我是按钮</button>看了那么多属性，其实都不是我重点要介绍的，在 button 组件中，有一个叫 open-type 的属性，这个属性官方的描述是 微信开放能力。
open-type
获取用户信息
开始使用一下，在文档当中我发现可以获取用户信息，（这里是一个错误的步骤，问题就是官方没有更新文档，后面有正确的打开方式也就是获取方式）
?> open-type=getUserInfo： 获取用户信息，可以从bindgetuserinfo回调中获取到用户信息 （小程序插件中不能使用）
index.wxml:
<button type="default"
open-type="getUserInfo"
bindgetuserinfo="onGetUserInfo"
>获取用户信息</button>index.js:
Page({
onGetUserInfo(event){
console.log(event);
}
})点击按钮的返回值：
rawData: "{"nickName":"微信用户","gender":0,"language":"","city":"","province":"","country":"","avatarUrl":"https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132"}"avatarUrl 的头像是错误的，好了这里我说了一堆无用的，是个错误的示例，然后我们来看看正确的方式获取，正确的获取方式其实很简单，就是写一个按钮，然后调用下微信提供的 API 即可，如下：
官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserProfile.html
index.wxml:
<button type="default"
bindtap="onGetUserInfo"
>获取用户信息</button>index.js:
Page({
onGetUserInfo(event){
wx.getUserProfile({
desc: 'BNTang 就是要获取',
success: (res)=>{
console.log(res);
}
})
}
})点击按钮的返回值：
rawData: "{"nickName":"ㅤ ","gender":0,"language":"zh_CN","city":"","province":"","country":"","avatarUrl":"https://thirdwx.qlogo.cn/mmopen/vi_32/oKkJltWzg8IbkrI4ia5QODcRA2o9B0RnFQ6QznA5Y4HuMQOePyh6SSqEbKGzo1YGGsHNSq4Dg6v8ZxnmibGH6ZHA/132"}"获取用户手机号
?> open-type=getPhoneNumber：获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息，具体说明 （小程序插件中不能使用）
- 如果想获取用户的手机号，只有在前端是无法获取的，需要后端配合才能获取。
index.wxml:
<button open-type="getPhoneNumber" bindgetphonenumber="onGetPhoneNumber">获取用户手机号</button>index.js:
Page({
onGetPhoneNumber(event){
console.log(event);
}
})返回结果：
currentTarget: {id: "", offsetLeft: 68, offsetTop: 0, dataset: {…}}
detail: {errMsg: "getPhoneNumber:ok", encryptedData: "bF9O8dTHdbGpKsdEj6tgnhHIUa4xxf8GKDhyyqc9/OUweu/yyp…brupo5Pzr9zNICoJlcm8q6iA3azjDeDhRnlSG4np/soDaxQ==", iv: "TuJRVFz2q0PoCilZZfet6Q=="}
mark: {}
mut: false
target: {id: "", offsetLeft: 68, offsetTop: 0, dataset: {…}}
timeStamp: 28140
type: "getphonenumber"
_userTap: false!> 注意点：获取手机号的微信开发者账号必须进行认证，如果没有认证是没有权限进行获取的，认证形式我这里不提供，自行问度娘
- 从基础库
2.21.2开始，获取手机号的文档和方式发生了改变，所以在获取之前先确定自己使用的基础库版本
居然说到要后端配后，假如我们这里不会 golang，java，nodejs，那不是很蛋疼了，这里就不得不给大家介绍一个工具了，名为 showdoc，官方文档：https://www.showdoc.com.cn/runapi/30291
更改基础库的版本 >= 2.21.2 (这一步自行解决)：
需要将 button 组件 open-type 的值设置为 getPhoneNumber，当用户点击并同意之后，可以通过 bindgetphonenumber 事件回调获取到动态令牌code，然后把code传到开发者后台，并在开发者后台调用微信后台提供的 phonenumber.getPhoneNumber 接口，消费code来换取用户手机号。每个code有效期为5分钟，且只能消费一次。
注：getPhoneNumber 返回的 code 与 wx.login 返回的 code 作用是不一样的，不能混用。
好了，看了这么多我们直接来上代码走一个：
获取 code：
index.wxml:
<button open-type="getPhoneNumber" bindgetphonenumber="onGetPhoneNumber">获取用户手机号</button>index.js:
Page({
onGetPhoneNumber(event){
console.log(event.detail.code);
}
})获取 AccessToken，官方文档：https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/mp-access-token/getAccessToken.html
我们可以使用 showdoc 来进行获取，后续就是通过后端代码进行获取即可：
appid, secret 在微信小程序的，开发管理，开发设置当中获取。
这个时候我们已经有了 accessToken 与 code，然后再拿着这两个数值去调用获取手机号接口(也是通过showdoc进行模拟)需要注意的是code是放在请求体当中的，accessToken 是放在 Query 当中的：
