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>

成功拉起弹窗

  • 8
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
uni-app 实现 H5 静默微信授权,你可以按照以下步骤进行操作: 1. 首先,确保你已经在微信公众平台上注册了你的应用,并获取到了 AppID。 2. 在 uni-app 项目的 `main.js` 文件引入微信 JS-SDK: ```javascript import wx from 'weixin-js-sdk' Vue.prototype.$wx = wx ``` 3. 创建一个 `wechat.js` 文件,用于封装微信 JS-SDK 的相关操作,例如: ```javascript import wx from 'weixin-js-sdk' export function initWechatConfig() { // 向后端请求获取微信配置信息 // ... // 初始化微信 JS-SDK wx.config({ debug: false, appId: '', // 你的 AppID timestamp: '', // 后端返回的时间戳 nonceStr: '', // 后端返回的随机字符串 signature: '', // 后端返回的签名 jsApiList: ['checkJsApi', 'login', 'getUserInfo'] // 需要使用的微信 API }) } export function login() { return new Promise((resolve, reject) => { wx.ready(() => { wx.login({ success: res => { if (res.code) { // 将 code 发送到后端服务器进行处理,获取用户信息 // ... resolve(res.code) } else { reject(new Error('微信登录失败')) } }, fail: err => { reject(err) } }) }) }) } export function getUserInfo() { return new Promise((resolve, reject) => { wx.ready(() => { wx.getUserInfo({ success: res => { // 获取到用户信息,进行处理 // ... resolve(res.userInfo) }, fail: err => { reject(err) } }) }) }) } ``` 4. 在需要授权的页面,调用 `initWechatConfig()` 方法初始化微信 JS-SDK 配置,在需要获取用户信息的地方调用 `login()` 方法进行登录,并在登录成功后再调用 `getUserInfo()` 方法获取用户信息。 5. 根据获取到的用户信息进行业务逻辑处理。 通过以上步骤,你可以在 uni-app H5 实现静默微信授权。请注意,具体的实现细节可能会因为你的业务逻辑和后端实现而有所不同。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

东小记

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值