1. 老接口（上线使用-测试用button先获取用户信息）

// 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
        // 也就是发送到后端,后端通过接口发送到前端，前端接收用户信息等....
        wx.setStorageSync('code', res.code);
        console.log(wx.getStorageSync('code'))
        
        // 获取用户信息
        wx.getSetting({
          success: res => {
            if (res.authSetting['scope.userInfo']) {
              // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
              wx.getUserInfo({
                success: res => {
                  // 可以将 res 发送给后台解码出 unionId
                  this.globalData.userInfo = res.userInfo

                  // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
                  // 所以此处加入 callback 以防止这种情况
                  if (this.userInfoReadyCallback) {
                    this.userInfoReadyCallback(res)
                  }
                }
              })
            }
          }
        })
      }
    })

2. button - 官方示例
   wxml

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <block wx:if="{{!hasUserInfo && canIUse}}" class='show-author'>
      <button open-type="getUserInfo" class='show-author' bindgetuserinfo="getUserInfo">

      <!--随意定制 -->
        <view class='get-userinfo'>获取用户信息</view>
      </button>
    </block>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
</view>

wxss

.show-author {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
  background: #000;
  opacity: 0.8;
}

.show-author>.get-userinfo {
  color: #fff;
  background-color: #f00;
  border-radius: 10rpx;
  top: 50%;
  margin-top: 70%;
}