打包h5为app微信授权登录

将H5网页打包为App应用是一种比较常见的操作，这样可以将原本只能通过浏览器访问的网页变为可以通过手机应用访问的方式，提高用户体验。而微信授权登录是一种常见的用户登录方式，可以让用户快速登录，并且有一定的安全性。因此，将H5网页打包为App应用，结合微信授权登录，在移动端推广和营销工作中应用非常广泛。

下面我们来详细介绍一下在H5网页中实现微信授权登录的流程与方法。总体上分为两部分，第一部分是通过微信开放平台创建应用并且获取应用的AppID和AppSecret，第二部分是在H5网页中实现微信授权登录。

第一部分：创建应用并获取AppID和AppSecret

1. 在微信开放平台注册账号并创建应用：首先需要在微信开放平台注册账号，注册成功之后，登录账号并创建应用。在创建应用时需要填写应用的基本信息，如应用名称、应用图标等等。

2. 获取AppID和AppSecret：在创建应用完成并且审核通过后，可以获得应用的AppID和AppSecret。AppID是开发者应用的唯一标识符，用于微信开放平台网站、公众号网页、小程序等开发中进行身份认证；AppSecret是用于验证开发者的身份，同时还可以获取access_token等调用接口时使用的重要凭证。

第二部分：在H5网页中实现微信授权登录

1. 引入微信JS SDK：在H5网页中引入微信 JS SDK，这个可以通过微信开放平台的文档获取到。在网页代码的标签中增加如下代码即可引入：

2. 初始化配置：要想在H5网页中实现微信授权登录，需要对微信JS SDK进行初始化配置。可以在JS文件中通过定义一个wx.config()函数进行配置，代码示例如下：

wx.config({

debug: false,

appId: 'your_app_id',

timestamp: '',

nonceStr: '',

signature: '',

jsApiList: [

'onMenuShareTimeline',

'onMenuShareAppMessage',

'chooseImage',

'previewImage',

'uploadImage',

'downloadImage',

'getLocation',

'openLocation',

'chooseWXPay',

'onMenuShareQQ',

'onMenuShareWeibo',

'onMenuShareQZone',

'scanQRCode',

'translateVoice',

'startRecord',

'stopRecord',

'playVoice',

'pauseVoice'

]

});

其中，APPID需要替换为创建应用获取到的APPID，同时还需要替换时间戳、nonceStr和signature等参数。

3. 获取授权地址：在H5网页中实现微信授权登录需要跳转到微信授权页面，获取用户授权信息。跳转到授权页面应该是在用户点击登录按钮的时候触发，跳转之前需要拼接如下的URL：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx_appId&redirect_uri=url&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

其中，wx_appId需要替换为创建应用获取到的APPID，redirect_uri需要替换为授权成功后需要回调的地址，scope为snsapi_userinfo表示需要获取用户的头像、昵称等授权信息。

4. 获取Access Token：通过在第三步中跳转到授权页面获取用户授权信息之后，回调页面会返回一个code，在JS文件中可以通过这个code去获取Access Token，获取Access Token的代码示例如下：

function getAccessToken() {

var code = getQueryString('code');

var url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=wx_appId&secret=wx_secret&code=" + code + "&grant_type=authorization_code";

$.ajax({

type: 'GET',

url: url,

dataType: 'jsonp',

jsonp: 'callback',

success:function(data){

var accessToken = data.access_token;

var openId = data.openid;

var url = "https://api.weixin.qq.com/sns/userinfo?access_token=" + accessToken + "&openid=" + openId + "&lang=zh_CN";

$.ajax({

type: 'GET',

url: url,

dataType: 'jsonp',

jsonp: 'callback',

success: function(data){

var nickname = data.nickname;

var headimgurl = data.headimgurl;

}

});

}

});

}

其中，wx_appId和wx_secret需要替换为创建应用获取到的APPID和APPSECRET，getQueryString()函数用于获取URL中的参数。

通过以上步骤，就可以在H5网页中实现微信授权登录的功能了。需要注意的是，在实现微信授权登录的过程中，需要在应用和网页中进行授权并获取Access Token，需要保证应用和网页在同一个公众号下进行注册。