uniapp微信小程序授权登录实现

我们在做小程序的时候用的最多的方式登录 就是原生的授权登录的功能 

这个方法 也不是很难  首先我们要获取我们在小程序中的code值

我们小封装一个获取code 的方法 在页面中可以直接调用 封装在 js 中

export const wxlogin = () => {
  return new Promise((resolve, reject) => {
    uni.login({
      provider: 'weixin',
      success: function(loginRes) {
        resolve(loginRes.code);
      },
      fail(err) {
        reject(err)
      }
    })
  })
}

把登录的要封装在一个单独的文件中，这样修改的时候，也方便修改

<template>
  <view class="province_box" v-if="isPopupVisible">
    <view class="container">
      <view class="popupMobile_box">
        <view class="please-mobile">请授权手机号并登录</view>
        <view class="login_mobile">登录就代表已阅读并同意 <text style="color:#0091FF;">《用户隐私协议》</text></view>
        <view class="popup-action">
          <view class="action-button" @click="onCloseAuthMobile">
            取消
          </view>
          <view>
            <button class="action-confirm" @click="onConfirmAuthMobile" open-type="getPhoneNumber"
              @getphonenumber="getPhoneNumber" hover-class="none">
              授权手机号
            </button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    wxlogin
  } from '@/utils/wxlogin.js'
  export default {
    data() {
      return {
        wxPhoneParams: {
          authCode: "",
          iv: "",
          encryptedData: ""
        },
        isPopupVisible: false, // 初始状态为隐藏
      }
    },
    mounted() {
      this.towxlogin()
    },
    methods: {
      onOpenAuthMobile() {
        this.isPopupVisible = true; // 打开弹窗
      },
      async onShowAuthMobile() {
        await this.towxlogin();
        this.onOpenAuthMobile()
      },
      // 获取code 值
      async towxlogin() {
        let code = await wxlogin();
        this.wxPhoneParams.authCode = code;
      },
      //取消授权
      onCloseAuthMobile() {
        this.isPopupVisible = false; // 关闭弹窗
      },
      onConfirmAuthMobile() {
        this.isPopupVisible = false; // 关闭弹窗
      },
      //微信登录
      getPhoneNumber(e) {
        if (e.detail.iv && e.detail.encryptedData) {
          this.wxPhoneParams.iv = e.detail.iv
          this.wxPhoneParams.encryptedData = e.detail.encryptedData
          this.wxMobileLogin(this.wxPhoneParams)
        }
      },
      wxMobileLogin(wxParams) {
        console.log('登陆中....')
         // 这个里面就可以调用登录的时候传入的接口
      }

    }
  }
</script>

<style scoped lang="less">
  .province_box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
  }

  .container {
    background-color: #fff;
    border-radius: 8px 8px 0 0;
    width: 100%;
    max-width: 400px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .popupMobile_box {
    background-color: #fff;
    height: 380rpx;
    border-radius: 30rpx 30rpx 0 0;
  }

  .please-mobile {
    text-align: center;
    padding: 50rpx 0 30rpx;
    font-size: 34rpx;
    color: #000;
  }

  .login_mobile {
    text-align: center;
    font-size: 32rpx;
    color: #333;
  }

  .popup-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 70rpx 100rpx 0;

    .action-button {
      width: 240rpx;
      height: 80rpx;
      font-size: 32rpx;
      font-weight: 600;
      color: #9f9f9f;
      line-height: 80rpx;
      border: 1rpx solid #DFDFDF;
      text-align: center;
      border-radius: 10rpx;
    }

    .action-confirm {
      background: #0091FF;
      color: #fff;
      width: 240rpx;
      height: 80rpx;
      font-size: 32rpx;
      line-height: 80rpx;
      text-align: center;
      border-radius: 10rpx;
    }

    button {
      border-radius: 0rpx;
    }

    button:after {
      border: none;

    }
  }
</style>