微信小程序登录——头像

rzh554

已于 2024-04-13 14:41:53 修改

阅读量2.2k

点赞数 35

分类专栏：微信小程序文章标签：微信小程序小程序腾讯云安全 icloud

于 2024-03-31 22:04:32 首次发布

本文链接：https://blog.csdn.net/rzh554/article/details/137201897

版权

微信小程序专栏收录该内容

11 篇文章 0 订阅

订阅专栏

使用工具：微信开发者工具，后台用的是腾讯云

本文主要记录使用微信开发者工具写登录页面的头像上传和头像实时更新的js代码，主要讲述本人再使用相关组件遇到的一些问题和解决方法。

由于微信开发者工具提供的原生组件的更新换代，原有的小程序进入一键获取昵称和头像的功能被回收，目前只能由自己自定义封装一个登录组件。

根据微信开放文档的描述，如下图所示：

原有的获取用户头像使用的组件wx.getUserProfile(Object object)已经停用，将头像和昵称分为两个组件进行获取，分别是button组件和input组件，本篇只围绕button讲述登录的头像问题。

button组件的获取头像

根据官方文档的button组件描述可知：

在wxml文件中使用button组件时，填入该属性便可以使其拥有获取头像的功能：

<button open-type="chooseAvatar"></button>

头像上传逻辑思维

本人使用的思维是先从用户端媒体存储获取图片，将图片临时存储起来成为临时头像，如何通过临时头像转换为http格式的网络图片，最后将该格式图片上传至后台数据库中存储

临时存储文件夹

由于本人使用的是腾讯云，所以该案例只能给和我一样使用腾讯云的来做参考：

先进入云开发

然后开始在存储模块中的存储管理中新建文件夹，

实现获取用户头像代码

废话不多说，直接上代码解析：

1.先在index.wxml文件中这样写：

<button open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar" style=" background-image:url({{avatarUrl}}) ;width: 250rpx;height: 250rpx;border: 10rpx solid red;"></button>

然后在对应的index.js中的data中添加默认的头像图片：

data: {
    avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
  },

现在模拟器中应该长这样:

2.现在开始编写onChooseAvatar方法

  onChooseAvatar(e) {
    let that = this
    var aa = e.detail.avatarUrl
    wx.cloud.uploadFile({
      cloudPath:'toux/'+app.globalData.openId+'.png',
      filePath: aa,
      success: res => { 
        wx.cloud.getTempFileURL({
          fileList: [res.fileID], 
          success: ress => {
            that.setData({
              avatarUrl: ress.fileList[0].tempFileURL+'?t='+new Date().getTime()
            }, () => {
              console.log('获取到http格式的文件', this.data.avatarUrl)
             

            })
          },
          fail: console.error
        })

      },
      fail: err => {
        console.log("上传云存储失败", err)
      }
    })

  },

解释以下这些代码具体表示什么意思：

3.编写完成测试一下

点击灰度头像，弹出获取头像来源：微信头像、相册和拍照，这里我自己选择我自己的头像演示

获取头像成功如下：

实现获取头像可能出现的问题

1.使用bind:chooseavatar="onChooseAvatar"该属性后，可以确保js文件将onChooseAvatar的方法完善后，出现点击不响应，onChooseAvatar方法无法获取用户的点击事件

原因是：调试基础库版本过低（例如：2.14.1），只要将调试库基础库版本调高后，多次关闭打开（使该软件可以更好适应基础库，别问为什么，不知道，啊哈哈哈哈哈）该项目就可以解决这问题：

界面右上角点击详情

更换调试基础库如下;;

问题完美解决

2.在获取用户头像，特别是”从相册选择“，出现一直转圈加载，加载慢（没办法解决，因为这个加载的时间是将用户的图片先传到腾某服务器里面检测头像是否违规），或者加载失败（网络问题），这些问题是无法解决的，硬伤，所以也就是为什么现在微信小程序为什么没有强制用户登录一定要头像的原因（直接给用户一个统一的默认头像），但是都保留了用户可以自主通过该组件进行更换自己喜欢的头像