小程序的授权登陆-获取unionId

小程序的授权，现在需要点击按钮才能打开授权的弹出框。button的open-type=“getUserInfo”

<button open-type="getUserInfo" @getuserinfo="bindGetUserInfo" class="btn">确定</button>

代码如下：(代码样式，请根据自己的设计进行完善)。

 <view class="page">
    <view class="give-me">
      <view class="logo">
        <image lazy-load src="{{imagePath+'logo.png'}}" wx:if="{{imagePath}}"/> 
      </view>

      <view class="title">很高兴与你相遇</view>
      <view class="title">点击授权即可加入</view>
      <!-- 确定按钮 -->
      <button open-type="getUserInfo" @getuserinfo="bindGetUserInfo" class="btn">确定</button>
    </view>
  </view>

我的样式：

page{
  position: fixed;
  width: 100%;
  height:100%;
  background-color:rgba(0, 0, 0, 0.5);
  left: 0;
  top: 0;
  z-index: 999;
  .give-me{
    background-color: #fff;
    position: absolute;
    width: 630rpx;
    height: 550rpx;
    left: 50%;
    top: 40%;
    margin-left: -315rpx;
    margin-top: -275rpx;
    border-radius: 20rpx;
    text-align: center;
    .logo{
      height: 220rpx;
      background-image: url('https://pictest.sqplus.cn/szjs/user/images/index/bg_01.png');
      background-repeat: no-repeat;
      background-size: 630rpx 220rpx;
      image{
        width: 170rpx;
        height: 170rpx;
        padding-top: 50rpx;
      }
    }
    .title{
      font-size: 32rpx;
      color: #666;
      margin-top: 40rpx;
    }
    .title:last-child{
      margin-top: 20rpx;
    }
    .btn{
      width: 510rpx;
      height: 84rpx;
      line-height: 84rpx;
      text-align: center;
      background-color: #EB4D4E;
      border-radius: 42rpx;
      margin: 0 auto;
      margin-top: 30rpx;
      font-size: 32rpx;
      color: #fff;
    }
  }
}

效果就是：（产品保密，不能让你们看到完整的截图，哈哈）

 

 

js:定义bindGetUserInfo方法。当用户确定授权后，再去根据wx.getUserInfo得到encryptedData和iv;wx.login可以获取到用户的code。这其中的encryptedData是加密后用户的openid和session_key。可能包含unionId。需要请求后台进行解密操作.

为什么说可能包含unionId呢？因为如果，你没有在微信开放平台上，关联你开发的小程序，是绝对不会有unionId的!!!!

地址是：https://open.weixin.qq.com/。。关于encryptedDatad的解密，可以交给后台，前端也可尝试解密一下，请求的地址：

https://api.weixin.qq.com/sns/jscode2session(参数：qppid，code,encryptedData,iv)。

 bindGetUserInfo(e) {
        if (e.detail.userInfo) {
            //用户按了允许授权按钮
            var that = this;
            //插入登录的用户的相关信息到数据库
            that.queryUserInfo(e);
            // wx.switchTab({
            //           url:'../index/index'
            // })
        } else {
            //用户按了拒绝按钮
            wx.showModal({
                title:'警告',
                content:'您点击了拒绝授权，将无法进入小程序，请授权之后再进入!!!',
                showCancel:false,
                confirmText:'返回授权',
                success:function(res){
                    if (res.confirm) {
                        console.log('用户点击了“返回授权”')
                    } 
                }
            })
        }
  }

queryUserInfo(e){
    var that = this;
      wx.getUserInfo({
          success: function (res) {
          console.log(res);
          var encryptedData = res.encryptedData;
          var iv = res.iv;
           wx.login({
            success: res => {
            // 获取到用户的 code 之后：res.code
               that.code = res.code 
               console.log(res);
                wx.request({
                url: 'api/szmktuser/user/authorize',
                header: {
                  'content-type': 'application/x-www-form-urlencoded'
                  },// 默认值,
                data: {
                  'encryptedData':encryptedData,
                  'code':that.code,
                  'iv':iv,
                }, //请求的参数",
                method: 'post',
                dataType: 'json',
                success: res => {
                  console.log(res);
                },
                fail: () => {
                },
                complete: () => {}
            });
             }
            });                  
        }
    });
  }