- 小程序登录、用户信息相关接口调整说明
公告更新时间:2021年04月15日考虑到近期开发者对小程序登录、用户信息相关接口调整的相关反馈,为优化开发者调整接口的体验,回收wx.getUserInfo接口可获取用户授权的个人信息能力的截止时间由2021年4月13日调整至2021年4月28日24时。为优化用户的使用体验,平台将进行以下调整: 2021年2月23日起,若小程序已在微信开放平台进行绑定,则通过wx.login接口获取的登录凭证可直接换取unionID2021年4月28日24时后发布的小程序新版本,无法通过wx.getUserInfo与<button open-type="getUserInfo"/>获取用户个人信息(头像、昵称、性别与地区),将直接获取匿名数据(包括userInfo与encryptedData中的用户个人信息),获取加密后的openID与unionID数据的能力不做调整。此前发布的小程序版本不受影响,但如果要进行版本更新则需要进行适配。新增getUserProfile接口(基础库2.10.4版本开始支持),可获取用户头像、昵称、性别及地区信息,开发者每次通过该接口获取用户个人信息均需用户确认。具体接口文档:《getUserProfile接口文档》由于getUserProfile接口从2.10.4版本基础库开始支持(覆盖微信7.0.9以上版本),考虑到开发者在低版本中有获取用户头像昵称的诉求,对于未支持getUserProfile的情况下,开发者可继续使用getUserInfo能力。开发者可参考getUserProfile接口文档中的示例代码进行适配。请使用了wx.getUserInfo接口或<button open-type="getUserInfo"/>的开发者尽快适配。开发者工具1.05.2103022版本开始支持getUserProfile接口调试,开发者可下载该版本进行改造。 小游戏不受本次调整影响。 一、调整背景很多开发者在打开小程序时就通过组件方式唤起getUserInfo弹窗,如果用户点击拒绝,无法使用小程序,这种做法打断了用户正常使用小程序的流程,同时也不利于小程序获取新用户。 二、调整说明通过wx.login接口获取的登录凭证可直接换取unionID 若小程序已在微信开放平台进行绑定,原wx.login接口获取的登录凭证若需换取unionID需满足以下条件: 如果开发者帐号下存在同主体的公众号,并且该用户已经关注了该公众号如果开发者帐号下存在同主体的公众号或移动应用,并且该用户已经授权登录过该公众号或移动应用2月23日后,开发者调用wx.login获取的登录凭证可以直接换取unionID,无需满足以上条件。 回收wx.getUserInfo接口可获取用户个人信息能力 4月28日24时后发布的新版本小程序,开发者调用wx.getUserInfo或<button open-type="getUserInfo"/>将不再弹出弹窗,直接返回匿名的用户个人信息,获取加密后的openID、unionID数据的能力不做调整。 具体变化如下表: [图片] 即wx.getUserInfo接口的返回参数不变,但开发者获取的userInfo为匿名信息。 [图片] 此外,针对scope.userInfo将做如下调整: 若开发者调用wx.authorize接口请求scope.userInfo授权,用户侧不会触发授权弹框,直接返回授权成功若开发者调用wx.getSetting接口请求用户的授权状态,会直接读取到scope.userInfo为true新增getUserProfile接口 若开发者需要获取用户的个人信息(头像、昵称、性别与地区),可以通过wx.getUserProfile接口进行获取,该接口从基础库2.10.4版本开始支持,该接口只返回用户个人信息,不包含用户身份标识符。该接口中desc属性(声明获取用户个人信息后的用途)后续会展示在弹窗中,请开发者谨慎填写。开发者每次通过该接口获取用户个人信息均需用户确认,请开发者妥善保管用户快速填写的头像昵称,避免重复弹窗。 插件用户信息功能页 插件申请获取用户头像昵称与用户身份标识符仍保留功能页的形式,不作调整。用户在用户信息功能页中授权之后,插件就可以直接调用 wx.login 和 wx.getUserInfo 。 三、最佳实践调整后,开发者如需获取用户身份标识符只需要调用wx.login接口即可。 开发者若需要在界面中展示用户的头像昵称信息,可以通过<open-data>组件进行渲染,该组件无需用户确认,可以在界面中直接展示。 在部分场景(如社交类小程序)中,开发者需要在获取用户的头像昵称信息,可调用wx.getUserProfile接口,开发者每次通过该接口均需用户确认,请开发者妥善处理调用接口的时机,避免过度弹出弹窗骚扰用户。 微信团队 2021年4月15日
2021-04-15 - getUserInfo接口如何替换成getUserProfile超详细说明
微信小程序API近期又做了调整,之前用的好好的getUserInfo做了重大调整,无法直接获取用户信息了,比如昵称头像等等,当然2021年4月13日上线前的小程序不受影响,如果想要再次升级新版本,即必须涉及到更换获取用户授权的修改,将getUserInfo改成getUserProfile接口。 [图片] 这就代表着之前用的获取授权信息的方法要做调整了,先看看哪些模块受到影响。 之前使用如下代码,可以获取用户的相关信息: 之前:(使用上面的方式,会出现授权弹窗,同意后可以直接获取到nickName昵称及avatarUrl用户头像) [图片] 现在:(不会弹窗,直接获取用户信息nickName变成了匿名,avatarUrl用户头像变成了灰色头像) [图片] 授权过后鉴定是否授权同样也无法使用了,下面是app.js中的代码同过wx.getSetting获取scope.userInfo判断是否授权,现在获取不该参数,所有这个在app.js中的写法就无法判断用户有没有登录了。 [图片] 针对上面的文字,下面开始来介绍下我的实现方式,如何用好新接口getUserProfile。 先来看看wx.getUserProfile怎么用:https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserProfile.html 上面是官方地址,里面有详细的说明。 getUserProfile不像之前的getUserInfo一样必须放在按钮button上,而且要使用open-type="getUserInfo",新接口直接可以应用在任何标签上,使用点击时间或者其他触发事件直接执行getUserProfile接口,如下所示: 注:desc属性必须填写,不填写可能获取不到数据; 如下图所示,将会出现弹窗授权 [图片] 每次点击都会获取一次授权,这样有个好处就是之前getUserInfo时候拒绝了之后再想同意需要操作很大一圈代码,这个的话,每次点击都会重新弹窗一次这样倒是解决了一大难题。 [图片] 正确的用户信息,包含了昵称及头像等等... 存在的问题: 如果每次点击都授权的话用户体验非常的不友好,比如做了一个博客系统,每次用户想要给某一条信息点赞,点赞前都要授权一次,用户肯定很烦,所以,获取授权第一次的时候就要存储下来,然后再做表单提交或者点赞评论时候,判断数据库中用户信息是否存在就好了。 解决方案: user页面,提醒客户点击登录授权,默认头像及文字提醒,授权过后显示头像及昵称;[图片] user.wxml页面 {{userInfo.nickName}} {{userInfo.country+userInfo.province+userInfo.city}} 点击登录 user.js页面 //没有授权过的话,不要在当前页面存储用户信息,直接跳转到login页面同意处理用户信息 goLogin(){ wx.navigateTo({ url: '/pages/login/login' }) } login登录页面的操作,点击确认授权弹出授权浮窗。[图片] login.wxml页面 确认授权 暂不授权 login.js页面 //获取授权信息 clickUserProfile(){ wx.getUserProfile({ desc: '业务需要', lang:'zh_CN', success:res=>{ this.saveUserInfo(res.userInfo) } }) }, //保存用户信息 saveUserInfo(userInfo){ app.globalData.userInfo=userInfo //使用页面栈的方式,获取了授权信息接着更改用户页面的userInfo属性 var page=getCurrentPages()[getCurrentPages().length-2]; page.setData({ userInfo }) //使用云函数saveuser将用户信息存储到云数据库中 wx.cloud.callFunction({ name:"saveuser", data:{ userInfo } }).then(res=>{ wx.showToast({ title: '授权成功' }) setTimeout(()=>{ this.noLogin(); },1500) }) } saveuser云函数页面 // 云函数入口函数 exports.main = async (event, context) => { const openid = cloud.getWXContext().OPENID const {userInfo}=event; userInfo.openid=openid; //获取数据库中有没有当前用户的信息 var res= await db.collection("userAll").where({ openid:openid }).count() if(res.total>0){ return await db.collection('userAll').where({ openid }).update({ data: userInfo }) }else{ return await db.collection('userAll').add({ data: userInfo }) } } 一旦获取了用户信息,自动会从login页面跳转到user页面,同理user页面中的userInfo就变成了最新的用户数据,user页面也就变成了这样; [图片] 首次进入user页面时候需要从数据库判断是否已经存在该用户信息 app.js页面 //定义hasUserInfo函数,发送云函数,同过返回true和false判断是否已经授权 async hasUserInfo(){ if (this.globalData.userInfo && this.globalData.userInfo.nickName && this.globalData.userInfo.avatarUrl) return true var res= await wx.cloud.callFunction({ name:"getuser" }) if(res.result.code==200){ this.globalData.userInfo=res.result.data[0] return true }else{ return false } } getuser云函数页面 // 云函数入口函数 exports.main = async (event, context) => { const openid = cloud.getWXContext().OPENID var res=await db.collection("userAll").where({ openid }).get(); if(res.data.length){ return {data:res.data,code:200} }else{ return {code:400} } } 在需要的位置就可以使用app.js中的hasUserInfo方法了,比如user页面 user.js页面 //页面载入时 onLoad:async function (options) { await app.hasUserInfo() this.setData({ userInfo:app.globalData.userInfo }) } 比如对一个点赞按钮操作时候先判断有没有用户信息时候: //点赞操作 async clickZan(){ if(await app.hasUserInfo()){ console.log("可以点赞"); }else{ wx.navigateTo({ url: '/pages/login/login' }) } } 还有一种不保存用户信息,只负责在页面中展现的可以直接使用open-data组件,不用授权就可以轻松获取用户信息; 组件地址如下: https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html 演示代码如下: 最终效果 [图片] 如果文章没有看懂,还有视频的介绍 https://www.bilibili.com/video/BV1s64y1i7Rw
2021-04-22 - 【汇总】wx.getUserProfile 改造常见问题
书接上文 1、如何做版本兼容? 我在项目中使用的是wx.canIUse('getUserProfile')判断getUserProfile API 是否可以使用(切换版本库2.10以下可以模拟旧场景),如果有其他好方法,欢迎在评论区指出。 2、问什么改造过程中遇到了报错?'getUserProfile:fail can only be invoked by user TAP gesture' 一般由于直接使用了这种写法。 应该把wx.login和wx.getUserProfile分开调用,(建议wxlogin获取的code单独保存,每用一次单独刷新一次(code5分钟有效)),据说反着写也行,就是getUserProfile的success 里再调wx.login。 3、授权弹窗没有弹出? 检查下wx.getUserProfile 中的desc字段是否填写(desc为必填,官方意思后续可以展示在弹窗内)。 ⚠️ wx.getUserProfile 调用必须要在catchtap 、bindtap、showmodal 里绑定方法,依旧需要用户主动触发。 手写不易,麻烦乡亲们点个赞,我好完成主人的任务🤓。
2021-04-09 - 微信小程序获取用户新接口采坑解决。
问题描述 相信很多人在使用微信小程序新接口获取到用户信息时,或多或少都遇到过这种情况。 [代码]调用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名称,就不行了。 第二步,使用微信真机调试。 符合上面的两种情况,就可以获取到用户信息了。 希望对大家有所帮助。
2021-03-12 - wx.getUserInfo 切换到 wx.getUserProfile
看了一下很久以前的小程序,发现之前用的wx.getUserInfo需要进行修改 官方的文档 https://developers.weixin.qq.com/community/develop/doc/000cacfa20ce88df04cb468bc52801?highLine=getUserInfo%2520%25E5%2588%2587%25E6%258D%25A2%25E5%2588%25B0%2520getUserProfile 因为微信修改了规则 所以原来的wx.getUserinfo不能够使用了 所以使用wx.getUserProfile /** * 判断用户是否登录 */ jugdeUserLogin: function(event) { var that = this wx.getUserProfile({ desc:'登录', success:(res)=>{ that.data.user = res.userInfo; console.log(that.data.user) that.formSubmit(); }, fail:(res)=>{ // debugger console.log(res) } }); // // 查看是否授权 // wx.getSetting({ // success(res) { // if (res.authSetting['scope.userInfo']) { // // 已经授权,可以直接调用 getUserInfo 获取头像昵称 // wx.getUserInfo({ // success: function(res) { // that.data.user = res.userInfo; // console.log(that.data.user) // } // }) // } // } // }) }, 可以看一下我的注释部分是之前的版本的 同时我还删除了 button 中的open-type的属性 变得地方就在跳转而已,其他没有大的变化。
2021-11-10