使用 UniApp 实现小程序的微信登录功能

2023-07-23 07:15:04 70

1.微信登录思路：

在main.js中封装公共函数，用于判断用户是否登录
在main.js中分定义全局变量，用于存储接口地址
如果没有登录、则跳转至登录页面
进入登录页面
通过wx.login获取用户的code
通过code获取用户的SessionKey、OpenId等信息【本应后台接口、但是此处使用js发送请求】
通过openId调用后台Api获取用户的信息
获取成功，则说明已经授权过了,直接登录成功
获取失败，则说明没有授权过，需要授权之后才能进行登录
用户点击页面微信登录按钮【】
获取用户数据，然后调用后台接口写入数据库

2.在applets/main.js中添加如下

//封装全局登录函数
//backpage,backtype2个参数分别代表：
//backpage:登录后返回的页面
//backtype:打开页面的类型[1:redirectTo2:switchTab]
Vue.prototype.checkLogin=function(backpage,backtype){
	//同步获取本地数据（uid、随机码、用户名、头像）
	varuser_id=uni.getStorageSync('user_id');
	varuser_nu=uni.getStorageSync('user_nu');
	varuser_nm=uni.getStorageSync('user_nm');
	varuser_fa=uni.getStorageSync('user_fa');
	if(user_id==''||user_nu==''||user_fa==''){
		//使用重定向的方式跳转至登录页面
		uni.redirectTo({url:'../login/login?backpage='+backpage+'&backtype='+backtype});
		returnfalse;
	}
	//登录成功、已经登录返回数组[用户id,用户随机码,用户昵称,用户表情]
	return[user_id,user_nu,user_nm,user_fa];
}
//定义一个全局的请求地址
Vue.prototype.apiServer='http://0608.cc/'

3.在pages/login/login.vue中添加如下

在pages/my/my.vue中添加如下：

5.PHP接口loginApplets

publicfunctionloginApplets(Request$request,UserInfo$userInfo)
{
//获取数据
$data['u_openid']=$request->param('openid','');
//验证数据
$rule=[
'u_openid'=>'require|max:200|min:10'
];
$message=[
'u_openid.require'=>'openid不能为空',
'u_openid.max'=>'openid格式错误',
'u_openid.min'=>'openid格式错误'
];
$validate=Validate::rule($rule)->message($message);
if(!$validate->check($data)){
returnjson(['code'=>1,'msg'=>$validate->getError(),'res'=>null]);
}
//根据openid判断是否存在
$where['u_openid']=$data['u_openid'];
$user=$userInfo->selOne($where);
if(!$user){
returnjson(['code'=>1,'msg'=>'还没授权登录、请先授权然后登录','res'=>$user]);
}
returnjson(['code'=>0,'msg'=>'已授权获取到用户的数据','res'=>$user]);
}

6.PHP接口appletsUserInfo

publicfunctionappletsUserInfo(Request$request,UserInfo$userInfo)
{
//获取数据
$data['u_openid']=$request->param('openid','');
$data['u_avatarUrl']=$request->param('avatarUrl','');
$data['u_city']=$request->param('city','');
$data['u_country']=$request->param('country','');
$data['u_gender']=$request->param('gender','');
$data['u_language']=$request->param('language','');
$data['u_nickName']=$request->param('nickName','');
//验证数据
$rule=[
'u_openid'=>'require|max:200|min:10',
'u_avatarUrl'=>'require',
'u_nickName'=>'require'
];
$message=[
'u_openid.require'=>'openid不能为空',
'u_openid.max'=>'openid格式错误',
'u_openid.min'=>'openid格式错误',
'u_avatarUrl.require'=>'用户头像不能为空',
'u_nickName.max'=>'用户名格式错误',
];
$validate=Validate::rule($rule)->message($message);
if(!$validate->check($data)){
returnjson(['code'=>1,'msg'=>$validate->getError(),'res'=>null]);
}

//根据openid判断是否存在
$where['u_openid']=$data['u_openid'];
$user=$userInfo->selOne($where);

//存在、执行修改
if($user){
$user_res=$userInfo->updOne($where,$data);
$res=[];
$res['u_id']=$user['u_id'];
$res['u_regtime']=$user['u_regtime'];
}

//不存在、执行添加
if(empty($user)){
$res=[];
$res=$data;
$res['u_regtime']=time();
$res['u_id']=$userInfo->addOne($res);
}

//判断是否添加成功
if(empty($res['u_id'])){
returnjson(['code'=>1,'msg'=>'注册失败,返回重试','res'=>null]);
}
returnjson(['code'=>0,'msg'=>'ok','res'=>$res]);
}

总结

到此这篇关于使用UniApp实现小程序的微信登录的文章就介绍到这了,更多相关使用UniApp实现小程序的微信登录内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

使用 UniApp 实现小程序的微信登录功能

热门推荐

随机推荐