uni-app在微信小程序中无法拉起用户授权面板,uni.getUserInfo直接返回匿名数据

问题描述:在开发中通过微信小程序文档(https://developers.weixin.qq.com/miniprogram/dev/component/button.html)和uni-app文档(https://uniapp.dcloud.io/api/plugins/login?id=getuserinfo)配置button属性与绑定事件实现拉起授权获取用户信息面板:open-type、@getuserinfo="bindGetUserInfo"、withCredentials,在莫名的一波操作后,无论如何点击按钮都无法弹出授权面板,并且在按钮绑定的getuserinfo事件中,直接返回匿名数据

view代码

<button class="cu-btn bg-blue lg shadow" type="default" lang="zh_CN" open-type="getUserInfo"  @getuserinfo="bindGetUserInfo" withCredentials="false">点击授权获取用户信息</button>

script代码

<script>
	export default {
        methods: {
            login(authDetail) {
                let _this = this
                // 判断是否已授权获取用户信息
                uni.getSetting({
                    success(sRes) {
                        if (sRes.authSetting && sRes.authSetting['scope.userInfo']) {
                            // 已授权
                             uni.login({
                                success(res) {
                                    let code = res.code
                                    // 调用自定义服务器方法...
                                    _this.$api.get_token()
                                },            
                                fail(err) {
                                    console.log('打印登录获取code失败原因',err)
                                }
                            })
                        }
                    },
                    fail(sErr) {
                        console.log('获取已授权信息失败',sErr)
                    }
                })   
            },
            bindGetUserInfo(e) {
                // 打印信息
                console.log(e)
                this.login(e.detail)
            }
        }        

    }
</script>

 点击按钮返回的数据

解决:搜了一波网上的文档,还是一样的结果,最后到微信开发社区进行搜索,才发现这个官方公告(https://developers.weixin.qq.com/community/develop/doc/000cacfa20ce88df04cb468bc52801?highLine=getUserProfile),原来官网调整了小程序登录、用户信息相关接口,通过绑定点击事件与调用uni.getUserProfile方法即可,代码如下:

view代码 

<button class="cu-btn bg-blue lg shadow" @click="bindGetUserInfo">点击授权登录</button>

script代码

<script>
	export default {
        methods: {
            login(authDetail) {
                let _this = this
				uni.login({
					success(res) {
						console.log('获取code成功',res)
                        // 调用自定义服务器方法...
						_this.$api.get_token()
					},
					fail(err) {
						console.log('获取code失败',err)
					}
				})  
            },
            bindGetUserInfo(e) {
                let _this = this
				uni.getUserProfile({
					desc:'weixin',   
					success:res=>{
						_this.login(res)
						console.log(res,'授权成功');
					},
					fail:err=>{
						console.log(err,'失败授权')
					}
				})
            }
        }        

    }
</script>

成功拉起弹窗

猜你喜欢

转载自blog.csdn.net/qq_36436407/article/details/115434413