Debido al getUserProfile que usé antes, un día descubrí que el avatar que tenía era gris y el apodo era un usuario de WeChat. Miré el sitio web oficial y dije que ya no era necesario. La versión inferior todavía se puede usar. , y la versión superior debe completarse con el apodo del avatar.
El siguiente es el código de la página de inicio de sesión de mi applet:
Lógica : cuando el subprograma determina que el usuario no ha iniciado sesión, lo mostrará en la página de inicio de sesión y lo guiará para que inicie sesión. Después de que el usuario haga clic en el inicio de sesión con un clic, aparecerá un cuadro emergente para guiarlo. el usuario debe completar el apodo y el avatar, y almacenar la información para facilitar su uso en otros lugares.
Nota :
1. El avatar obtenido es una dirección temporal, que debe procesarse antes de que pueda mostrarse en el navegador. Utilizo el método de conversión a base 64. Para obtener más información, consulte: onChooseAvatar
2. Para obtener apodos, debe usar el atributo form-type="submit" del botón para activar el envío del formulario para recopilar apodos
<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>