如何提高微信授权页面制作效率
前言
刚接触微信授权页面的时候，感觉很麻烦，之前苏苏也总结了一篇文档 【移动端网站微信授权的处理方法】，看完之后对整个授权过程有了大致的了解，但是总感觉还是很麻烦，比如：
页面需要放到game域名（game.163.com）下（因为只有game域名是已经配置好授权回调的），第一，测试环境（
text.nie.163.com）下无法授权成功，请点击测试demo；第二，所有这种页面都放在，慢慢多了就不好找了。
每个项目都需要建立index.html和app.html页面，然后index.html只是完成授权的操作，然后每次都要修改里面的type值（是否需要获取用户的详细信息，因为如果只需要id，是不需要出现那个授权确定界面的）、跳转链接等等信息
总的来说，这种方式的处理不好上手，新手看到都胆怯了，总感觉很高深，很麻烦。有没有更简单的处理流程来解决呢？本文介绍另一种通用方式，这种方式杭州的童鞋已经在使用的了，我只是总结分享出来，尝试提高新童鞋在这类页面的制作效率。
分析授权流程
授权页面的用意是通过微信授权，取得用户信息，整个流程可以简化如下：
- 用户打开页面，首先去授权，我们把授权代码（代码下面会讲到）在index.html
- 授权成功后，取得微信的code值，跳去指定的某个页面
- 在跳转后的页面有个微信登录的接口，该接口接受微信的code值，返回拿到的用户信息，比如头像、昵称等
- 然后拿到用户信息展示在页面
整个授权的过程就算完成了。在整个流程中，里面提到两个重要信息：
1、授权代码是什么
授权代码就是微信提供给开发者使用的一个授权地址，地址如下：
https://open.weixin.qq.com/connect/oauth2/authorize?appid=&redirect_uri=&response_type=code&scope=
它包含三个主要参数：
appid： 微信公众号id（我们现在使用的是 网易游戏玩家俱乐部 的appid）
redirect_uri：授权成功后，跳转的地址
scope：授权类型，分别是snsapi_userinfo（该类型代码详细信息授权，返回用户的所有详细信息，包括微信id，昵称，头像，性别，城市，国家等。会弹出绿色的授权提示框，让用户确认授权）和snsapi_base（该类型代表基础授权，只返回微信id，授权过程不会出现用户确认界面）
2、授权域名是什么
授权域名是指在微信公众号绑定的某个授权域名，而这个域名是和上面的appid是一致的，也只有一致了才会授权成功。而我们使用的 网易游戏玩家俱乐部 微信公众号绑定的授权域名就是 game.163.com。另外写有上面授权代码的页面需要放到授权域名下才可以，而授权跳转后的页面可以放在任何域名下，不需要放在授权域名下（这个是本文提供方法的重点）
新的制作方式
说了那么多，终于到正文了~
首先，根据上面的分析，我们知道授权代码其实是一致通用的，只是参数不一样，而且都是要放到授权域名下，所以根据这个特点，我们可以搞一个公用的授权页面 authorize.html，而这个页面现在已经有了，后续项目可以直接使用，地址是：
http://game.163.com/******/authorize.html
如何使用：
/***
@appid: 默认使用网易游戏玩家俱乐部的appId，所以可以不传
@scope: 授权类型:snsapi_userinfo/snsapi_base
@final_uri: 授权成功后，跳转的地址，一般是当前页面地址
***/
var rURL = 'http://game.163.com/***/authorize.html?scope=snsapi_userinfo&final_uri='+encodeURIComponent(location.origin + location.pathname);
如果想研究下authorize页面的代码，请移步点击打开git
授权成功后，跳转回来，我们需要把传回来的code值去请求登录接口，获取用户信息：
/***
@url：微信授权登陆接口，这个需要平台提供，目前貌似是跟产品的，不知是否用公用的
@code：授权成功后传回来的code值
@need_userinfo：是否获取用户详细信息，需要和上面授权类型一致，但是传的值不一样，下面的例子 1 代码是snsapi_userinfo类型
（可能还有其他参数，不同接口根据实际情况）
***/
$.ajax({
type: "get",
url: 'http://wx-share.webapp.163.com/ma21/weixin_login',//微信授权登陆接口
dataType: "jsonp",
data : {
'code' : code,
'need_userinfo':1
},
success: function(json) {
if(json.success){
alert('微信授权成功，你的昵称是：'+json.nickname);
userImg = json.headimgurl;//拿到用户头像
PageInit();//授权成功后，页面主js的入口
}else{
location.href = rURL;
}
},
error: function() {
alert('网络错误请刷新重试！！')
}
});
所以最终的js代码是：
nie.define('Authorize',function(){
var userImg = '',
rURL = 'http://game.163.com/****/authorize.html?scope=snsapi_userinfo&final_uri='+encodeURIComponent(location.origin + location.pathname),
GetQueryString = function(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i");
var r = window.location.search.substr(1).match(reg);
if (r!=null) return (r[2]); return null;
},
code = GetQueryString('code'),
init = function(){
if(code){
$.ajax({
type: "get",
url: 'http://wx-share.webapp.163.com/***/weixin_login',//微信授权登陆接口
dataType: "jsonp",
data : {
'code' : code,
'need_userinfo':1
},
success: function(json) {
if(json.success){
alert('微信授权成功，你的昵称是：'+json.nickname);
userImg = json.headimgurl;//拿到用户头像
PageInit();//授权成功后，页面主js的入口
}else{
location.href = rURL;
}
},
error: function() {
alert('网络错误请刷新重试！！')
}
});
}else{
location.href = rURL;
}
};
init();//初始化
})
请戳这里测试demo
测试结果如下：
后语
最后再来一句：
以后遇到微信授权的页面，我们整个流程就变得简单清晰了，只需要在主js里面加上上面授权跳转和请求登录接口获取用户信息的代码即可，其它做法和普通项目一样，我们不需要再专门建一个授权页面，不再需要说这种项目一定要放game.163.com域名下（当然，如果需求本身就需要放到这里，那就没得说了）。
本文的测试demo源码地址（里面的index.html是旧的方式，index2.html是本文说方式）
手机阅读请扫描下方二维码：
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1