现在微信小程序获取昵称头像,需要对自己的小程序服务内容进行声明,声明步骤如下:
1)登录小程序后台,点击设置
2)点击去完善
3)勾选第二项4)勾选用户信息选项,填写用途提交
声明结束后提交审核需要等待一段时间,下面是授权登录的功能代码
wxml文件代码
<view data-weui-theme="{{theme}}">
<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
<image class="avatar" src="{{avatarUrl}}"></image>
</button>
<mp-form>
<mp-cells>
<mp-cell title="昵称">
<input type="nickname" class="weui-input" placeholder="请输入昵称"/>
</mp-cell>
</mp-cells>
</mp-form>
</view>
wxss代码
.avatar-wrapper {
padding: 0;
width: 56px !important;
border-radius: 8px;
margin-top: 40px;
margin-bottom: 40px;
}
.avatar {
display: block;
width: 56px;
height: 56px;
}
.container {
display: flex;
}
js代码
const app = getApp()
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
Page({
data: {
avatarUrl: defaultAvatarUrl,
theme: wx.getSystemInfoSync().theme,
},
onLoad() {
wx.onThemeChange((result) => {
this.setData({
theme: result.theme
})
})
},
onChooseAvatar(e) {
const { avatarUrl } = e.detail
this.setData({
avatarUrl,
})
}
})
整理有个问题,微信返回的头像是临时文件,需要开发者将文件上传到自己的文件服务器做保存
js文件上传代码可以参考如下:
wx.uploadFile({
url: that.data.baseUrl + 'app/common/upload', //你的文件上传接口地址
filePath: res.tempFilePath,
name: 'file',
formData: {
'token': 'test'
},
success: (uploadFileRes) => {
let data = uploadFileRes.data
that.setData({
avatarUrl: data
})
let userInfo = {
nickName:that.data.inputValue,
avatarUrl: that.data.avatarUrl
}
that.registerUser(userInfo,that.data.openid)
return true
}
});
取到用户头像和昵称后就可以将数据存储到自己的服务器,实现登录功能了