微信小程序获取头像

微信小程序获取头像的问题

微信小程序获取用户权限被收回（需要使用头像昵称填写）

当小程序需要让用户完善个人资料时，可以通过微信提供的头像昵称填写能力快速完善。

根据相关法律法规，为确保信息安全，由用户上传的图片、昵称等信息微信侧将进行安全检测，组件从基础库2.24.4版本起，已接入内容安全服务端接口（mediaCheckAsync、msgSecCheck），以减少内容安全风险对开发者的影响。

在开发者工具上，input 组件是用 web 组件模拟的，因此部分情况下并不能很好的还原真机的表现，建议开发者在使用到原生组件时尽量在真机上进行调试

1.chooseAvatar 获取头像报错？

报错内容为:

chooseAvatar:fail Cannot read property 'initScl' of undefined(env: Windows,mp,1.06.2209190; lib: 2.29.2)

此为微信开发者工具基础库 的问题

将调式基础库设置为2.30.2 即可

 

2.button组件chooseAvatar获取微信头像时，从相册选取图片后报错？

底部下拉框中国呢选择从相册选取照片，照片过大或者使用webp的图片，会直接报错

并且微信官方并没有给对应的回调,同时没有触发onChooseAvatar 事件

图片最终会上传至微信官方,会用于鉴😶?或者其他功能,如果想要在微信小程序中使用获取微信头像功能,就不得不遵守他的规矩了

最终会获取到一个由官方处理好的头像地址,通过uni.uploadFile 进行处理,或者转换为base64进行处理

<template>
	<view style="padding: 100upx 50upx;">
		<view class="avatarBox">
			<button style="background: transparent;" class="avatarBox" open-type="chooseAvatar"
				@chooseavatar="onChooseAvatar">
				<image mode="aspectFill" class="avatar" :src="avatarUrl"></image>
			</button>
		</view>
		<view class="nameBox">
			<view class="namePrev">昵称</view> <input type="nickname" class="weui-input" v-model="name"
				placeholder="请输入昵称" />
		</view>
		<view class="btnBox"><tui-button class="login-btn" type="primary" @click="confrim"> 确定 </tui-button></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 用户头像
				avatarUrl: require('../../static/images/public/logo2.png'),
				// 用户姓名
				name: '',
				serverUrl: this.Weliam.apiServer() + '/images/upload',
				
			}
		},
		methods: {
			// 上传图片,拿到url后 存入数据库
			uploadImage: function(url) {
				console.log(url);
				let _this = this;
					uni.uploadFile({
						url: this.serverUrl,
						name: "file",
						header: {},
						formData: {
							// 这里按需求填
							school_id: _this.Weliam.getSchoolId()
						},
						filePath: url,
						success: function(res) {
							console.log(res);
								_this.avatarUrl = JSON.parse(res.data).url
								console.log(_this.avatarUrl);
						},
						fail: function(res) {	
							console.log(res);
							uni.showToast({
								title: '图片上传失败!',
								icon: 'error',
								duration: 1000
							})
						}
					})
			},

			// 点击确定弹窗
			confrim() {
				uni.showModal({
					title: '确定弹窗',
					content: '确定修改个人资料？',
					success: (res) => {
						if (res.confirm) {
							let data = {}

							// 业务

						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},
			async onChooseAvatar(e) {
				const {
					avatarUrl
				} = e.detail
				// console.log(e);
				// this.avatarUrl = avatarUrl	
				this.uploadImage(avatarUrl)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btnBox {
		position: absolute;
		width: 80%;
		bottom: 100upx;
		left: 50%;
		transform: translateX(-50%);
	}

	.login-btn {}

	.avatarBox {
		width: 150upx;
		height: 150upx;
		display: flex;
		margin: 0upx auto;
		margin-bottom: 100upx;

		button {
			padding: 0;
		}

		image {
			width: 100%;
			height: 100%;
		}
	}

	.nameBox {
		display: flex;
		font-size: 32upx;
		align-items: center;
		border-top: 1px solid #eee;
		border-bottom: 1px solid #eee;
		padding: 18upx 0;
		width: 100%;

		.namePrev {
			font-size: 34upx;
			font-weight: 600;
			margin-right: 100upx;
		}
	}
</style>