不弹出授权框原因

因为版本问题，目前的最新的版本是不支持 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>