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

这个方法 也不是很难  首先我们要获取我们在小程序中的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.ivthis.wxPhoneParams.encryptedData = e.detail.encryptedDatathis.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>