À cause du getUserProfile que j'utilisais auparavant, un jour j'ai découvert que l'avatar qu'il avait était gris et que le surnom était un utilisateur de WeChat. J'ai regardé le site officiel et j'ai dit qu'il n'était plus nécessaire. La version inférieure peut toujours être utilisée , et la version supérieure doit être remplie avec le surnom de l'avatar.
Voici le code de ma page de connexion à l'applet :
Logique : lorsque l'applet détermine que l'utilisateur n'est pas connecté, il fait apparaître l'utilisateur sur la page de connexion et guide l'utilisateur pour se connecter. Une fois que l'utilisateur a cliqué sur la connexion en un clic, une boîte de dialogue apparaît pour guider à l'utilisateur de remplir le surnom et l'avatar, et de stocker les informations pour une utilisation facile à d'autres endroits.
Remarque :
1. L'avatar obtenu est une adresse temporaire, qui doit être traitée avant de pouvoir être affichée dans le navigateur. J'utilise la méthode de conversion en base64. Pour plus de détails, veuillez consulter : onChooseAvatar
2. Pour obtenir des surnoms, vous devez utiliser l'attribut form-type="submit" du bouton pour déclencher la soumission du formulaire afin de collecter les surnoms
<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>