H5打包成app的方式是将网页应用框架进行打包，使其可以在移动设备上以原生应用程序的方式运行，这种方式让许多企业可以以更快的速度推出自己的移动应用程序。微信登录是目前许多应用程序的必选功能，那么在H5打包成app之后，如何调用微信登录呢？本篇文章将带大家一起了解一下。
一、微信登录原理
微信登录基于OAuth2.0协议实现，该协议规定了一些标准的接口和步骤，开发者需要向微信开放平台注册应用并获取APP_ID和APP_SECRET才能对接微信登录功能。
二、H5打包成app中微信登录流程
1.获取微信授权链接
首先，在应用中需要通过APP_ID、REDIRECT_URI、SCOPE等参数生成授权链接，跳转至微信平台授权页面。
APP_ID：应用ID，通过微信开放平台获取。
REDIRECT_URI：授权完成后重定向地址，即返回应用页面的URL地址。
SCOPE：授权方式，分为两种——基本信息授权和用户信息授权，具体包括以下两种形式：
snsapi_base：获取用户openid（在用户无需手动授权的情况下完成，但只获得用户openid，无法获得用户信息）
snsapi_userinfo：获取用户基本信息（必须通过用户手动授权完成，可以获得用户详细信息，如昵称、头像等）
2.微信用户同意授权后，自动跳转回指定页面
用户在微信平台授权页面完成授权后，微信会根据REDIRECT_URI跳转返回至应用页面，并携带code参数。
3.通过code参数获取access_token
应用服务器收到微信返回的code后，需要通过下面的API向微信服务器发送请求以获取access_token和openid，其中APP_SECRET需要在应用开发时填写，不能暴露在前端代码中：
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
4.access_token被获取成功之后，就可以使用微信登录功能了。如果应用程序存在账号系统，接下来便可根据openid实现用户登录。
三、H5打包成app中调用微信登录
1.引入微信登录JS-SDK
在HTML文件头部，引入微信登录JS-SDK：
```html
```
2.调用微信登录授权窗口
```javascript
var obj = new WxLogin({
id: "login_container",
appid: "APP_ID",
scope: "snsapi_login",
redirect_uri: "REDIRECT_URI",
state: "STATE",
style: "",
href: ""
});
```
其中，APP_ID和REDIRECT_URI需要在开发时向微信开放平台申请。
3.接受微信返回的code参数
```javascript
var code = GetQueryString("code");
```
注：GetQueryString方法是获取URL参数的通用方法。
4.请求获取access_token和openid
```javascript
$.ajax({
type: "GET",
url: "https://api.weixin.qq.com/sns/oauth2/access_token?appid=APP_ID&secret=APP_SECRET&code=" + code + "&grant_type=authorization_code",
success: function(data){
// TODO 处理获取access_token和openid后的操作
}
});
```
其中，APP_ID和APP_SECRET需要在应用开发时申请并填写。
5.获取用户基本信息
在2步骤中，SCOPE参数需要设置为snsapi_userinfo，如果获取到了access_token和openid，接着可以通过以下API获取用户基本信息：
https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN
其中，ACCESS_TOKEN和OPENID需要在4步骤中获取到。获取到的用户信息可自行处理。
四、总结
以上就是在H5打包成app中实现微信登录的详细流程，需要注意的是，微信登录才可以实现，必须要向微信开放平台注册应用并获取APP_ID和APP_SECRET。同时，应用开发中无论是前端还是后端，都应该注意安全问题，APP_SECRET等关键信息不应该直接暴露，可以使用加密方式进行传输和保存。
