博主不易，记得收藏点赞加关注哈
前言
正常需求中，微信小程序的登陆都是不强制的，但是网上大多资料教的都是强制登陆，或者做个登陆页面，其实这种太影响用户体验，还很容易小程序审核不通过
如果想看懂这篇博客，需要有做过小程序的经验（因为，这种可能对初学者不好理解）
可以先了解下我以前发布的博客（了解一下）
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下载
