Because of the getUserProfile I used before, one day I found that the avatar it got was gray, and the nickname was a WeChat user. I looked at the official website and said that it was no longer needed. The lower version can still be used, and the higher version needs to be filled in with the avatar nickname.
The following is my applet login page code:
Logic : When the applet determines that the user is not logged in, it will pop the user to the login page and guide the user to log in. After the user clicks one-click login, a pop-up box will pop up to guide the user to fill in the nickname and avatar, and store the information for easy use in other places.
Note :
1. The obtained avatar is a temporary address, which needs to be processed before it can be displayed in the browser. I use the method of converting it to base64. For details, please see: onChooseAvatar
2. To obtain nicknames, you need to use the form-type="submit" attribute of the button to trigger form submission to collect nicknames
<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>