微信小程序获取用户信息

个人博客

微信小程序获取用户信息

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

文章概叙

本文主要讲的是小程序获取用户信息的,更新测试时间是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文件如下

javascript 复制代码
<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

javascript 复制代码
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
    })
  }
})

最主要的代码如下

javascript 复制代码
  //获取用户的头像
  onChooseAvatar(e:any) {
    const { avatarUrl } = e.detail
    this.setData({
      avatarUrl,
    })
  },

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

javascript 复制代码
 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到中间的按钮获取,再到现在,感觉一改再改...真的是学习永无止境...

相关推荐
知识分享小能手8 分钟前
uni-app 入门学习教程,从入门到精通, uni-app常用API的详细语法知识点(上)(5)
前端·javascript·vue.js·学习·微信小程序·小程序·uni-app
Strawberry9612 分钟前
chooseVideo传视频无法取到缩略图
微信小程序
江城开朗的豌豆7 小时前
小程序与H5的“握手言和”:无缝嵌入与双向通信实战
前端·javascript·微信小程序
江城开朗的豌豆7 小时前
小程序静默更新?用户却无感?一招教你“强提醒”
前端·javascript·微信小程序
菜鸟una9 小时前
【微信小程序 + map组件】自定义地图气泡?原生气泡?如何抉择?
前端·vue.js·程序人生·微信小程序·小程序·typescript
狂团商城小师妹15 小时前
XYlease租赁商城小程序
微信·微信小程序·小程序
顾青1 天前
微信小程序 VisionKit 实战(二):静态图片人脸检测与人像区域提取
前端·微信小程序
顾青1 天前
微信小程序实现身份证识别与裁剪(基于 VisionKit)
前端·微信小程序
從南走到北1 天前
西陆房产系统小程序
微信·微信小程序·小程序
黑马源码库miui520861 天前
同城派送小程序
微信小程序·小程序