获取微信公众号assecsToken登录（前端篇）

一、前端需要做的工作并不多

1、准备工作：

获取assecsToken需要用到的appid，secret，微信公众号安全证书、js安全域名和对应服务器

1、appid是前端后端都需要的，前端先传给微信服务器。经过微信回调后再由后端传给微信服务器
2、secret是在前端传给微信后，并且微信回调返回给后端后，后端用于请求个人信息，例如openid时需要用到的
3、js安全域名服务器，这个是一开始就要准备好的，安全域名的根目录下放一份微信公众号安全证书（一个微信公众号内部的txt文件，不要改名字）。
放入后自己访问一下.例如我的服务器是http://aaa.xxxxx.club,微信公众号安全证书的名字是Mxxxx_xxxx_xxx.txt，
访问http://aaa.xxxxx.club/Mxxxx_xxxx_xxx.txt这个路径如果能访问到，就说明配好了，如果没有，就要设置一下服务器代理了。
注：前后端都要放置安全证书，否则很容易报错
4、公众号内设置js安全域名，aaa.xxxxx.club就是我的服务器安全域名，前后端服务器都要设置

2、前端开始请求

// 设置带参数的微信回调地址
let wxAppId = '自己服务器的appid'
let oData = '需要回传的参数';
let uri = '后端回调接口地址' + '?params=' + oData;
// 格式化url,注意这一步的uri必须提前拼接好，以防止出错
// 也可以在encodeURI()里面拼接，但是encodeURI()里面一定不能出现模板字符串【``】,否则会导致【``】之后的数据全部出问题
// 这是一步很关键的问题，我们吃过大亏
let callBackUrl = encodeURI(uri);
// 微信公众号前端请求地址(微信给的)，前端请求后微信利用callBackUrl跳向后端，
// 除了自己的值，微信也会把请求到的拼接到callBackUrl后面，一起传给后端
let wxUrl = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='
// 获取信息的默认结尾链接（微信给的）
let defaultUrl = '&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'
// 生成请求地址
let redirectURI = wxUrl + wxAppId + '&redirect_uri=' + callbackURL + defaultUrl;
// js页面跳转即请求
window.location.href = redirectURI;

二、至此前端请求微信用户信息到此结束

剩下的就是后端做操作了，微信公众号里面有后端开发模板（php,java,node等），直接套用就好。
值得注意的是，做好签名校验就可以了，大概率会遇到签名错误问题，
多数与自己参数的格式有关系，注意检查，一般很容易就成功了