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

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

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

<view class="info"><van-imageroundwidth="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",desc: '您的信息将用于登录小程序',}).then(res=>{/** 更新data里的数据, avatar:头像路径, nickname:"用户名称" ,isLogin:初始值为false ,登录成功就改为true*/this.setData({avatar:res.userInfo.avatarUrl ,nickname:res.userInfo.nickName ,isLogin:true})})    }},

上面封装的方法有点麻烦, 还没写出来, 写出来后会进行更新, 这篇文章哪里还不足的话，希望路过的大神指点指点小弟。

微信小程序头像上传(一)相关推荐

微信小程序头像上传+（C#）服务端接收
第一步:样式设置(WXSS) 说明:.imagesize给view使用,.avatar给image使用.作用是把图片显示为圆形. .imagesize{display:flex; justify-co ...
Uni-app 微信小程序头像上传
uni-app 提供了很多图片处理的Api,比如 uni.chooseImage()方法,但基本都是本地.拍照上传,本地临时.持久存储,要想跟服务端交互,就需要使用上传Api uni.uploadFi ...
微信小程序头像上传(二---完结)
效果展示: (1) : "点击登录" (2) : 登录后,会显示默认的微信头像与昵称 (3) : 再次点击头像可以选择一张图片当头像,( 真实环境可以选择相册图片或拍摄一张 ...
小程序头像上传成功但是小程序码没更新
微信小程序头像上传了,但是小程序码没更新怎么处理? 如图: 小程序头像上传成功,但是小程序码没更新,是不是让你怀疑人生? 其实不用怀疑,退出登录,重新登录就行了重新登录后,就可以刷新出新的小程序码图 ...
微信小程序直接上传文件到阿里云OSS组件封装
微信小程序直接上传文件到OSS 1. 封装公共方法在根目录utils目录新建一个upload文件夹: // utils/upload/base64.jsvar base64EncodeChars = ...
上传声音微信小程序_SpringBoot开发案例之微信小程序录音上传
前言书接上回的<SpringBoot开发案例之微信小程序文件上传>,正常的业务流程是,口语测评需要学生通过前端微信小程序录入一段音频,通过调用第三方音频处理服务商进行评分,然后服务端对原 ...
微信小程序上传接口php,微信小程序API 上传、下载
微信小程序API 上传.下载 wx.uploadFile(OBJECT) 将本地资源上传到开发者服务器.如页面通过 wx.chooseImage 等接口获取到一个本地资源的临时文件路径后,可通过此接口 ...
微信小程序图片上传九宫格拖拽组件
微信小程序图片上传&九宫格拖拽组件前言图片上传加九宫格拖拽是一个比较常用的组件,常用于发帖或者评论等内容上传模块,我这篇九宫格拖拽的思路是借鉴了一款优雅的小程序拖拽排序组件实现这篇文章实 ...
微信小程序：上传的图片显示旋转问题
问题? 开发中遇到微信小程序在上传照片后,会有一定概率旋转,查阅了资料之后,发现是和图片中携带的exif信息中的orientation这个参数有关. 小程序的页面实用webview渲染的,webvie ...

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

微信小程序头像上传(一)相关推荐

最新文章

热门文章