消除小程序 button 基本样式和实现扩展功能

小程序授权获取用户信息，之前通过 wx.getUserInfo 获取用户信息。通过 API 同意授权获取获取用户信息，API 可以用在JS页面小程序生命周期中，强制获取用户信息。现在腾讯官方修改为：用户主动触发 button来获取用户信息。

button 中 open-type 的属性值为微信开放能力，详情查询小程序官方文档

通过button 按钮获取用户信息，时，显示下面图片信息：

未登录： 已登陆：

需要在未登录状态外，包含一个 button 组件，通过 open-type="getUserInfo"  获取用户信息。能说按钮与未登录的图片长的不一样。。。

消除 button 的基本样式CSS：

button {
  border: none;
  outline: none;
  background: transparent;
  margin: 0;
  padding: 0;
}

消除button 的背景图片主要用 background: transparent,将背景颜色改为透明色。

注意：使用 background: none，button的背景颜色依然存在！！！！

除了基本的登录功能需要用户主动通过点击 button来触发用户授权登陆行为之外，还有【打开客服会话 (contact) 】、【触发用户转发 (share) 】、【获取用户手机号 (getPhoneNumber) 】、【意见反馈 (feedback) 】等功能。

使用案例

<button open-type="contact" class='button'></button>

通过设置button::after，去除button的边框

button::after{
  border: none;
}