UniApp: 微信小程序登录流程梳理UniApp是一个跨平台开发框架，可以用于同时开发多个平台的应用程序，包括微信小程

简述

UniApp是一个跨平台开发框架，可以用于同时开发多个平台的应用程序，包括微信小程序、App、H5等。它基于Vue.js框架，通过编写一套代码，就可以在不同平台上运行和展示。哈哈，这介绍说得倒是轻松，其实实现起来，还是要各端调试。

但是在兼容移动端app的情况下，虽说uniapp可以生成且跨平台，但是性能方面与原生ios和android有很大差距的，但是作为前端的我，哪能面面相觑，当然是以最小的成本实现其需求了，若是有时间还是可以在时间成本与性能直接选择Flutter更为最佳。

Flutter使用Dart语言进行开发，其底层渲染引擎可以直接与硬件交互，达到更高的性能表现。另外，Flutter还通过自带的热重载和快速渲染机制，提供了快速且流畅的开发体验。相比之下，UniApp是基于WebView的封装，可能会存在性能上的一些限制。好了，不扯皮了。

这里主要针对微信小程序端做的一些总结。

登录流程与实现

流程

微信官方文档

我看了一下掘金上，很多解读微信小程序官方登录流程的时候都贴了这个图，但这也没办法，流程是微信他们那边定的，而我们则只需要熟悉和了解，才能更好地对接他们（即微信小程序官方）开发的接口

1. 调用wx.login() 获取`code`

这个code的作用是临时登录凭证 换句话说就是只能使用一次就失效了

2. 调用 auth.code2Session 接口

换取 用户唯一标识 OpenID 、用户在微信开放平台账号下的唯一标识UnionID（若当前小程序已绑定到微信开放平台账号）和 会话密钥 session_key。

后端发送请求后获取到的返回信息：

{"session_key":"G59Evf\/Em54X6WsFsrpA1g==","openid":"or43434fgggc4-VoSPhTyUnToY60"}

注意事项

会话密钥 session_key 是对用户数据进行加密签名的密钥。为了应用自身的数据安全，开发者服务器不应该把会话密钥下发到小程序，也不应该对外提供这个密钥

3. 生成自定义登录态

之后开发者服务器可以根据用户标识来生成自定义登录态，用于后续业务逻辑中前后端交互时识别用户身份。自定义登录态与openid和session_key关联，有很多方式可以实现的，如：

第一种方式：我们可以将openid和session_key存进redis中，前端来访问的时候带上就能够访问。
第二种方式：利用jwt方式生成Token返回给前端，让前端下次请求时带上，然后后端解析token后识别身份。

for example

token的生成，一般后台框架都写有集成好的JWT库，比如我们前端通常选用的NestJS,就可以直接引入npm install @nestjs/jwt 后端通过一定的规则去生成token,

我们可以将openid和session_key存进token生成模式中去，

@Get('test')
test(@Res({ passthrough: true}) response: Response) {
    const newToken = this.jwtService.sign({
      openid: 'xxx',
      session_key: 'xxx'
    });

    response.setHeader('token', newToken);
    return 'hello';
}

那么前端这边接受到的就是携带有session_key和openid的token,但是前端无法解析出来，而只需回传给后端识别身份即可，这样就避免了信息泄露的情况。

概念

OpenID和UnionID的理解

官方给的解释是OpenID是用户唯一标识，而UnionID则是用户在微信开放平台账号下的唯一标识 这里我个人的通俗总结： OpenID是用户在一个具体的小程序或公众号中的唯一标识符。它是用户在登录授权过程中由微信服务器返回的，用于识别用户身份和进行用户认证。每个小程序或公众号都会生成一个独立的OpenID，不同小程序或公众号之间的OpenID是不互通的，即同一个用户在不同小程序或公众号中登录时，会生成不同的OpenID。

UnionID是基于同一开放平台账号下的多个小程序或公众号之间的唯一标识符。当一个用户在同一开放平台下的不同小程序或公众号中都授权登录时，这些小程序或公众号会共享同一个UnionID。通过UnionID，开发者可以实现在不同小程序或公众号之间共享用户信息，实现跨应用的用户关联和个性化服务。

总结起来，OpenID是用于识别同一小程序或公众号中的用户身份，而UnionID用于识别同一开放平台下多个小程序或公众号中的用户身份，这样说是不是通俗易懂了

UnionID机制说明

如果开发者拥有多个移动应用、网站应用、公众帐号及小程序，可通过 UnionID 来区分用户的唯一性。

因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号（包括小程序），用户的 UnionID 是唯一的。换句话说，同一用户，对同一个微信开放平台下的不同应用，unionid是相同的。

实现

先了解下，使用uniapp自带封装好的方法 UniApp提供了封装好的API和插件，可以方便地获取微信信息。以下是一些常用的方法：

1. uni.login

通过uni.login方法可以获取用户的微信登录凭证，返回一个包含登录凭证和其他信息的对象。示例如下：

uni.login({
  provider: 'weixin',
  success: function (res) {
    var code = res.code; // 微信登录凭证
    // 其他操作...
  },
  fail: function (err) {
    console.log(err);
  }
});

2. uni.getUserInfo

通过uni.getUserInfo方法可以获取用户的基本信息，如昵称、头像等。示例如下：

uni.getUserInfo({
  provider: 'weixin',
  success: function (res) {
    var userInfo = res.userInfo; // 用户信息
    // 其他操作...
  },
  fail: function (err) {
    console.log(err);
  }
});

3. uni.checkSession

使用uni.checkSession方法可以检查用户的登录状态是否过期，以避免重复登录。示例如下：

uni.checkSession({
  success: function () {
    console.log('登录状态有效');
  },
  fail: function () {
    console.log('登录状态过期');
    // 其他操作...
  }
});

通过上述方法，开发者可以轻松地获取微信信息并进行相应的业务处理。需要注意的是，使用以上API需要在manifest.json文件中配置相应的权限和插件。

其中，uni.login对应微信小程序中的wx.login获取code码，传给后端，然后后端调wxapi得到session_key和openid;

在这个过程遇到的bug:

非法code原因

需要开发者，拿到开发该项目的appID，并且是该项目开发者管理员或者开发者身份，才可以进行调试对接，不然会报非法参数，code被占用等情况，而后端也需要拿到对应的当前项目的appid和appSecret对前端传过来的code值，去调wxapi,才能正确识别

对了，还有一点就是，配置服务器的ip白名单，这个在微信小程序后台那里通过管理员身份添加白名单。

需要https体验版

如果你在开发微信小程序时使用了带有域名的接口，但是在手机上预览时无法发送请求，可能是以下几个原因导致的：

域名没有添加到小程序的服务器域名白名单中: 在小程序管理后台的开发设置中，可以设置服务器域名白名单，只有在白名单中的域名才能被小程序访问到。请确保你使用的接口域名已经添加到了白名单中。

接口域名没有经过备案：部分接口域名需要进行备案才能在小程序中使用。如果你的接口域名没有备案，可能无法在手机上预览时请求成功。

接口域名使用了HTTPS协议：从2019年1月1日开始，微信小程序强制要求所有的接口请求必须使用HTTPS协议。如果你的接口域名使用的是HTTP协议，可能会导致手机上预览时请求失败。请确保你的接口域名已经启用了HTTPS。

UniApp: 微信小程序登录流程梳理

简述