uniapp微信小程序微信登录一键授权
提示
1.当用户未授权过，调用该接口将直接报错
2.当用户授权过，可以使用该接口获取用户信息
微信授权步骤
授权
部分接口需要经过用户授权同意才能调用。我们把这些接口按使用范围分成多个 scope ，用户选择对 scope 来进行授权，当授权给一个 scope 之后，其对应的所有接口都可以直接使用。
此类接口调用时：
如果用户未接受或拒绝过此权限，会弹窗询问用户，用户点击同意后方可调用接口； 如果用户已授权，可以直接调用接口； 如果用户已拒绝授权，则不会出现弹窗，而是直接进入接口 fail 回调。请开发者兼容用户拒绝授权的场景。 获取用户授权设置 开发者可以使用 wx.getSetting 获取用户当前的授权状态。
打开设置界面
用户可以在小程序设置界面（「右上角」 - 「关于」 - 「右上角」 - 「设置」）中控制对该小程序的授权状态。 开发者可以调用 wx.openSetting 打开设置界面，引导用户开启授权。 提前发起授权请求 开发者可以使用 wx.authorize 在调用需授权 API 之前，提前向用户发起授权请求
<!-- 微信授权登录全程代码实现 --> <template> <view> <view v-if="isloading"> <!-- isloding是用来记录当前用户是否是第一次授权使用的 --> <view> <view class='header'> <image src='../../static/img/wx_login.png'></image> </view> <view class='content'> <view>申请获取以下权限</view> <text>获得你的公开信息(昵称，头像、地区等)</text> </view> <button class='bottom' type='primary' open-type="getUserInfo" withCredentials="true" @getuserinfo="getuserinfo"> 授权登录 </button> </view> </view> <!-- #endif --> </view> </template> <script> export default { data() { return { SessionKey: '', OpenId: '', nickName: null, avatarUrl: null, isloading: uni.getStorageSync('isloading') || true //默认为true }; }, methods: { //第一授权获取用户信息===》按钮触发 getuserinfo() { let that = this; uni.getUserInfo({ provider: 'weixin', success: function(infoRes) { let nickName = infoRes.userInfo.nickName; //获取用户登录昵称 let avatarUrl = infoRes.userInfo.avatarUrl; //获取用户头像 try { uni.setStorageSync('isloading', false); //记录是否第一次授权 false:表示不是第一次授权 that.updateUserInfo(); } catch (e) {} }, fail(res) {} }); }, //登录 login() { let that = this; uni.showLoading({ title: '登录中...' }); // 1.wx获取登录用户code uni.login({ provider: 'weixin', success: function(loginRes) { let code = loginRes.code; if (!that.isloading) { //非第一次授权获取用户信息 uni.getUserInfo({ provider: 'weixin', success: function(infoRes) { //获取用户信息后向调用信息更新方法 let nickName = infoRes.userInfo.nickName; //昵称 let avatarUrl = infoRes.userInfo.avatarUrl; //头像 that.updateUserInfo(); //调用更新信息方法 } }); } //2.将用户登录code传递到后台置换用户SessionKey、OpenId等信息 uni.request({ url: '服务器地址',//接入后端提供的登录接口 data: { code: code,//传入参数code获取登录凭证 }, method: 'GET', header: { 'content-type': 'application/json' },//请求头 success: (res) => { //openId、或SessionKdy存储//隐藏loading uni.hideLoading(); } }); }, }); }, //向后台更新信息 updateUserInfo() { let _this = this; uni.request({ url: 'url', //服务器端地址 data: { appKey: this.$store.state.appKey,//Vuex封装app密钥 customerId: _this.customerId,//自定义id nickName: _this.nickName,//昵称 headUrl: _this.avatarUrl//头像 }, method: 'POST', header: { 'content-type': 'application/json' }, success: (res) => { if (res.data.state == "success") { uni.reLaunch({ //信息更新成功后跳转到小程序首页 url: '/pages/index/index' }); } } }); } }, onLoad() { //默认加载 this.login(); } } </script> <style> .header { margin: 90rpx 0 90rpx 50rpx; border-bottom: 1px solid #ccc; text-align: center; width: 650rpx; height: 300rpx; line-height: 450rpx; } .header image { width: 200rpx; height: 200rpx; } .content { margin-left: 50rpx; margin-bottom: 90rpx; } .content text { display: block; color: #9d9d9d; margin-top: 40rpx; } .bottom { border-radius: 80rpx; margin: 70rpx 50rpx; font-size: 35rpx; } </style> 复制代码欢迎关注博主，为你解忧疑难！！
作者：逆风boy
链接：https://juejin.cn/post/7019213215443714062