微信小程序获取用户信息

个人博客

微信小程序获取用户信息

个人微信公众号，求关注，求收藏，求指错。

文章概叙

本文主要讲的是小程序获取用户信息的，更新测试时间是2023-10-25

更改原因

首先，官网上的解释是这样的，为了安全合规，检验用户的微信名称以及用户的头像，所以修改了小程序获取用户基本信息的方式。

根据相关法律法规，为确保信息安全，由用户上传的图片、昵称等信息微信侧将进行安全检测，组件从基础库2.24.4版本起，已接入内容安全服务端接口（mediaCheckAsync、msgSecCheck），以减少内容安全风险对开发者的影响。

获取逻辑

获取用户的微信头像，依旧需要用户手动的触发，所以需要使用Button组件，并设置open-type类型为chooseAvatar，寓意为获取选择头像，接着再绑定我们的chooseavatar事件来获取我们的信息。在我们不知道的地方，发生的事情就是小程序会将用户的头像进行安全检测，如果成功的话就会返回到绑定的chooseavatar事件中，不成功则无法获取。

获取用户的昵称，依旧是需要用户手动的触发，但是不再使用按钮组件，而是使用Input组件，但是需要将Input组件的type设置为nickname，这样子，当onBlur事件触发的时候，我们就可以获取到用户提供给我们的信息，而当我们使用onBlur事件的时候，如果不用表单，很容易跟别的按钮的bindTap事件发生冲突，触发bindTap事件在先，onBlur事件在后，因此就需要再使用一个form表单包裹起来。

接下来，将代码放出来。

代码实例

wxml文件如下

<view class="userprofile_container" data-weui-theme="{{theme}}"><mp-toptips msg="{{error}}" type="error" show="{{error}}"></mp-toptips><button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar"><image class="avatar" src="{{avatarUrl}}"></image></button><form id="form" bindsubmit="saveUserInfo"><input type="nickname" class="single_input" name="nickName" placeholder="请输入昵称" /><button class="weui-btn btn" type="primary" form-type="submit">确认</button></form>
​
</view>

文章中最主要的两行，分别是第四行到第六行的获取用户头像，第七行到第十行的获取用户的昵称，实现的逻辑在获取逻辑的章节也写清楚了。

index.ts

const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
Page({data: {redirectUrl: '',avatarUrl: defaultAvatarUrl,userInfo: {},//用户的信息error: '',rules: [{name: 'nickName',rules: { required: true, message: '请输入昵称' },}],theme: wx.getSystemInfoSync().theme,},formInputChange(e:any) {const { field } = e.currentTarget.datasetthis.setData({[`userInfO.${field}`]: e.detail.value})},onLoad(e) {console.log(e);wx.onThemeChange((result) => {this.setData({theme: result.theme})})},//获取用户的头像onChooseAvatar(e:any) {const { avatarUrl } = e.detailthis.setData({avatarUrl,})},//保存用户信息async saveUserInfo(e: any) {const { nickName } = e.detail.value;const { avatarUrl } = this.data;if (!nickName) {wx.showToast({icon: "none",title: "请输入您的昵称!"})return}if (!avatarUrl) {this.setData({error: '用户头像不能为空'})return}// 保存到app.tsgetApp().globalData.userInfo = { nickName, avatarUrl };//回去来之前的页面if (this.data.redirectUrl.match("mine")) {wx.switchTab({url: this.data.redirectUrl})}wx.redirectTo({url: this.data.redirectUrl})}
})

最主要的代码如下

  //获取用户的头像onChooseAvatar(e:any) {const { avatarUrl } = e.detailthis.setData({avatarUrl,})},

对应的是wxml文件中，获取用户的头像，将用户的头像路径设置在我们的data中，因为返回的是https开头的头像路径，所以不用考虑长度问题。

 async saveUserInfo(e: any) {const { nickName } = e.detail.value;const { avatarUrl } = this.data;if (!nickName) {wx.showToast({icon: "none",title: "请输入您的昵称!"})return}if (!avatarUrl) {this.setData({error: '用户头像不能为空'})return}

而这一段代码，当用户点击了Button的时候，获取到form表单的数据，并且将获取到的头像还有用户昵称做校验。而因为我们是从其他的页面跳转过来的，因此需要跳转回去。

最终效果

吐槽

从18年开始，小程序从一开始的getUserInfo到中间的按钮获取，再到现在，感觉一改再改…真的是学习永无止境…