将微信授权单独封装成组件

废话不说直接上效果图

image.png

父组件中引用子组件

// json文件中
"usingComponents": {
    "authorize": "../../pages/auth/auth",
 }
<authorize show="{{isauthorize}}" type="{{userType}}" bindmyevent="onLoad"></authorize>

子组件 贴过去可以直接使用

<!--pages/auth/auth.wxml-->
<modal hidden="{{!show}}" data-type="{{type}}"  cancel-text='' confirm-text=''>
<!-- <view class='mask' wx:if='{{show}}'> -->
<view class='stu-h'>
  <view class='ellipse'>
  </view>
  <view class='stu-h-m'>
    <view class='stu-sinfo'>
      <view class='stu-tx'>
        <image src='../../static/logo.png'></image>
      </view>
      <!-- <view class='stu-name'>浙江科技学院三位一体</view> -->
    </view>
    <image class='bg-wave' src='../../static/bg-wave.png'></image>
  </view>
</view>
<button class="login-btn" open-type="getUserInfo" bindgetuserinfo="getInfo">微信授权</button>
</modal>

 //写在method中
  getInfo: function (e) {
      var that = this;
      if (e.detail.iv && e.detail.encryptedData){
        app.globalData.userInfo = e.detail.userInfo;
        wx.setStorageSync('headImg', e.detail.userInfo.avatarUrl);
        wx.setStorageSync('nickName', e.detail.userInfo.nickName);
        var encryptedData = e.detail.encryptedData
        var iv = e.detail.iv
        wx.login({
          success: function (res) {
            if (res.code) {
              var jsonObj = {
                code: res.code,
                encryptedData: encryptedData,
                iv: iv,
                wxid: 'wx03'
              };
              wx.showLoading({
                title: '加载中',
              })
              wx.request({
                url: app.globalData.ApiUrl + 'zustcommon/bckjBizYhxx/getSwWxInfo',
                data: {
                  "data": JSON.stringify(jsonObj),
                  timestamp: new Date().getTime()
                },
                header: {
                  "Content-Type": "application/x-www-form-urlencoded"
                },
                method: 'POST',
                success: function (res) {
                  wx.hideLoading();
                  //console.log(res);
                  let objData = {};
                  objData.data = JSON.parse(common.deBase64AndUncompress(res));
                  res = objData;
                  if (res.data.bean) {
                    //console.log(res.data.bean.openId);
                    if (res.data.bean.unionid){
                      openId = res.data.bean.openId;
                      unionid = res.data.bean.unionid;
                      app.globalData.openId = res.data.bean.openId;
                      app.globalData.unionid = res.data.bean.unionid;
                      wx.setStorageSync('openId', openId);
                      wx.setStorageSync('unionid', unionid);
                      that.setData({ show: false });
                    }else{
                      wx.showToast({
                        title: '获取用户信息失败，请重新授权',
                        icon: 'none'
                      })
                    }
                  }else{
                    wx.showToast({
                      title: '获取用户信息失败，请重新授权',
                      icon: 'none'
                    })
                  }
                },
                fail: function () {
                  wx.hideLoading();
                  wx.showToast({
                    title: '网络出错，请稍后再试',
                    icon: 'none',
                    duration: 2000
                  })
                }

              })
            }
          },
          fail: function (res) {
            console.log(res)
          }
        })
      }else{
        wx.showModal({
          title: '提示',
          content: "用户登录需要授权，请重新授权",
          showCancel:false,
          success(res) {
            if (res.confirm) {
              
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          }
        })
        return false;
      } 
    }

/* pages/auth/auth.wxss */
.login-btn{margin: 100rpx 30rpx;background: #26b887;color: #fff;border-radius: 50px;}

.ellipse{
  width: 120%;
  margin-left: -10%;
  height: 220px;
  margin-top: -100px;
  background: #26b887;
  border-radius: 50% / 50%;
}
.stu-h-m{
  margin: 45rpx;
  height: 380rpx;
  margin-top:-100px;
  background-color: #ffffff;
    box-shadow: 2rpx 4rpx 15rpx 0rpx 
            rgba(0, 135, 131, 0.75);
    border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.bg-wave{
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: -65%;
}

.stu-sinfo{
  padding: 27px 0;
  width: 100%;
  text-align: center;
}

.stu-tx{
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  margin: 0 auto;
}

.stu-tx image{
  width: 100%;
  height: 100%;
}

.stu-name{
  margin-top: 0rpx;
  font-size: 30rpx;
  color:#26b887;
  font-weight: bold 
}