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

参考官方文档:点击跳转

具体实现:

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);
			}
		});
	}

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

相关推荐
小羊Yveesss13 小时前
2026年微信小程序搭建一般需要多长时间?不同方案周期和延期点
微信小程序·小程序
禾高网络16 小时前
互联网医院|AI 互联网医院成品开发系统
java·大数据·人工智能·小程序
小羊Yveesss17 小时前
2026年微信小程序搭建算什么费用?年费、设计费、开发费和维护费
微信小程序·小程序
2501_915918411 天前
PerfDog 太贵?iOS 性能监控工具的功能对比与选择
android·ios·小程序·https·uni-app·iphone·webview
2601_963016261 天前
统一消息与事件调用:如何用微信接口把微信自动化做成稳健中台?
大数据·运维·人工智能·微信·自动化
码农客栈1 天前
小程序学习(二十六)之“订单详情”
小程序
weixin_440058311 天前
2026知识付费小程序:年费全包零抽成,录播题库全功能覆盖
小程序·apache·小程序开发
小羊Yveesss2 天前
2026年微信小程序后端怎么搭建?后台、数据、接口和运维怎么选
运维·微信小程序·小程序
小皮虾2 天前
小程序首页性能优化实战:从 4 秒到 1.8 秒
前端·微信小程序
HackTwoHub2 天前
ARL灯塔重构版:支持APP/小程序/WEB资产同步扫描
人工智能·安全·web安全·网络安全·小程序·重构·自动化