问题来源:前不久去面试的时候有面试官问我你有自己的博客啥的吗?只能很尴尬的说没有。其实一直想有一个属于自己的博客啥的去记录自己在开发过程中遇到的问题,正好现在微信小程序比较流行,就花了两天自己搞了一个个人微信小程序。
页面展示:
**使用的功能:**页面信息展示,微信授权登录,微信小程序本地储存token等。
**基本流程:**最近在写微信小程序的时候,配到的微信小程序授权登录改变的问题。
1.首先,不能在进入小程序的时候就 直接弹出微信授权登录的弹窗,尤其是在首页的时候,这样会影响用户的体验,所以微信那边审核的时候是通不过的。
2.我的项目是用户进入小程序的时候(首页)可以看轮播图和文章的列表以及下拉刷新和上划加载。
3.用户在进入我的页面的时候,直接判断本地有没有存储token,如果没有直接到授权页面。
//是否已经登录
_isLogin:function(){
var that = this;
if(wx.getStorageSync('token')){//有token
that.setData({
msg:false//不弹出授权框
});
wx.request({//去判断token是否过期
header: { "content-type": "application/text" },
url: baseUrl + '/user?token=' + wx.getStorageSync('token'),
method: 'GET',
success: res => {
if(res.data.code == 400){//如果token过期,直接删除缓存中的token,重新授权登录
wx.removeStorageSync('token');//删除小程序端的token
this.getUserProfile();//重新授权登录
}else{//token没有过期
console.log(res.data);
that.setData({
username: res.data.data.nickname,//昵称
avatar: res.data.data.avatar,//头像
});
}
}
})
//没有token的话直接跳转到授权登录的页面
}else{
this.getUserProfile();
}
},
//登录获取token
getUserProfile(e) {
// 推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接口获取用户个人信息均需用户确认
// 开发者妥善保管用户快速填写的头像昵称,避免重复弹窗
wx.getUserProfile({
desc: '用于完善会员资料', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
success: (res) => {//这里可以获取昵称和头像
wx.login({
success : ress => {
// console.log(ress);
wx.request({
url: baseUrl + '/token/user',
data:{
code:ress.code,
nickname:res.userInfo.nickName,
avatar:res.userInfo.avatarUrl
},
method: 'POST',
success : res => {
wx.setStorageSync('token', res.data);
}
})
}
})
this.setData({
userInfo: res.userInfo,
hasUserInfo: true,
msg:false
})
}
})
},
在授权页面直接从小程序前段发送得到的数据到PHP后台中,数据包括(code,nickname,avatar),后端是laravel和装的overtrue插件。
//http://********/api/token/user(授权登录)
public function index(Request $request){
$requestData = $request->all();
$return_wechat = get_openid_by_code($requestData['code']);//得到openID和session_key
$user = get_user_by_openid($return_wechat['openid']);//根据openID去数据库中获取用户信息
if(!$user){//如果数据库中没有用户信息
$data['openid'] = $return_wechat['openid'];
$data['nickname'] = $requestData['nickname'];
$data['avatar'] = $requestData['avatar'];
//插入数据库
if (!$this->register($data)){
return $this->error('注册失败');
}
//生成token(没有封装随便生成的token)
$token = md5(time().rand(10000,99999));
//服务器储存token
Cache::put($token,json_encode($data),3600000);
return $token;
}else{//有用户信息
//生成token
$token = md5(time().rand(10000,99999));
$data['openid'] = $user['openid'];
$data['nickname'] = $user['nickname'];
$data['avatar'] = $user['avatar'];
//服务器储存token
Cache::put($token,json_encode($data),3600000);
return $token;
}
}
public function register($data){
$user = new User();
$user->openid = $data['openid'];
$user->nickname = $data['nickname'];
$user->avatar = $data['avatar'];
if (!$user->save()){
return false;
}else{
return $user->id;
}
}
//helper.php文件,公共方法文件
if (!function_exists('get_openid_by_code')) {
function get_openid_by_code($code)
{
$app = xiaochengxu_app();
//返回openid和session_key信息
$return_wechat = $app->auth->session($code);
return $return_wechat;
}
}
//获取小程序实例
if (!function_exists('xiaochengxu_app')) {
function xiaochengxu_app()
{
$app = Factory::miniProgram(config('wechat.wechat'));
return $app;
}
}
if (!function_exists('get_user_by_openid')){
function get_user_by_openid($openid){
return User::where('openid', $openid)->first();
}
}
//http://********/api/user(监测token是否过期,如果过期直接在微信小程序端删除token并重新授权登录)
public function index(Request $request){
$requestData = $request->all();
$user = Cache::get($requestData['token']);
if (is_null($user)){
return $this->error2('token已经过期',400);
}else{
return $this->success($user);
}
}
微信授权登录基本上到了这里就已经结束了。
**总结:**用户进入“我的”页面,监测是否有token
如果有token,直接去后台校验token的有效性。
token无效直接弹出授权登录,用户点击授权登录,
如果用户没有注册过直接注册入库,后台储存token,并将token返回微信小程序。
如果用户注册过,直接返回用户的token。
token有效,直接返回用户信息。
如果无token,直接弹出授权登录,用户点击授权登录,后台返回token。