微信小程序获取头像和昵称的最新方法(直接用!)

 更新时间:2023年05月04日 11:48:01   作者:老是写Bug  
微信小程序最新获取头像信息之前是使用open-dada获取微信头像和昵称,但是后面由于官网更新,此方法被收回了,所以不能使用此方法了,下面这篇文章主要给大家介绍了关于微信小程序获取头像和昵称的最新方法,本文介绍的方法可以直接拿来用,需要的朋友可以参考下

调整背景

微信小程序获取用户头像和昵称一个开放接口是wx.getUserInfo,2021年4月5日被废弃,原因是很多开发者在打开小程序时就通过组件方式唤起getUserInfo弹窗,如果用户点击拒绝,无法使用小程序,这种做法打断了用户正常使用小程序的流程,同时也不利于小程序获取新用户,后面新添加的一个开放接口wx.getUserProfile,也是用于获取用户头像和昵称

关于wx.getUserProfile

但2022 年 10 月 25 日 24 时后(以下统称 “生效期” ),用户头像昵称获取规则将进行如下调整

考虑到微信版本的更新,目前开发最好还是使用头像昵称填写能力这个方法来做,废话不多说代码奉上

头像填写

从基础库 2.21.2 开始支持

当小程序需要让用户完善个人资料时,可以通过微信提供的头像昵称填写能力快速完善。

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

昵称填写

代码示例

<view data-weui-theme="{{theme}}">
  <button class="avatar-wrapper" open-type="chooseAvatar" bindchooseavatar="onChooseAvatar">
    <image class="avatar" src="{{avatarUrl}}"></image>
  </button> 
  <form catchsubmit="formSubmit">
    <view class="row">
      <view class="text1">昵称:</view>
        <input type="nickname" class="weui-input" name="nickname" placeholder="请输入昵称"/>
    </view>
    <button type="primary" style="margin-top: 40rpx;margin-bottom: 20rpx;" form-type="submit">提交</button>
  </form>
</view>
.avatar-wrapper {
  padding: 0;
  width: 56px !important;
  border-radius: 8px;
  margin-top: 40px;
  margin-bottom: 40px;
  background-color: #fff;
}
.avatar {
  display: block;
  width: 56px;
  height: 56px;
}
.container {
  display: flex;
}
.row{
   border-top: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
   display: flex;
   align-items: center;
   height: 80rpx;
   padding-left: 20rpx;
}
.text1{
    flex: 2;
}
.weui-input{
    flex: 6;
}
const app = getApp()
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
Page({
/**
   * 页面的初始数据
   */
  data: {
    avatarUrl: defaultAvatarUrl,
    theme: wx.getSystemInfoSync().theme,
  },
  onChooseAvatar(e) {
    const { avatarUrl } = e.detail 
    this.setData({
      avatarUrl,
    })
    app.globalData.userInfo.avatarUrl = avatarUrl
  },
  formSubmit(e){
     app.globalData.userInfo.nickName = e.detail.value.nickname
      wx.switchTab({
        url: '/pages/home/index',
      })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    wx.onThemeChange((result) => {
      this.setData({
        theme: result.theme
      })
    })
  },

总结

到此这篇关于微信小程序获取头像和昵称的最新方法的文章就介绍到这了,更多相关微信小程序获取头像和昵称内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 让你的博文自动带上缩址的实现代码,方便发到微博客上

    让你的博文自动带上缩址的实现代码,方便发到微博客上

    添加以下代码到你的博客中: (呵呵,抄袭至lulu Studio http://s8.hk/0itw)
    2010-12-12
  • JS字符串常用操作方法实例小结

    JS字符串常用操作方法实例小结

    这篇文章主要介绍了JS字符串常用操作方法,结合实例形式总结分析了javascript字符串获取、返回、拼接、替换、搜索、计算等相关操作技巧,需要的朋友可以参考下
    2019-06-06
  • JS 常用校验函数

    JS 常用校验函数

    比较常用到的一些字符验证函数,里面有正则等好东西,推荐大家保存即可直接调用。
    2009-03-03
  • JS获取当前网页大小以及屏幕分辨率等

    JS获取当前网页大小以及屏幕分辨率等

    这篇文章主要介绍了JS获取当前网页大小以及屏幕分辨率等,方法虽简单,但比较实用,需要的朋友可以参考下
    2014-09-09
  • KnockoutJS 3.X API 第四章之数据控制流with绑定

    KnockoutJS 3.X API 第四章之数据控制流with绑定

    这篇文章主要介绍了KnockoutJS 3.X API 第四章之数据控制流with绑定的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-10-10
  • Postman的FormData传参的使用示例详解

    Postman的FormData传参的使用示例详解

    今年上半年因为做毕设的原因,有自己接触到后端,也是用过了postman去测试接口,看到了postman那边的参数形式,一直对这个formData有想法,今天通过本文给大家介绍Postman的FormData传参的使用,感兴趣的朋友一起看看吧
    2023-10-10
  • js字符串与Unicode编码互相转换

    js字符串与Unicode编码互相转换

    本文主要介绍了js字符串与Unicode编码互相转换的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-05-05
  • JS实现简单打字测试

    JS实现简单打字测试

    这篇文章主要为大家详细介绍了JS实现简单打字测试,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • 浅谈Javascript中的Function与Object

    浅谈Javascript中的Function与Object

    这篇文章主要简单介绍了Javascript中的Function与Object的关系,并附上示例分析,对于我们更好的理解Javascript中的Function与Object的关系很有帮助,有需要的小伙伴参考下。
    2015-01-01
  • 使用PHP+JavaScript将HTML页面转换为图片的实例分享

    使用PHP+JavaScript将HTML页面转换为图片的实例分享

    这篇文章主要介绍了使用PHP+JavaScript将HTML元素转换为图片的实例分享,文后结果的截图只能体现出替换的字体,也不能说将静态页面转为图片可以加快加载,只是这种做法比较interesting XD需要的朋友可以参考下
    2016-04-04

最新评论