使用的uview 微信高版本 头像昵称填写能力

一键登录邀请您补全个人信息


头像

昵称取消确定暂不登录import avatarUrl from "@/static/logo.png"export default {data() {return {avatarUrl: avatarUrl,nickName: '',token: '',imgList: [],show: false,}},methods: {back() {uni.navigateBack({delta: 1,})},wxGetUserInfo(e) {// 1、授权必须要在用户点击事件之后进行// 2、uni老的方法getUserInfo已经拿不到用户信息了// uni.getUserProfile高版本的也停用了，2.21以下的版本还可以用// #ifdef MP-WEIXINuni.getUserProfile({desc: 'get_name', // 这个参数是必须的success: user => {console.log('用户信息', user)uni.setStorageSync("user_info", user.userInfo)//由于低版本需要使用getUserProfile方法，高版本使用头像昵称填写功能，所以先使用getUserProfile，如果得到的nickName是微信用户，则说明获取失败，再使用头像昵称填写功能获取if (user.userInfo.nickName == '微信用户') {this.show = true} else {uni.navigateBack({delta: 1})}}})// #endif// #ifdef MP-ALIPAY// uni.getUserInfo({// desc: 'get_name', // 这个参数是必须的// success: user => {// console.log(user)// uni.setStorageSync("user_info", user.userInfo)// // 虚假的openid// getApp().globalData.openId = user.ariverRpcTraceId;// uni.navigateBack({// delta: 1// })// }// })// #endif},// 点击头像async onChooseAvatar(e) {// 获取到的图片是临时图片，只能在本地访问，不能在浏览器访问，所以要把这个图片转成base64或者上传七牛服务器换成网络地址，再存储起来this.avatarUrl = e.detail.avatarUrl;console.log(e.detail.avatarUrl, 'e.detail.avatarUrl'),// 临时图片转为base64uni.getImageInfo({src: this.avatarUrl,success: function(res) {// 获取到图片的临时地址var tempFilePath = res.path;// 将图片转为base64格式uni.getFileSystemManager().readFile({filePath: tempFilePath,encoding: 'base64',success: function(res) {var base64Img = 'data:image/png;base64,' + res.data;let userInfo = uni.getStorageSync("user_info")userInfo.avatarUrl = base64Imguni.setStorageSync("user_info", userInfo)}});}});},// 点击昵称userNameInput(e) {console.log(e.detail);this.nickName = e.detail.valuelet userInfo = uni.getStorageSync("user_info")userInfo.nickName = e.detail.valueuni.setStorageSync("user_info", userInfo)console.log('点昵称', this.nickName, e.detail.value, uni.getStorageSync("user_info"));},getUserName(e) {console.log('提交getUserName', e);},submitSure(e) {console.log('确定submitSure', e);},dialogClose(e) {console.log('dialogClose取消', e);this.show = false}},onLoad() {// this.show = true},}.cu-btn {margin-top: 20px;margin-left: 20px;margin-right: 20px;}.infoBox {width: 80vw;height: 180px;position: relative;.title {font-size: 18px;text-align: center;margin-top: 15px;margin-bottom: 15px;font-weight: 500;}.popup-info {width: 100%;height: 40px;display: flex;justify-content: space-around;line-height: 40px;.popup-info-left {text-align: center;width: 50%;}.popup-info-right {width: 50%;display: flex;align-items: center;justify-content: center;button::after {border: none;}.nickName-input {display: inline-block;width: 100%;top: -5px;}.avatar-wrapper {border: none !important;width: 40px;height: 40px;padding: 0 !important;background: none;.avater {width: 40px;height: 40px;}}}}.buttonSum {width: 100%;display: flex;justify-content: space-around;position: absolute;bottom: 0;.button {width: 50%;border-top: 1px solid #e2e1e1;}button {width: 50%;background-color: #ffffff;font-size: 16px;outline: none;}button::after {border: none;border-radius: 0;}}}.u-popup__wrapper {border-radius: 10px;}

效果

参考的这个

微信小程序头像昵称填写能力-CSDN博客

因为之前用的getUserProfile，有一天发现它获取到的头像是灰色，昵称是微信用户，一看官网说是不用了，低版本的还能用，高版本的要用头像昵称填写来实现。

如下是我的小程序登录页面代码：

逻辑：当小程序判断到没有登陆时把用户弹到登录页面，引导用户登录，用户点击一键登录后弹出弹框引导用户填写昵称和头像，将信息存储起来，方便在其他地方使用。

注意：

1、头像获取到的是临时地址，需要处理，才能在浏览器展示，我采用的是将其转化为base64的方式，具体请看：onChooseAvatar

2、昵称获取需要使用button的form-type=”submit”属性，触发form提交来收集昵称

 一键登录邀请您补全个人信息


头像

昵称  取消确定  暂不登录 import qiniuUploader from '../../util/qiniuUploader.js'import {RequestConstant} from '../../util/constant.js'export default {data() {return {avatarUrl: '../../static/icon-avatar.png',nickName: '',token: '',imgList: []}},methods: {back() {uni.navigateBack({delta: 1,})},wxGetUserInfo(e) {// 1、授权必须要在用户点击事件之后进行// 2、uni老的方法getUserInfo已经拿不到用户信息了// uni.getUserProfile高版本的也停用了，2.21以下的版本还可以用// #ifdef MP-WEIXINuni.getUserProfile({desc: 'get_name', // 这个参数是必须的success: user => {console.log('用户信息', user)uni.setStorageSync("user_info", user.userInfo)//由于低版本需要使用getUserProfile方法，高版本使用头像昵称填写功能，所以先使用getUserProfile，如果得到的nickName是微信用户，则说明获取失败，再使用头像昵称填写功能获取if (user.userInfo.nickName == '微信用户') {this.$refs.alertDialog.open()} else {uni.navigateBack({delta: 1})}}})// #endif// #ifdef MP-ALIPAYuni.getUserInfo({desc: 'get_name', // 这个参数是必须的success: user => {console.log(user)uni.setStorageSync("user_info", user.userInfo)// 虚假的openidgetApp().globalData.openId = user.ariverRpcTraceId;uni.navigateBack({delta: 1})}})// #endif},// 打开弹框dialogToggle() {this.$refs.alertDialog.open()},// 点击头像async onChooseAvatar(e) {// 获取到的图片是临时图片，只能在本地访问，不能在浏览器访问，所以要把这个图片转成base64或者上传七牛服务器换成网络地址，再存储起来this.avatarUrl = e.detail.avatarUrl;console.log(e.detail.avatarUrl,'e.detail.avatarUrl'),// 临时图片转为base64uni.getImageInfo({src: this.avatarUrl,success: function(res) {// 获取到图片的临时地址var tempFilePath = res.path;// 将图片转为base64格式uni.getFileSystemManager().readFile({filePath: tempFilePath,encoding: 'base64',success: function(res) {var base64Img = 'data:image/png;base64,' + res.data;let userInfo = uni.getStorageSync("user_info")userInfo.avatarUrl = base64Imguni.setStorageSync("user_info", userInfo)}});}});},// 点击昵称userNameInput(e) {console.log(e.detail);this.nickName = e.detail.valuelet userInfo = uni.getStorageSync("user_info")userInfo.nickName = e.detail.valueuni.setStorageSync("user_info", userInfo)console.log('点昵称', this.nickName, e.detail.value, uni.getStorageSync("user_info"));},getUserName(e) {console.log('提交getUserName', e);},submitSure(e) {console.log('确定submitSure', e);uni.navigateBack({delta: 1})},dialogClose(e) {console.log('dialogClose取消', e);this.$refs.alertDialog.close()}},onLoad() {},} .cu-btn {margin-top: 20px;margin-left: 20px;margin-right: 20px;} .infoBox {width: 80vw;height: 180px;position: relative;.title {font-size: 18px;text-align: center;margin-top: 15px;margin-bottom: 15px;font-weight: 500;} .popup-info {width: 100%;height: 40px;display: flex;justify-content: space-around;line-height: 40px; .popup-info-left {text-align: center;width: 50%;} .popup-info-right {width: 50%;display: flex;align-items: center;justify-content: center; button::after {border: none;}.nickName-input {display: inline-block;width: 100%;top: -5px;} .avatar-wrapper {border: none !important;width: 40px;height: 40px;padding: 0 !important;background: none; .avater {width: 40px;height: 40px;}}}} .buttonSum {width: 100%;display: flex;justify-content: space-around;position: absolute;bottom: 0; .button {width: 50%;border-top: 1px solid #e2e1e1;} button {width: 50%;background-color: #ffffff;font-size: 16px;outline: none;} button::after {border: none;border-radius: 0;}}} .uni-popup__wrapper {border-radius: 10px;}