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

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

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

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

javascript 复制代码

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

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

javascript 复制代码

<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>