由于微信搞事情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的,或者自己封装的,能对接访问就行
到这还不会在留言吧