h5打包的app怎么调微信登录方式

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等关键信息不应该直接暴露，可以使用加密方式进行传输和保存。