微信小程序获取用户头像 小程序如何获取头像信息

小程序开发

2021-06-17

  我们在开发小程序项目的时候,经常会遇到需要获取用户头像和昵称信息的需求,而微信小程序也为我们提供了许多的方法,但是最近微信小程序对获取用户昵称和头像方法进行了更新,网上很多的文章都已经不适用了,今天厦门在乎科技为大家带来微信小程序如何获取头像信息,一起来了解一下吧。

  

微信小程序获取用户头像 小程序如何获取头像信息


  微信小程序获取用户头像方法一:

  1.首先,传统接口wx.getUserInfo的效果会弹出一个给用户的弹窗,需要用户授权,经过测试传统的wx.getUserInfo目前还是能用的,但是在使用时候会有官方log提醒你,这个方法需要升级。

  2.然后就是官方提供的最新方法Open-data标签,使用这个标签可以不用用户授权直接获得头像和昵称

  例子:

        <open-data type="userAvatarUrl"></open-data>    //获取用户头像直接显示在小程序中

        <open-data type="userNickName"></open-data>    //获取用户昵称直接显示在小程序中

  最后就是Open-data的灵活使用方法,

        <button open-type='getUserInfo' bindgetuserinfo="onGotUserInfo"></button>

  可以在button标签中将open-data作为一个属性写入进去,这样效果就变为在点击时获取头像和昵称

  获取方法在函数中得到就好

  onGotUserInfo: function (e) {

  console.log("nickname=" + e.detail.userInfo.nickName);

  }

  

微信小程序获取用户头像 小程序如何获取头像信息


  微信小程序获取用户头像方法二:

  一、获取用户授权

  以index单页面示例,

  1.在index.js中的Page-data注册canIUse,用于调用微信开放接口申请用户授权。

  data: {

  canIUse: wx.canIUse('button.open-type.getUserInfo')

  }

  2.在index.wxml中添加“授权登录”按钮,设置open-type=“getUserInfo” 类型。

        <button wx:if="{{canIUse}}" size='mini'

        open-type="getUserInfo" 

        bindgetuserinfo="bindGetUserInfo">授权登录</button>

  3.注意:由于微信小程序与小游戏获取用户信息接口调整,从2018年4月30日开始,小程序与小游戏的体验版、开发版调用 wx.getUserInfo 接口,将无法弹出授权询问框,默认调用失败。具体要求可参考官方开发文档。

  二、获取用户头像并保存

  以index单页面示例,

  1.在index.js实现获取头像的相关函数,注意保存头像到相册需要用户授权。

  2.在index.wxml中添加“获取头像”按钮,调用获取头像的函数。

         <button id='getUserImg' size='mini' 

         type='warn' bindtap='getUserImg'>获取头像</button>

  3.登录微信公众平台,进行服务器域名设置,若不进行设置将无法访问外部服务器资源。

  (如果没有AppID的话需要注册微信公众平台账号,并创建一个自己的小程序,测试号无法设置服务器域名信息。)

  设置downloadFile合法域名为:“https://wx.qlogo.cn”即可。

  

微信小程序获取用户头像 小程序如何获取头像信息


  以上就是今天为大家带来的关于“微信小程序获取用户头像 小程序如何获取头像信息”全部内容,由于某些原因,我们经常需要获取用户的头像信息,从而让用户在使用小程序的过程中有更多的功能和体验,想要了解更多关于小程序开发的内容,欢迎关注厦门在乎科技-专注小程序、app、网站开发

即刻联系「在乎科技」专业项目经理为您提供产品咨询和项目报价!

立即咨询

CONTACT US

联系我们

联系电话:

131-6399-9993

电子邮箱:

公司地址:

厦门市思明区莲花南路6号北方大厦601单元

公司地址