<template>
<view>
<button class="cu-btn block bg-blue margin-tb-sm lg" @tap="wxGetUserInfo">一键登录</button>
<view>
<!-- 提示窗示例 -->
<u-popup :show="show" background-color="#fff">
<view class="infoBox">
<view class="title">邀请您补全个人信息</view>
<br>
<br>
<br>
<form catchsubmit="getUserName">
<view style="width: 100%;">
<view class="popup-info">
<view class="popup-info-left">头像</view>
<view class="popup-info-right">
<button class="avatar-wrapper" open-type="chooseAvatar"
@chooseavatar="onChooseAvatar" slot="right">
<img class="avater" :src="avatarUrl" alt="用户头像"></button>
</view>
</view>
<br>
<br>
<view class="popup-info">
<view class="popup-info-left">昵称</view>
<view class="popup-info-right">
<input type="nickname" class="nickName-input" @blur="userNameInput"
placeholder="请输入昵称" />
</view>
</view>
</view>
<view class="buttonSum">
<view class="button">
<button @click="dialogClose">取消</button>
</view>
<view class="button" style="border-left: 1px solid #e2e1e1;color: #0081ff;">
<button @click="submitSure" style="color: #0081ff;" form-type="submit">确定</button>
</view>
</view>
</form>
</view>
</u-popup>
</view>
<view class="text-center margin-top-sm" @tap="back">暂不登录</view>
</view>
</view>
</template>
<script>
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-WEIXIN
uni.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'),
// 临时图片转为base64
uni.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 = base64Img
uni.setStorageSync("user_info", userInfo)
}
});
}
});
},
// 点击昵称
userNameInput(e) {
console.log(e.detail);
this.nickName = e.detail.value
let userInfo = uni.getStorageSync("user_info")
userInfo.nickName = e.detail.value
uni.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
},
}
</script>
<style lang="scss" scoped>
.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;
}
</style>
</style>效果
参考的这个
微信小程序头像昵称填写能力-CSDN博客
因为之前用的getUserProfile，有一天发现它获取到的头像是灰色，昵称是微信用户，一看官网说是不用了，低版本的还能用，高版本的要用头像昵称填写来实现。
如下是我的小程序登录页面代码：
逻辑：当小程序判断到没有登陆时把用户弹到登录页面，引导用户登录，用户点击一键登录后弹出弹框引导用户填写昵称和头像，将信息存储起来，方便在其他地方使用。
注意：
1、头像获取到的是临时地址，需要处理，才能在浏览器展示，我采用的是将其转化为base64的方式，具体请看：onChooseAvatar文章来源：https://www.toymoban.com/news/detail-805127.html
2、昵称获取需要使用button的form-type="submit"属性，触发form提交来收集昵称
文章来源地址https://www.toymoban.com/news/detail-805127.html
<template>
<button class="cu-btn block bg-blue margin-tb-sm lg" @tap="wxGetUserInfo">一键登录</button>
<view>
<!-- 提示窗示例 -->
<uni-popup ref="alertDialog" background-color="#fff">
<view class="infoBox">
<view class="title">邀请您补全个人信息</view>
<br>
<br>
<br>
<form catchsubmit="getUserName">
<view style="width: 100%;">
<view class="popup-info">
<view class="popup-info-left">头像</view>
<view class="popup-info-right">
<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" slot="right">
<img class="avater" :src="avatarUrl" alt="用户头像"></button>
</view>
</view>
<br>
<br>
<view class="popup-info">
<view class="popup-info-left">昵称</view>
<view class="popup-info-right">
<input type="nickname" class="nickName-input" @blur="userNameInput" placeholder="请输入昵称" />
</view>
</view>
</view>
<view class="buttonSum">
<view class="button">
<button @click="dialogClose">取消</button>
</view>
<view class="button" style="border-left: 1px solid #e2e1e1;color: #0081ff;">
<button @click="submitSure" style="color: #0081ff;" form-type="submit">确定</button>
</view>
</view>
</form>
</view>
</uni-popup>
</view>
<view class="text-center margin-top-sm" @tap="back">暂不登录</view>
</view>
</template>
<script src="path/to/canvas/library.js"></script>
<script>
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-WEIXIN
uni.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-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
},
// 打开弹框
dialogToggle() {
this.$refs.alertDialog.open()
},
// 点击头像
async onChooseAvatar(e) {
// 获取到的图片是临时图片，只能在本地访问，不能在浏览器访问，所以要把这个图片转成base64或者上传七牛服务器换成网络地址，再存储起来
this.avatarUrl = e.detail.avatarUrl;
console.log(e.detail.avatarUrl,'e.detail.avatarUrl'),
// 临时图片转为base64
uni.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 = base64Img
uni.setStorageSync("user_info", userInfo)
}
});
}
});
},
// 点击昵称
userNameInput(e) {
console.log(e.detail);
this.nickName = e.detail.value
let userInfo = uni.getStorageSync("user_info")
userInfo.nickName = e.detail.value
uni.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() {},
}
</script>
<style lang="less" scoped>
.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;
}
</style>
</style>到了这里，关于使用的uview 微信高版本 头像昵称填写能力的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
