uniapp 微信小程序 open-type=“chooseAvatar“ 获取微信用户信息
open-type="chooseAvatar"
·
关于小程序获取微信用户信息:
1、open-type=“getUserInfo”在2021年4月13日停用
2、wx.getUserInfo 在 2021年4月28日停用
3、wx.getUserProfile 在2022年11月8日停用
以下是使用open-type=“chooseAvatar” 的uniapp写法哦:
一、获取微信头像
效果图:
html:
<button class="button" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
<image class="avatar" :src="infoObj.avatar == '' ? '@/static/images/xishi.jpg' : infoObj.avatar"></image>
</button>
js:
onChooseAvatar(e) {
const avatarUrl = e.detail.avatarUrl // 此处是头像的临时路径
// 需要后端配合,获得线上的地址
uploadFile(avatarUrl).then(res => {
console.log('上传图片成功')
const result = JSON.parse(res.data)
this.editInfoObj.avatar = 'http://' + result.data
// 调用修改头像的方法
this.editUserInfo(this.editInfoObj)
}).catch(err => {
console.log('上传图片失败', err)
})
},
因为上传文件,项目有多个使用场景,所以简单封装了,
uploadFile的封装:
import { baseURL } from '@/utils/request/env'
import { md5Libs } from '@/utils/request/md5'
/**
* 上传文件
* @param {string} filePath // 临时目录
*/
export function uploadFile(filePath) {
// 添加token
let token = uni.getStorageSync('token')
// (是封装MD5加密时的参数格式,可忽略~)
let options = {
data: {},
url: baseURL + 'public/uploadFile'
}
// 添加签名
let sign = md5Libs(options)
let optionsData = Object.assign({}, options.data)
optionsData.sign = sign
return new Promise((resolved, rejected) => {
uni.uploadFile({
url: options.url,
filePath: filePath,
name: 'file',
header: {
'content-type' : 'multipart/form-data',
'token': token
},
formData: optionsData,
success: (res) => {
if (res.statusCode == 200) {
resolved(res)
} else {
rejected(res)
}
},
fail: (err) => {
rejected(err)
}
})
})
}
二、获取微信昵称
效果图:
html:
<input type="nickname" class="input" :value="editInfoObj.nickName" @blur="bindblur"/>
js:
bindblur(e) {
this.editInfoObj.nickName = e.detail.value // 获取微信昵称
}
更多推荐
已为社区贡献1条内容
所有评论(0)