博主不易,记得收藏点赞加关注哈
前言
正常需求中,微信小程序的登陆都是不强制的,但是网上大多资料教的都是强制登陆,或者做个登陆页面,其实这种太影响用户体验,还很容易小程序审核不通过
如果想看懂这篇博客,需要有做过小程序的经验(因为,这种可能对初学者不好理解)
可以先了解下我以前发布的博客(了解一下)
uniapp微信小程序登陆流程(前端详细)__揽的博客-CSDN博客_uniapp 微信小程序 登录
uniapp微信小程序登陆-升级版,登陆加登录信息过期以后的无痕登陆__揽的博客-CSDN博客_uniapp小程序登录过期
思路(思路中的代码在最后有展示,请结合代码看)
- 封装一个全局promise函数(全局函数执行下面的逻辑)
- 判断本地存储是否有token
- 如果有则代表已经登陆,那么直接 return resolve出去
- 如果无则代表未登录,那么执行下面的登陆函数
- 登陆函数是下面的逻辑
- 前端直接调用uni.login()接口换取code,然后通过端口将code传给后端
- 后端拿到code以后,通过调用微信官方的接口将code换取用户的openid,unionid(unionid只 有小程序绑定微信公众平台以后才会有,可以了解一下unionid)
- 后端通过code换取信息以后,用unionid或者openid查一下用户表(用户录入的那个表)并判断 该用户是否在数据库里面存在
- 如果存在 那么就将用户的信息和token一并返回给前端
- 如果不存在,那么就在数据库添加一个默认用户(默认用户:只有用户的基础数据),并且给他 一个默认头像和昵称(头像昵称是为了增强用户体验,后续让用户自己更改头像和昵称),创建完以后将用户数据和token返回给前端
- 前端拿到后端返回的用户信息和token以后,存储在本地并且调用return resolve出去
调用
- 请求封装一个全局的request方法,并且根据返回的结果判断token有无过期,过期则删除本地存储的token
- 每个页面都调用一次封装的全局函数,然后后续的request请求在其中的then方法里面
- 并且给用户留一个可以更改头像昵称的修改页面
- 这样的话这个非强制登陆的流程逻辑就完成了,模仿大厂小程序的登陆
实例代码
1.全局函数
// 全局请求封装
import baseUrl from "./url.js"
const defaultUrl = baseUrl.base_url
export default () => {
return new Promise((resolve, reject) => {
//查询本地存储的token,来判断是否登陆过
if (uni.getStorageSync("token") != "") {
resolve(true) //登陆的token不为空,代表登陆过,直接resolve
return
}
//1进入到这一步,代表本地存储的token为空,表示没有登陆过,那么走登陆函数
//2.登陆函数逻辑,通过uni.login得到的code传给后端,然后后端通过https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/login/auth.code2Session.html
//3.将得到的openid,unionid,查询数据库,判断数据库是否有这个人
//4.没有的话,先插入库,将openId和unionId存储下来,并且返回
uni.login({
success(res) {
uni.request({
url: defaultUrl + "/login",
method: "GET",
data: {
code: res.code
},
success(reqRes) {
if (reqRes.data.code == 200) {
uni.setStorageSync("token", reqRes.data.data.token)
uni.setStorageSync("userInfo", reqRes.data.data)
uni.setStorageSync("needLogInAgain", reqRes.data.data
.needLogInAgain)
resolve(true)
} else {
reject(false)
uni.showToast({
title: reqRes.data.msg,
icon: 'none'
})
}
}
})
}
})
})
};
2.请求request函数
// 全局请求封装
import baseUrl from "./url.js"
const defaultUrl = baseUrl.base_url
export default (url, method = 'get', params = {}) => {
const token = uni.getStorageSync('token') || ''; //获取token
uni.showLoading({
title: "加载中"
});
return new Promise((resolve, reject) => {
uni.request({
url: defaultUrl + url,
method: method,
header: {
'X-Token': token
},
data: {
...params
},
success(res) {
if (res.data.code == 200) {
resolve(res);
} else {
uni.showToast({
title: res.data.msg,
icon: 'none'
})
if (res.data.code == -1) {
uni.removeStorageSync("token")
}
reject(res);
}
},
fail(err) {
reject(err);
},
complete() {
setTimeout(() => {
uni.hideLoading();
}, 1500)
}
});
});
};
示例项目
uniapp小程序搭建UI框架corlorUi,uView框架,以及全局工具,自定义时间,request,预览图片,全局登陆-Javascript文档类资源-CSDN下载