背景
微信官方发布小程序用户头像昵称获取规则调整公告，要禁止小程序自动获取用户名和昵称，所以大家都是微信用户和空白小人头像了，这是闹哪样，既然这也限制那也限制，索性关闭小程序好了，啥都获取不到，岂不是更安全......毕竟还要吃人家的饭，人在屋檐下不得不低头呐！
目前的情况是用户登录的时候获取不到了，需要我们自定义一个账号设置的页面去让用户自己设置头像和昵称。
效果图
先上效果图，有图人信服
功能解析
1.设置用户昵称
微信这块还算是有良心，用input组件就可以获取微信用户昵称，需要增加一个type="nickname"，看到键盘上微信昵称了吧(#^.^#)，就还好，不过用的微信名带特殊符号或者小图标的，直接保存会报错的，所以需要判断过滤下（代码里也有哦~）。
<input class="input-name" type="nickname" maxlength="16" minlength="2" v-model="nickName"
@input="inputWord" placeholder="请输入昵称" />
2.设置头像
用一个button组件就好，添加open-type="chooseAvatar" @chooseavatar="onChooseAvatar"这两个属性和方法，点击按钮就可以自动获取微信头像或者拍照、相册选择啦，选择完后调用下图片上传接口，把头像图片保存到自己服务器上就好了。
<button class="my_txImg1" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" plain="true">
<image class="my_txImg" :src="avatarUrl"></image>
</button>
3.信息保存
昵称和头像设置完后，肯定是需要调用后台接口更新下用户信息的，这样下次再来就可以看到啦
代码如下
良心博主有代码，cv大法省时省力超级赞！
<template>
<view class="body">
<view class="body-top">
<view class="item">
<text>
账号名称
</text>
<view class="item-name">
<input class="input-name" type="nickname" maxlength="16" minlength="2" v-model="nickName"
@input="inputWord" placeholder="请输入昵称" />
<image class="my_back" src="./static/back.png"></image>
</view>
</view>
<view class="divider"></view>
<view class="item">
<text>
头像设置
</text>
<view class="item-xq">
<button class="my_txImg1" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" plain="true">
<image class="my_txImg" :src="avatarUrl"></image>
</button>
<image class="my_back" src="./static/back.png"></image>
</view>
</view>
</view>
<view class="exit" v-if="userInfo != ''" @click="exit">
退出登录
</view>
</view>
</template>
<script>
export default {
data() {
return {
BASE_URL: getApp().globalData.BASE_URL,
userInfo: uni.getStorageSync("userInfo"),
nickName: uni.getStorageSync("userInfo").nickName,
avatarUrl: uni.getStorageSync("userInfo").avatarUrl,
};
},
methods: {
// 清除登录
exit() {
uni.showModal({
title: "提示",
content: "确定要退出登录吗？",
cancelText: "取消",
confirmText: "确定",
success: (res) => {
if (res.confirm) {
uni.clearStorageSync();
uni.reLaunch({
url: "../index/index",
});
}
},
});
},
onChooseAvatar(e) {
this.avatarUrl = e.detail.avatarUrl
console.log('e.detail', e.detail)
this.userInfo.avatarUrl = this.avatarUrl
uni.setStorageSync('userInfo', this.userInfo)
this.uploadFile();
},
inputWord(e) {
this.nickName = e.detail.value
console.log('nickName',this.nickName,this.nickName.length)
let str = this.nickName.trim();
if(str.length==0){
uni.showToast({
title: '请输入合法的昵称',
duration: 2000,
icon:"none",
mask: true,
});
return
}
if((/[^/a-zA-Z0-9\u4E00-\u9FA5]/g).test(str)){
uni.showToast({
title: '请输入中英文和数字',
duration: 2000,
icon:"none",
mask: true,
});
return
}
setTimeout(() => {
if(this.nickName == e.detail.value){
console.log('this.nickName',this.nickName.trim())
this.userInfo.nickName = this.nickName.trim()
uni.showModal({
title: "提示",
content: "确定修改昵称为:"+this.nickName+"?",
cancelText: "取消",
confirmText: "确定",
success: (res) => {
if(res.confirm){
this.updateUserInfo()
}
},
});
}
}, 2000)
},
/* 上传 头像 转 话格式*/
uploadFile(){
console.log('上传图片',this.avatarUrl)
uni.uploadFile({
url: this.BASE_URL + '/put-file', //服务器地址
filePath: this.avatarUrl, //这个就是我们上面拍照返回或者先中照片返回的数组
name: 'file',
formData: {
'user': 'test'
},
header: {
'Authorization': 'Basic d2VjaGF0OndlY2hhdF9zZWNyZXQ',
'Blade-Auth': 'bearer ' + uni.getStorageSync('token')
},
success: (uploadFileRes) => {
let json = JSON.parse(uploadFileRes.data)
console.log('json',json)
this.avatarUrl = json.data.link
this.userInfo.avatarUrl = this.avatarUrl
uni.setStorageSync('userInfo', this.userInfo)
this.updateUserInfo();
setTimeout(function() {
uni.hideLoading();
}, 1000);
},
fail: e => {
uni.showToast({
title: '上传失败',
duration: 2000,
icon:"error",
mask: true,
});
}
});
},
updateUserInfo(){
// uni.showLoading({});
console.log( this.avatarUrl,this.nickName.trim())
uni.request({
url: this.BASE_URL + "/wechatuser/update",
method: "POST",
data: this.userInfo,
header: {
Authorization: "Basic d2VjaGF0OndlY2hhdF9zZWNyZXQ",
"Blade-Auth": "bearer " + uni.getStorageSync("token"),
},
success(res) {
uni.showToast({
title: '修改成功',
duration: 2000,
mask: true,
});
}
})
},
}
}
</script>
<style lang="scss">
button[plain] {
border: 0
}
.body-top{
margin: 20rpx 20rpx 0rpx 20rpx;
background-color: #FFF;
border-radius: 20rpx;
padding-bottom: 20rpx;
display: flex;
flex-direction: column;
}
.item{
margin: 20rpx 20rpx 20rpx 20rpx;
min-height: 70rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
font-size: 28rpx;
}
.item-name{
min-height: 70rpx;
display: flex;
flex-direction: row;
align-items: center;
font-size: 28rpx;
text-align: end;
}
.input-name{
margin-right: 10rpx;
text-align: end;
}
.item-xq{
display: flex;
flex-direction: row;
align-items: center;
}
.my_txImg1{
height: 140rpx;
background-color: #FFF;
// border-radius: 50%;
}
.my_txImg{
width: 140rpx;
height: 140rpx;
border-radius: 50%;
}
.my_back {
width: 19rpx;
height: 24rpx;
}
.divider{
background: #E0E3DA;
width: 95%;
height: 2rpx;
margin-left: 20rpx;
}
.exit {
width: 590rpx;
height: 80rpx;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
// border: 1rpx rgba($color: #000000, $alpha: 0.1) solid;
background-color: #FA5F4A;
position: absolute;
color: #fff;
border-radius: 20rpx;
// box-shadow: 0rpx 0rpx 9rpx rgba($color: #000000, $alpha: 0.1);
bottom: 100rpx;
margin-left: 80rpx;
}
</style>
好了，本次技术分享就到这里啦，完结，撒花✿✿ヽ(°▽°)ノ✿
