微信小程序--注册时获取微信头像

参考官方文档:点击跳转

具体实现:

wxml:

html 复制代码
<button class="avatarBtn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
    <image class="avatar" :src="avatarUrl"></image>
</button>

js:

javascript 复制代码
const defaultAvatarUrl =
'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
const avatarUrl = ref(defaultAvatarUrl)
//图片路径容器
const imgInfo = reactive({
		imgs: ''
	})

// 头像上传事件
	const onChooseAvatar = (e) => {
		console.log(e);
		avatarUrl.value = e.detail.avatarUrl;
		console.log(e.detail.avatarUrl);
		uni.uploadFile({
			url: 'https://xxxx', //仅为示例,非真实的接口地址
			filePath: e.detail.avatarUrl,
			name: 'file',
			formData: {
				'user': 'test'
			},
			success: function(res) {
                   //剥离接口返回路径
				imgInfo.imgs = JSON.parse(res.data)
				console.log(imgInfo.imgs.data.url);
			}
		});
	}

之后根据注册需求适当调整即可 (〃 ̄︶ ̄)人( ̄︶ ̄〃)

相关推荐
游戏开发爱好者810 小时前
iOS App 电池消耗管理与优化 提升用户体验的完整指南
android·ios·小程序·https·uni-app·iphone·webview
_pengliang11 小时前
小程序按住说话
开发语言·javascript·小程序
万岳科技程序员小金13 小时前
多端协同的招聘系统源码开发指南:小程序+APP一体化设计
小程序·软件开发·app开发·招聘小程序·同城招聘系统源码·招聘app开发·招聘软件开发
xkxnq14 小时前
微信小程序地理定位功能
微信小程序·小程序
難釋懷14 小时前
微信小程序全局数据共享
微信小程序·小程序
郭邯14 小时前
小程序自定义组件学习笔记
微信小程序
阿眠16 小时前
vue3实现web端和小程序端个人签名
前端·小程序·apache
2501_9159184118 小时前
iOS 性能监控工具全解析 选择合适的调试方案提升 App 性能
android·ios·小程序·https·uni-app·iphone·webview
xmdoor21 小时前
微信小程序:酒店预订管理系统
微信小程序·酒店预订·酒店系统·酒店管理
sunly_1 天前
Flutter:上传图片,选择相机或相册:wechat_assets_picker
数码相机·flutter·微信