微信小程序新版头像昵称上传

原创

已于 2023-08-31 14:30:34 修改 · 2.4k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序

于 2023-03-04 14:42:01 首次发布

文章讲述了在微信小程序中处理用户头像和昵称的策略，包括如何处理新旧接口（getUserInfo和getUserProfile）获取的数据差异，如何保存和判断用户头像是否为默认微信头像，以及wx.uploadFile上传本地图片到服务器的过程。同时提供了关键代码示例，展示如何实现头像昵称组件。

官方文档：小程序用户头像昵称获取规则调整公告 | 微信开放社区

头像昵称填写 | 微信开放文档

为我们小程序写了一个头像昵称上传的组件总结了下

需要注意的点：

我们后端服务器存的老用户的头像昵称有的是：之前早版本（wx.getUserInfo ）能获取到的用户真实微信头像昵称，和后面改版（wx.getUserProfile）之后获取的默认灰色头像微信用户的头像昵称所以我们做了一个判断当前用户是否有头像昵称以及是否是默认的微信用户灰色头像的判断（根据自己业务需要）；

小程序input组件获取的头像是本地的临时地址，所以要想下次进入小程序依然能取到之前上传的投下给你需要服务器来保存；

wx.uploadFile上传的图片地址是图片本地的地址（不能是服务器的http地址），api会把本地图片的地址转化成流的形式传给你所给的服务器地址

关键部分代码

<!--components/avatarNicknameModal/avatarNicknameModal.wxml-->
<view class="out-wrapper" wx:if="{
   
   {showAvaModal}}" style="top: 0px">
    <view class="inner-wrapper">
        <view class="apply-info-tit">
          <image  src="https://xxxxxxx.com/xxxx/pics/miniproStage3/ava_nicklogo.png"></image>
          <view class="text">xxxxxxxx 申请</view>
        </view>
        <view class="which-info">获取你的昵称、头像</view>
        &