问题描述
相信很多人在使用微信小程序新接口获取到用户信息时,或多或少都遇到过这种情况。
调用wx.getUserProfile 报错getUserProfile:fail can only be
invoked by user TAP gesture.
这个错误信息是啥意思?大致的意思就是,需要将授权按钮设置为点击事件,也就是给对应的触发条件绑定一个bintap事件。
解决思路
第一步。确认代码无误。
首先我们需要在wxml中这样定义登录按钮。
<view class="login-btn">
<button class="login-btn" style="background-color: #07C160;color:white;width:100%;" open-type="getUserProfile" bindtap="getUserProfile">
登录授权
</button>
</view>
接着在js文件中定义如下的信息。
getUserProfile() {
wx.login({
success(res) {
let code = res.code;
wx.getUserProfile({
lang: 'en',
desc: '获取授权',
success: function (res) {
console.log(res)
}, fail: function (res) {
console.log('fail-get-userinfo', res)
}, complete: function () {
console.log('complete-get-userinfo')
}
})
}
});
},
在实际中发现,点击事件名称换做非getUserProfile名称,就不行了。
第二步,使用微信真机调试。
符合上面的两种情况,就可以获取到用户信息了。
希望对大家有所帮助。
完善一下。完善js文件,wxml文件没有变动。需要将getUserProfile和login两个接口给分离开,如果getUserProfile包含在login里面,微信开发者工具发现不能调试。
Page({ data: { code: '', }, onLoad: function (e) { }, // 调用wx.getUserProfile接口 getUserProfile() { let that = this wx.getUserProfile({ desc: '获取授权', success: function (res) { console.log(res) request.postRequest('wechat/login', {// 请求后端登录接口 userInfo: res.userInfo, code: that.data.code,// 将wx.login中的code一并传入到后台 }, function (res) { }) } }) // 调用wx.login接口 wx.login({ success: function (res) { that.setData({ code: res.code// 将code复制给data变量 }) } }) }, })
新版登录完整代码实现:https://viencoding.com/article/300
比较奇怪,我之前使用wx.getUserProfile报这个错,
一改成wx.login就报Setting data field "userInfo" to undefined is invalid,
不太清楚是为什么
我采用的 简单有效 的修改方法
https://developers.weixin.qq.com/community/develop/article/doc/00000cc422c12844b4fb644d056813