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.codeuni.login({provider: 'weixin',success: (res) => {console.log('res-login', res);//获取到codethis.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  然后就 打开模态框提示用户登录