uniapp-小程序登录授权框

微信官方文档

不弹出授权框原因

因为版本问题，目前的最新的版本是不支持 wx.getUserInfo 去主动弹出授权框 只能引导用户去点击 butten 去授权

解决方法

        我的思路是参考了其他的微信微信小程序, 就是跳转到'我的'页面的时候 在钩子函数内去触发一个封装的模态框,状态由false 和true 去决定显示隐藏

        然后在模态框内去放置一个按钮 通过按钮去触发事件 去调用微信支持的接口wx.getUserProfile

模态框组件的代码:

<template>
	<view>
		<view class="room-info-mask" v-if="myShow" @click="hide"></view>
		<view class="room-info animated" v-if="myShow" :class="{slideInUp: wrapper,slideOutDown: !wrapper}">
			<view class="title-wrapper">
				<view class="title">xxx申请</view>
				<view class="iconfont close" @click="hide"></view>
			</view>
			<view class="sub-title">登录xxxxx</view>
			<view class="des">登录以开始探索更多精彩内容</view>
			<button class="btn" open-type="getPhoneNumber" @getphonenumber="getPhone">授权手机号并登录</button>
			<view class="cancel" @click="hide">取消</view>
		</view>
	</view>
</template>

<script>
import { weixinLogin } from "@/api/login/login.js"
const app = getApp();
export default {
	props: {
		show: {
			type: Boolean,
			default: false
		}
	},
	data () {
		return {
			mask: false,
			wrapper: false,
			myShow: false,
		};
	},
	mounted() {
		this.myShow = this.show;
		this.wrapper = true;
	},
	watch: {
		show(isShow) {
			if (isShow) {
				this.myShow = isShow;
				this.wrapper = true;
			} else {
				this.wrapper = false;
				setTimeout(() => {
					this.myShow = false;
				}, 400);
			}
		},
	},
	methods: {
		hide() {
			this.wrapper = false;
			setTimeout(() => {
				this.$emit('handleHide', {
					show: false
				});
			}, 400);
		},
		// 获取手机号
		getPhone (e) {
			const getPhoneCode = e.detail.code
			uni.login({
				provider: 'weixin',
				success: (res) => {
					console.log('res-login', res);
					//获取到code
					this.code = res.code;
					// console.log('code', res.code);
					//请求登录接口
					if (res.errMsg == 'login:ok') {
						let data = {
							grant_type: 'urn:ietf:params:oauth:grant-type:wechat',
							scope: 'message.write openid',
							code: this.code,
							role: 'user',
							getPhoneCode: getPhoneCode
						}
						this.wechatLogin(data)
					}
				},
			});
		},
		// 微信登录
		async wechatLogin(data){
			const res = await weixinLogin(data)
			console.log(res, res.data.access_token)
			// this.$store.commit("userInfo/setToken", res.data.access_token)
			if (res.statusCode == 200 && res.data.code !== 0) {
				uni.showToast({
					title: '登录成功',
					icon: 'success',
					mask: true,
				});
				//获取到token 存入缓存。通过有无token来判断是否登录
				// console.log('登录接口',res)
				uni.setStorageSync('token', res.data.access_token)
				// this.myProfile()  //用户信息接口
				// this.getHistoryList()   //足迹接口
				this.myShow = false;
				// 刷新当前页面
				uni.reLaunch({ url: '/pages/mine/mine' });
			} else {
				uni.showToast({
					title: '登录失败',
					icon: 'warn',
					mask: true,
				});
			}
		},
	},
	components: {
	},
};
</script>

<style lang="scss" scoped>
.room-info-mask {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 99;
	background: rgba(28,28,28,0.2);
}
.room-info {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	background: #fff;
	max-height: 90vh;
	padding: 8rpx 30rpx 50rpx;
	box-sizing: border-box;
	border-radius: 20rpx 20rpx 0rpx 0rpx;
	overflow: scroll;
	.title-wrapper {
		height: 44rpx;
		display: flex;
		align-items: center;
		position: relative;
		padding-top: 38rpx;
		padding-bottom: 20rpx;
		.title {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999;
		}
		.close {
			position: absolute;
			right: 0rpx;
			top: 30rpx;
			&:before {
				font-size: 30rpx;
				color: #000;
				content: '\eaf2';
			}
		}
	}
	.sub-title {
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 36rpx;
		color: #000;
		padding-top: 30rpx;
	}
	.des {
		padding-top: 10rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 36rpx;
		color: #333;
	}
	.btn {
		margin: 100rpx 45rpx 20rpx;
		width: 600rpx;
		height: 80rpx;
		border-radius: 50rpx;
		background-color: #26c791;
		color: #fff;
		line-height: 80rpx;
		text-align: center;
	}
	.cancel {
		text-align: center;
		color: #999;
		
	}
}
</style>

实现的效果图

封装成组件是因为  有些页面是需要登录才能访问的 所以在点击跳转之前 可以通过判断本地是否有token 去决定能否跳转    如果没有登录 就把状态改为 true  然后就 打开模态框提示用户登录