ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
微信小程序中 用户信息授权 一直是一个非常重要的功能,它有着提升用户体验、进行用户身份认证、便于开发者进行数据分析等作用。 —— 但是用户授权功能涉及到用户隐私,所以微信开发者团队针对此功能进行了许多次修改。最近的一次修改将在 2022年10月26日24时 后开始强制生效。 —— 今天我们就从小程序的用户信息获取历程开始学习。 1.关于获取用户信息 通过微信小程序获取到的用户信息包括:昵称(nickName)、性别(gender)、语言(language)、国家(country)、省市(province)、城市(city)、头像(avatarUrl)。 在许多日常点餐、购物等小程序中,我们经常可以看到是否同意授权手机号******的提示,而当我们在小程序基本配置接口时并不能查询到手机号的获取方法。实际上手机号的应用场景基本上是在进行支付时才可以获取,是被用作支付凭证时使用(涉及商户号等支付操作),所以为了保护用户隐私, 手机号并不在用户信息中进行获取 。 2.关于用户信息接口的调整 在我们浏览微信官方文档时,可以发现用户信息接口有两个,分别是 wx.getUserInfo 和 wx.getUserProfile 。其中第三个 UserInfo 是一个数据类型(也就是通过以上两个接口获取到的结果对象) 。 ![](https://img.kancloud.cn/97/08/97088050e4134a29a28b0ae818eca23e_237x138.png) 用户信息的获取过程又分为两方面,一方面是 获取到用户信息的调整 ,另一方面是 获取用户信息方法接口的调整 。 获取到用户信息的调整 中最新信息就是性别、地址、语言等全部不给开发者(商家)进行提供。 ![](https://img.kancloud.cn/cb/23/cb23e2f37501c0f128b0ef1c370879e7_1892x650.png) 而 获取用户信息方法接口的调整 就是从一开始的 wx.getUserInfo 调整到 wx.getUserProfile ,而在今年(2022年)10月25日24时之后 wx.getUserProfile 也将停止使用。 ![](https://img.kancloud.cn/ef/24/ef24a43adc8c77b703c790146c2ae7bf_761x478.png) wx.getUserInfo 接口可以直接获取到用户信息的返回数据,并让我们自由处理。 ![](https://img.kancloud.cn/4c/f2/4cf2989f71222ebc21d226eb12c557dd_756x397.png) wx.getUserProfile 修复了 wx.getUserInfo 接口中直接获取用户信息的缺陷,需要经过用户同意后才可以获取到用户的信息 userInfo ,同样我们可以将其进行自由处理。 ![](https://img.kancloud.cn/35/a0/35a0c80bbc5c8089d7b1a1634091d258_1068x621.png) 而在最新的调整说明中,开发者为了获取到用户信息,将小程序设定成了 用户不授权的情况下就不可以正常访问小程序的某些页面 的逻辑,这基本上与微信开发团队 增强用户体验 的目标产生极大冲突与矛盾。所以干脆将 wx.getUserProfile 这个接口也停止使用。 以上总结下来有两点: 1.我们将无法获取除用户唯一标识(openid、unionid)以外任何信息。 2.我们将只可以使用 在页面直接展示 这个功能(用于用户例如”我的“等页面的体验提升),该功能实际上是由用户自行上传头像和昵称的过程。 有好有坏,虽然不能收集到用户信息了,但是既保护了用户隐私,也省去了我们某些开发过程。同时用户也可以自愿进行身份信息的上传,从而保证自己的隐私不会被侵犯。 3.展示用户头像与昵称 ![](https://img.kancloud.cn/8a/5d/8a5d8728219da61a1d7a412668fd0279_1229x708.png) 在微信开放能力中,可以观察到微信提供了一套方案,方便用户自行上传头像和修改昵称。 这个功能对前端朋友非常友好。 html: ``` <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar"> <image class="avatar" src="{{avatarUrl}}"></image> </button> <input type="nickname" class="weui-input" placeholder="请输入昵称"/> ``` js: ``` // 默认头像,灰色的人头团 const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0' Page({ data: { avatarUrl: defaultAvatarUrl, }, onChooseAvatar(e) { const { avatarUrl } = e.detail // 将头像替换成用户自己选择的头像,并将其放入缓存 this.setData({ avatarUrl, }) } }) ``` 这个就不详细展开研究了,我想以其他方式实现。 因为这对于了解后端的朋友实际很鸡肋,我们完全可以直接让用户将昵称和头像上传到后端数据库,在他们每次登录时直接调取就好了。这个过程我们会在下篇文章用户注册时一起完成。 所以说微信本次的功能升级很大程度解决了用户隐私被侵犯的问题,通过让 用户自己设置 微信小程序上的头像和昵称,而避免自己微信原本的头像和昵称被上传,用户在浏览小程序时确实会安心许多。 4.用户登录 以上讲这么多,就是为了告诉大家 不必再纠结用户信息的获取 ,现在我们只需要专注于用户的唯一标识即可,下面反而简单了许多。 (1)区分用户 我们在进行用户列表的设计中,最重要的就是区分用户。就像数据库中每条数据都有一个id作为索引凭证,在微信平台中也为每一位用户设定了专门的“身份证”。 用户在当前小程序的唯一标识(openid) ,openid是单个用户在此小程序中的唯一标识,单个用户在多个小程序中的标识是不同的。 unionid,微信开放平台帐号下的唯一标识 ,unionid是用户在整个微信开放平台的唯一标识,在多个小程序中的unionid相同。但前提是 当前小程序已绑定到微信开放平台帐号 中。 (2)以openid为例获取唯一标识 小程序指南中说明了用户唯一标识的获取方法: ![](https://img.kancloud.cn/0a/1c/0a1c3ff19336587ff1c541107912b77d_722x123.png) 先调用wx.login获取 code 用户临时登录凭证 ,接着调用 auth.code2Session 传入code参数获取到用户唯一标识。 开始操作: 首先考虑到用户登录功能复用性非常高,直接创建一个组件页面,设计成登陆页面。 ![](https://img.kancloud.cn/1d/72/1d7251460e13fc3ca0c59d827991b3b5_398x829.png) 使用v-if在查询到没有openid时使用该页面,催促用户进行登录,查询到有openid时给用户展示自己想看的页面(授权这一页可有可无,大家完全可以使用onload方法在进入页面时直接执行下方的登录方法,免去用户登录这一操作,因为openid并不涉及用户隐私,所以平台没有强制我们询问用户是否授权。我们下面的主要目的是获取openid)。 接着点击按钮调用wx.login和auth.code2Session接口。 ``` login() { wx.login({ success(res) { if (res.code) { // 获取到code后进行下一步操作,通过服务器后端get请求auth.code2Session链接获取openid wx.request({ url: 'https://xxxx.com/get_openid', data: { code: res.code }, success(res) { console.log('openid', res) this.openid = res.data.openid // 将openid存入本地缓存,减少用户频繁登录次数 wx.setStorage({ key: "openid", data: res.data.openid }) } }) } else { console.log('登录失败!' + res.errMsg) } } }) } ``` 后端调用以php为例: get请求地址*https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code* ![](https://img.kancloud.cn/8e/aa/8eaa5efc398434e1a52a6c6d17fe6d7d_643x197.png) 其中后端请求auth.code2Session地址中的两个参数需要大家进行修改: ![](https://img.kancloud.cn/b4/3d/b43d7c2662c1a7a75fdea72759f4fb93_767x556.png) 这两个东西在小程序后台找: ![](https://img.kancloud.cn/b6/1d/b61d0738b7a75222f7456cb1379272a2_1258x788.png) 设置完成后,即可获得用户openid。 到此用户登录完成,获取到用户的唯一标识openid,并存入了本地缓存storage。 同样的,根据你的需求在数据库中将openid作为第二索引值保存,用户每次登录时就可以获取自己的数据。 下篇文章我们就进行连接数据库并完成用户注册功能的实现。不了解后端的朋友可以去查看下我之前的node、golang、php等后端文章,之后大多就一笔带过了。