tp6 + uniapp 微信登录获取头像和昵称

由于微信搞事情uni.getUserProfile已经作废，获取不到头像和昵称

只能上传头像和昵称到服务器再存储

 

 

不多说已经封装好了，直接复制粘贴使用，上代码

登录组件

组件名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>

需要引用的页面

<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>

全局引用登录组件，这样不用每个页面import和在scripts里写component这个引用了

main.js文件

// 微信登录
import login from '@/uni_modules/login/login.vue'
Vue.component('login', login)

tp6，php也是一样

创建一个Image_Add.php类，用于上传回调图片地址

<?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' => '操作成功']);
    }
}

最后就是这个方法接口写入数据库

注意：这个接口方法是自己封装的，可以用uniapp的vue的，或者自己封装的，能对接访问就行

 到这还不会在留言吧