微信小程序 - 获取用户信息的几种方式

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:;
   bottom:;
   left:;
   right:;
   z-index:;
   background: #000;
   opacity: 0.8;
 }

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

后面的app.js和index.js均是官方示例（或者直接点击拉取Github示例，哈哈）

3. 当然是发送code到后端，我们接收用户信息就OK了