uni-app开发小程序系列--微信登录

.my{width:100%;}微信登录官方文档是什么？官方文档是这样写的：小程序可以通过微信提供的官方登录能力，轻松获取微信提供的用户身份，快速在小程序内建立用户。系统。也就是说，让用户在我们小程序中的userid与用户的微信open_id相关联。这样当用户访问时，我们通过获取用户的open_id就可以知道用户在我们平台上的id。这样用户就可以不用输入账号密码就可以登录自己的账号。登录流程整个登录流程官方文档也给出了时序图，如下：需要说明的是，开发者服务器是我们的后端服务。因此，要在微信小程序中实现用户的微信快速登录，需要前后端的配合（全栈开发除外）。前端侧完成的主要流程就是图中的1、2、6、7这四个步骤。有了上面的时序图，我们完成登录逻辑其实还是比较简单的，按照流程走就可以了。第一步当然是要有一个微信小程序项目。笔者使用的是uni-app初始化的项目。没有生成工程的朋友可以移步我的另一篇博客：uni-app开发小程序系列--工程什么时候生成触发用户登录？什么时候触发用户登录？这个地方不同的应用有不同的要求和设计。在笔者看来，因为登录过程其实是静默的，用户是察觉不到的，不涉及获取用户的隐私数据，所以用户直接登录时最好立即登录生成一个用户会话状态访问它。这也使我们能够分析访客数据。在uni-app项目中，有一个根组件App.vue，我们可以在这里选择在onLaunch生命周期函数中进行登录逻辑处理。笔者的代码如下：上面的代码在时序图中已经包含了步骤1、2、6。有几个地方需要说明一下：为什么要用存储？Storage是官方提供的API，用于将Data存储在本地缓存中指定的key。除非用户主动删除或因存储空间原因被系统清空，数据始终可用。单个密钥允许的最大数据长度为1MB，所有数据存储的上限为10MB。所以如果我们将token存放在storage中，就可以减少对wx.login接口和后端接口的频繁调用。为什么需要判断token是否失效？作者的想法是在存储token的时候顺便记录一下时间戳。在获取token的时候，会将存储的时间戳减去当前时间戳，得到存储时间，然后判断是否超过30天（当然这个时间可以和后台协商）。超过则无效，需要重新登录。有人认为没有必要做这一步。如果令牌失败，他们在调用其他接口时会得到类似401的错误代码，然后重新登录即可。当然这也是可以的，但是笔者认为如果在这里处理的话，逻辑会更加集中，体验也会相对好一些。如何承载登录状态？当我们在本地获取到了token就代表登录成功了，接下来就是在其他请求中携带token，让后端知道是哪个用户的请求。当然我们不可能每次请求都加上这个逻辑，这样工作量是巨大的。所以最好封装一次wx.request，然后所有的请求都使用我们封装的方法。笔者的代码如下：//这里配置为后端接口地址constdefaultHost="http://api-server.com";consterrorMsg=(response)=>{让错误={};如果（response.statusCode）{error.code=response.statusCode;switch(response.statusCode){case400:error.msg="Badrequest";休息;case401:error.msg="未经授权，请重新登录";休息;case403:error.msg="拒绝访问";休息;case404:error.msg="请求错误，找不到资源";休息;case405:error.msg="请求方法不允许";休息;case408:error.msg="请求超时";休息;case500:error.msg="服务器端错误";休息;case501:error.msg="网络未实现";休息;case502:error.msg="网络错误";休息;case503:error.msg="服务不可用";休息;case504:error.msg="网络超时";休息;case505:error.msg="http版本不支持此请求";休息;默认值：error.msg=`连接错误${response.statusCode}`；}}else{error.code=10010;error.msg="连接服务器失败";}返回错误；}；函数请求（路径、方法、数据、设置）{consttokenInfo=uni.getStorageSync("tokenInfo");常量主机=设置？设置.host||默认主机：默认主机；const令牌=设置?设置.token||tokenInfo.token:令牌信息.token;returnnewPromise((resolve,reject)=>{uni.request({url:host+path,method:method,data:data,header:{Authorization:"Bearer"+token,},success:(res)=>{//处理200以外的状态码if(res.statusCode>=400){consterror=errorMsg(res);uni.showToast({title:error.msg,icon:"none",});reject(错误消息(res));//errorCallback(errorMsg(res))}elseif(res.data.code){uni.showToast({title:res.data.msg,icon:"none",});//reject(errorMsg(res.data.msg))//errorCallback(res.data)}else{resolve(res.data);//successCallback(res.data)}},});});}exportdefault{get:(path,data,otherData)=>{returnrequest(path,"get",data,otherData);},post:(path,data,otherData)=>{returnrequest(path,"post",data,otherData);}，请求：请求，}；记住上面的代码还有几个地方需要注意：defaultHost是后台接口的域名部分。如果是真实环境，有分测试环境，那么最好根据环境来判断；作者按照jwt规范header中添加的token信息，这里的规则也可以和后端协商；关于错误码的判断，笔者判断如果后端返回自定义错误码，返回0为正常响应，不为0则全部为异常计算这里需要根据实际调整情况。封装请求后，我们可以在登录状态下直接调用需要访问的接口。例如获取用户信息：.my{width:100%;}至此，登录功能就完成了。后记这个任务只是为了完成用户登录。如果要获取用户的昵称、头像甚至手机号，需要申请用户授权，比较复杂。我会在下一篇博客中详细介绍。作者简介，计算机专业背景，8年+Web开发经验，深耕Vue2、Vue3技术栈多年。丰富的全栈开发经验，技能树涵盖从前端工程搭建到部署上线的全链路流程。紧跟技术潮流，我们一直关注各种新兴技术趋势并积极进行实践探索，追求优雅的开发体验、极致的开发效率、高标准的开发质量。欢迎批评指正，或与我交流探讨前端技术。源码没有公开，请联系我私发。联系我：imwty2023（微信）博客原文地址：uni-app开发小程序系列——微信登录|imwty