button：是按钮组件；可以通过小程序提供的属性切换按钮的外观样式，也可以通过某些属性调用内置的功能

1. 控制按钮外观的属性

--通过type属性控制按钮的样式类型

--通过size属性控制按钮的尺寸

--通过plain属性控制按钮是否镂空

--通过disabled属性控制按钮是否可点击

--通过loading属性控制按钮名称前是否带 loading 图标

<button type="primary">primary</button>
<button type="primary" loading="true">primary+Loading</button>
<button type="primary" disabled="true">primary+Disabled</button>
<button type="default">默认样式</button>
<button type="default" disabled="true">默认样式+Disabled</button>
<button type="warn">警告类warn</button>
<button type="warn" disabled="true">警告类warn+Disabled</button>
<button type="primary" plain="true">primary+plain</button>
<button type="primary" disabled="true" plain="true">primary+plain+disabled</button>
<button type="default" plain="true">默认样式+plain</button>
<button type="default" disabled="true" plain="true">默认样式+plain+disabled</button>
<button type="primary" size="mini">mini+primary</button>
<button type="default" size="mini">mini+默认样式</button>
<button type="warn" size="mini">mini+warn</button>

 注意：直接设置button标签的尺寸是不生效的，这个涉及到权重问题，在小程序中通过 button[size=‘mini‘]、button:not([size=‘mini‘])设置按钮的宽高，它的权重是(0,1,1)。css会渲染权重高的选择器的样式，所以只需要在wxss样式表中，设置更高的权重，那么样式就会生效

1）.设置!important。设置了!important的选择器的权重是*的

button{

  width: 700rpx !important;

}

2）.设置行内样式

<button type="primary" style="width:700rpx">primary</button>

3）.为按钮设置ID，其权重为(1,0,0)

<button type="primary" id="btn">primary</button>

#btn{

  width: 700rpx !important;

}

4）.将button包裹在一个容器组件中，如view，为view设置class名，通过.view .btn修改样式，其权重(0,2,0)

<view class="view"><button type="primary" class="btn">primary</button></view>

.view .btn{

  width: 700rpx;

}

总结：改变小程序按钮尺寸及默认样式的方法其实不能，只要选择器的权重大于小程序内置选择器的权重，就可以了

2. 开放能力

1）contact 打开客服会话,需要在微信小程序的后台配置

share 向微信朋友转发当前的小程序，不能把小程序分享到朋友圈

2）getPhoneNumber  获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息，非企业小程序账号是没有权限去获取用户的手机号码的

    --- 绑定一个事件 bindgetphonenumber

    --- 在事件的回调函数中 通过参数来获取信息

    --- 获取到的信息 是加密后的数据

      --- 需要用户自己搭建小程序的后台服务器，在后台服务器中解析手机号码，返回到小程序中 就可以看到信息了

3）getUserInfo 获取用户信息，可以从bindgetuserinfo回调中获取到用户信息

  --- 使用方法 类似 获取用户手机号

  --- 可以直接获取 不存在加密的字段

  --- 数据包含在detail.userInfo中，可以获取到用户头像、城市、省份、国家、性别(1是男生，2是女生)、语言、昵称

4）launchApp 打开APP

  --- 需要先在 App中 通过App的某个链接打开小程序

  --- 在小程序中 再 通过这个功能重新打开App

5）openSetting 打开授权设置页

  --- 授权页面中 只会出现 用户曾经点击过的权限

6）feedback  打开小程序内置的“意见反馈”页面

  --- 只能通过真机调试打开

<button open-type="contact">contact</button>
<button open-type="share">share</button>
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber</button>
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>
<button open-type="launchApp">launchApp</button>
<button open-type="openSetting">openSetting</button>
<button open-type="feedback">feedback</button>

  // 获取用户的手机号码
  getPhoneNumber(e){
    console.log(e)
  },
  // 获取用户个人信息
  getUserInfo(e){
    console.log(e)
  },

小程序12-button组件