微信小程序授权登录如何实现既优雅又流畅的用户体验？

本文共计1729个文字，预计阅读时间需要7分钟。

前言：在微信小程序项目中，涉及获取用户信息并实现用户登录时，可通过微信官方提供的登录能力方便地获取微信用户身份标识，快速建立小程序内的用户体系。

官方文档仅提供登录能力，具体步骤如下：

1. 在小程序中调用微信登录接口，获取code。

2.将code发送到后端服务器。

3.后端服务器使用code换取access_token和openid。

4.使用openid建立小程序内的用户体系。

前言

当微信小程序项目中涉及到获取用户信息并实现用户登录时，可以通过微信官方提供的登录能力方便地获取微信的用户身份标识，快速建立小程序内的用户体系。官方文档只是提供如何去调用授权登录，如果直接原封不动的照搬文档来进行代码编写，这样势必会造成代码的维护性差，所以本篇着重介绍如果更优雅的处理微信小程序的授权登录。

授权登录的基本流程

上图是微信小程序官网提供的授权登录基本流程图，这里我只从前端开发的角度来讲解一下该流程。

• 通过wx.login()获取临时登录凭证code。
• 通过调用服务端提供的接口把code传递给服务端，然后服务端会返回给前端openid和sesstion_key。这就代表已经成功完成授权登录了，至于openid和sesstion_key的用途，后面再进行讲解。

大体的登录流程搞清楚之后，就可以进行代码的编写了。因为微信提供的api接口调用不利于代码维护，所以我借助了promise进行封装处理（不了解的可以看ES6文档，里面有详细介绍），这样做的好处就是以后可以链式调用接口，也可以结合async/await（ES6语法）将异步接口进行同步处理。