行业知识
微信小程序获取头像
2026-10-25 11:08:43
来源:互联网转载
微信小程序获取头像的问题
微信小程序获取用户权限被收回(需要使用头像昵称填写)
当小���序需要让用户完善个人资料时,可以通过微信提供的头像昵称填写能力快速完善。
根据相关法律法规,为确保信息安全,由用户上传的图片、昵称等信息微信侧将进行安全检测,组件从基础库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进行处理
昵称 确定 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).urlconsole.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 = avatarUrlthis.uploadImage(avatarUrl)}}}.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;}}