关于微信小程序如何获取用户头像(保存到本地)新方法

给你一囗甜甜゛ 提交于 2019-12-27 16:29:16

传统接口wx.getUserInfo的效果会弹出一个给用户的弹窗,需要用户授权,但是在使用时候会有官方log提醒你,这个方法需要升级。新方法则无需用户授权,使用方法如下:

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

这样即可获取用户头像及微信名。前两天圣诞节在制作戴帽子小程序的时候需要获取当前用户头像并修改,需要将图片加载到另外一个<image>框里,但这个标签也可以选择相册里的照片,所以通过按钮来实现功能,按钮标签如下:

<button open-type="getUserInfo" data-way="avatar" bind:tap="getAvatar" >获取当前头像</button>

对应的js代码如下:

getAvatar() {
    if (app.globalData.userInfo) {
      console.log("获取成功"),
      this.setData({
        bgPic: app.globalData.userInfo.avatarUrl,
      });
      this.assignPicChoosed();
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo;
          console.log("已获取"),
          this.setData({
            userInfo: res.userInfo,
            bgPic: res.userInfo.avatarUrl
          });
          this.assignPicChoosed();
        }
      })
    }
  },
  

但是事情并没有像我们想象的那么顺利,因为你在进行到保存功能时汇给你报错。说download地址不合法。此时你需要进入小程序后台
在这里插入图片描述
在这里插入图片描述
往下翻找到服务器域名,然后将downloadfile合法域名加进去
在这里插入图片描述
结束收工

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!