Due to WeChat's troubles, uni.getUserProfile has been invalidated, and the avatar and nickname cannot be obtained
You can only upload avatars and nicknames to the server for storage
Not much to say, it has been packaged, just copy and paste it directly, and upload the code
login component
Component name login.vue
<template>
<view>
<u-popup mode="bottom" :show="getnickshow" @close="getnickshow = false" round='16rpx'>
<view class="getnickbox">
<view class="flex_spacebetween">
<image :src="project.logo" class="logoimg" mode="aspectFit"></image>
<view class="name">
{
{project.name}}
<text>申请</text>
</view>
</view>
<view class="m1 mt30">获取你的头像、昵称</view>
<view class="m2">展示个人信息</view>
<view class="xin1">
<button type="default" class="flex_spacebetween buttoncss" open-type="chooseAvatar"
@chooseavatar="chooseavatar">
<view class="flex_spacebetween toubox">
<view class="t1">头像</view>
<view v-if="avatarUrl == ''" class="avatarbox">
<u-icon name="account-fill" size="50" color="#999"></u-icon>
</view>
<image v-else :src="avatarUrl" class="avatarimg"></image>
</view>
<u-icon name="arrow-right" size="25" color="#999"></u-icon>
</button>
</view>
<view class="nick">
<view class="n1">昵称:</view>
<input type="nickname" v-model="nickName" placeholder="请输入昵称">
</view>
<view class="fixedBtn wan">
<button size="mini" open-type="getUserInfo" @click="getUserInfo" :plain='true'>完成</button>
</view>
</view>
</u-popup>
</view>
</template>
<script>
export default {
props: {
logins: {}
},
data() {
return {
getnickshow: false,
project: {
name: '*****科技',//应用名称
logo: ''//log
},
avatarUrl:'',
nickName:''
}
},
//监控父组件传过来的值
watch: {
logins(curVal, oldVal) {
this.getnickshow = true
}
},
methods: {
// 选择用户头像， 重点， 得调用下上传图片接口
chooseavatar(e) {
uni.uploadFile({
url: '',//图片上传的地址
filePath: e.detail.avatarUrl,
name: 'file',
//如果想带参数
// formData: {
// 'openid':'123456abc'
// },
//如果有请求头，比如token
// header: {
// Authorization: uni.getStorageSync("token")
// },
success: req => {
let img = JSON.parse(req.data);//回调
this.avatarUrl = img.imgData
},
fail: (err) =>{
console.log('出错了',err)
}
});
},
async getUserInfo() {
let that = this;
if (that.avatarUrl == "") {
uni.showToast({
title: '请选择头像',
icon: 'none'
})
return
}
// 坑，，，点击昵称后，开发者工具上 一直提示 昵称是空，但是 真机上 是正常的
if (that.nickName == "") {
uni.showToast({
title: '请编辑昵称',
icon: 'none'
})
return
}
that.wxlogin();
},
//登录
wxlogin() {
//let _this = this;
//这是我自己封装的请求，可以用自己的
//_this.$http.http("POST", "/index/login/logins", {
// 'openid':uni.getStorageSync('openid'),
// 'nickName': _this.nickName,
'avatarUrl': _this.avatarUrl,
//}).then(req => {
// if (req.data.code == 200) {
// uni.setStorageSync('user', req.data.data); //存缓存,不然会一直提示要登录
// this.getnickshow = false
// } else {
// console.log('出错了')
// }
//})
}
}
}
</script>
<style lang="scss">
.getnickbox {
padding: 40rpx 20rpx;
.logoimg {
width: 50rpx;
height: 50rpx;
}
.name {
margin-left: 20rpx;
text {
margin-left: 10rpx;
}
}
.m1 {
font-weight: 500;
}
.m2 {
padding-bottom: 30rpx;
border-bottom: 1rpx solid #f2f2f2;
color: #999;
padding-top: 10rpx;
font-size: 24rpx;
}
.xin1 {
border-bottom: 1rpx solid #f2f2f2;
margin-bottom: 30rpx;
.toubox {
padding: 10rpx 0;
.t1 {
font-size: 28rpx;
margin-right: 30rpx;
}
.avatarbox {
width: 200rpx;
height: 100rpx;
border-radius: 20rpx;
}
.avatarimg {
width: 100rpx;
height: 100rpx;
border-radius: 20rpx;
margin-right: 100rpx;
}
}
}
.flex_spacebetween {
display: flex;
}
.buttoncss {
background-color: #fff;
border-radius: 0px;
border: 0rpx solid transparent;
}
button::after {
border: 0px solid rgba(0, 0, 0, .2);
}
.nick {
padding-bottom: 30rpx;
border-bottom: 2rpx solid #f2f2f2;
display: flex;
align-items: center;
padding-left: 14px;
padding-right: 14px;
.n1 {
font-size: 28rpx;
margin-right: 30rpx;
}
}
.wan {
// position: relative;
height: 100rpx;
box-shadow: 0rpx 0rpx 0rpx 0rpx;
margin-top: 30rpx;
}
.mt30 {
margin-top: 30rpx;
}
}
</style>Pages that need to be cited
<template>
<view @click="payment">
....这里写你的代码
//比如点击购买时才判断是否登入,因为这是小程序的规则
</view>
<view>
<login :logins="logins"></login>
</view>
</template>
<script>
export default {
data() {
return {
logins:false
}
},
methods: {
//
payment(){
let login = this.login();
if (login == true) {
console.log('用户已登录')
}else {
uni.showToast({
title: '请先授权登录',
icon: 'none',
duration: 2000
})
}
}
//登录
login() {
let user = uni.getStorageSync('user'); //读缓存
if (user.openid == "" || user == '' || user == null) {
this.logins = !this.logins
return false;
} else {
return true;
}
}
}
}
</script>The login component is referenced globally, so that there is no need to import and write component references in scripts for each page
main.js file
// 微信登录
import login from '@/uni_modules/login/login.vue'
Vue.component('login', login)tp6, php is the same
Create an Image_Add.php class for uploading the callback image address
<?php
namespace app\controller\Index;
use app\BaseController;
class Image_Add extends BaseController
{
public function user_add_image()
{
$file = request()->file('file');
// $openid = $_POST["openid"];//接收参数
$savename = \think\facade\Filesystem::disk('public')->putFile('avatarUrl', $file);
$imgData = 'https://****.****.com/storage/' .$savename;
return json(['code' => 200, 'imgData'=>$imgData,'message' => '操作成功']);
}
}Finally, this method interface is written to the database
Note: This interface method is self-encapsulated, you can use uniapp's vue, or self-encapsulated, it can be accessed through docking
I won't leave a message until now.