用户头像昵称获取规则已调整
以前使用 wx.getUserInfo(Object object)
现在使用微信昵称手机号填写能力授权 填充用户头像与电话号码
头像:通过button 组件
open-type
的值设置为chooseAvatar
然后onChooseAvatar回调实现头像获取
昵称:通过 input 组件
type
的值设置为nickname
然后onBlur回调获取名称
获取微信头像上传填充到头像框
如果将 button 组件
open-type
的值设置为chooseAvatar
,那么当用户点击这个 button 按钮时,会弹出一个对话框,让用户选择授权你的小程序访问他们的微信头像;不管是授权微信头像还是拍照自行选择本地图片 确定选择需要使用的头像之后,
会通过
bindchooseavatar
事件回调获取到头像信息的临时路径。(微信头像或本地图片的临时路径不可直接存链接到后端会失效,我们通过解析图片上传到oss获取永久地址 然后将地址存储到开发服务器)
<Button className='avatar' type='primary' openType='chooseAvatar' onChooseAvatar={this.onChooseAvatar}> </Button>
onChooseAvatar = async (e) => { const { avatarUrl } = e.detail; // avatarUrl 是微信头像的临时地址 // 临时图片地址随时会失效 需要通过自己业务将图片存储到自己的服务器 // 以下是根据自身业务逻辑 上传微信头像的到自己的oss中 const app = 'v1'; let size = 0; // 解析图片 上传图片拿到 自己的永久图片地址 Taro.getFileSystemManager().getFileInfo({ filePath: avatarUrl, success: async (fileInfo) => { size = fileInfo.size; // 自定义封装的上传函数 UploadUtil.uploadObject2OSS({ path: avatarUrl, size: size }, app) .then((res) => { // 得到上传后的图片地址 if (res) { // 保存oss图片地址 存储到后端服务器 后端只需要存储图片地址 } else { //上传失败 } }) .catch((e) => { //上传失败 }); }, fail(err) { console.error('读取图片信息失败:', err); }, }); };
获取微信昵称填充到名称输入框
昵称相对获取头像更加轻松
需要将 input 组件
type
的值设置为nickname
,当用户在此input进行输入时,键盘上方会展示微信昵称<Input type='nickname' value={informationForm.nickName} className='weui-input' placeholder='请输入昵称' onBlur={(e) => this.onFormChange(e, 'nickName')} /> onFormChange = (e, type) => { const { value } = e.detail; // value 获取到键盘输入的内容 如果是授权那就是 用户微信名称 // 使用变量存储下来 比如我使用的informationForm.nickName };