微信小程序获取用户信息

个人博客

微信小程序获取用户信息

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

文章概叙

本文主要讲的是小程序获取用户信息的，更新测试时间是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.dataset
    this.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.detail
    this.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.ts
    getApp().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.detail
    this.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到中间的按钮获取，再到现在，感觉一改再改...真的是学习永无止境...