微信小程序头像上传(一)

最新推荐文章于 2024-06-04 13:41:33 发布

ZNYSBX

最新推荐文章于 2024-06-04 13:41:33 发布

阅读量2.3k

点赞数

文章标签：微信小程序小程序前端

本文链接：https://blog.csdn.net/ZNYSBX/article/details/126473392

版权

本文详细记录了在微信小程序中实现头像上传的步骤，包括WXML代码和使用 vant 组件库。虽然JS核心代码尚未完全展示，作者承诺后续会进行更新，并期待读者的建议和指导。

摘要由CSDN通过智能技术生成

记录一下自己实现微信小程序头像上传的过程.

wxml部分( 用了vant组件库 ):

<view class="info">
    <van-image
        round
        width="5rem"
        height="5rem"
        src="{
  {avatar}}" 
        bindtap="tapAvatar"/>
    <text>{
  {nickname}}</text>
</view>

效果图:

js核心代码:

 /** 点击头像后执行的操作 */
  tapAvatar(){
    if(this.data.isLogin){   //已登录, 执行选择图片更换头像
        //封装了 changeAvatar 方法用于更换头像
        this.changeAvatar();

    }else{      //未登录, 则执行登录
        wx.getUserProfile({
            lang:"zh_CN",