微信网页开发之网页授权

简述：在写网页授权之前，本人并没有接触过公众号的开发，因此走了很多弯路。
1、首先是获取code，在获取code上就花了较长的时间虽然说是跟着开发文档来的（公众号开发文档），但是依旧遇见了很多问题。
第一步：调微信的接口；原本以为是一个get请求，最后才知道是通过window.location.href调的接口，（redirect_uri必须编码）
由于授权操作安全等级较高，所以在发起授权请求时，微信会对授权链接做正则强匹配校验，如果链接的参数顺序不对，授权页面将无法正常访问

• window.location.href="https://open.weixin.qq.com/connect/oauth2/authorize?appId=wx077effbe10123456 &redirect_uri="+encodeURIComponent(window.location.href)+"&response_type=code&scope=snsapi_userinfo&connect_redirect=1#wechat_redirect"
  

但即使是这一步，我便遇到了问题；首先是习惯性的在浏览器上打开然后提示到微信客户端，
在微信开发工具中调试地址一栏输入你所要跳转到的页面以及所携带的参数（http://card.com/?id=123456），然后就出现了

• redirect_uri参数错误，后经查是后端那边没有配置回调域名，本以为就这样能走通，结果还是报参数错误。（当时由于是周六晚上就留到了周一解决）但是再一次调试时却遇到 redirect_uri多次重定向，且依旧出现参数错误；

• 多次重定向是因为在页面渲染完成后调用了微信的接口，在调取成功后跳回原来的页面（http://card.com/?id=123456）；然后页面再次渲染，再次调了微信的接口，解决方法就是在调用该方法时做判断

• getAut(){ let _this=this; if(_this.$route.query.id){ if(!window.location.href.includes('code=')){ window.location.href="https://open.weixin.qq.com/connect/oauth2/authorize?appId=wx077effbe10156931&redirect_uri="+encodeURIComponent(window.location.href)+"&response_type=code&scope=snsapi_userinfo&connect_redirect=1#wechat_redirect" } _this.getMarketId(); _this.$nextTick(()=>{ let firstIdx=window.location.href.indexOf('code='); let secondIdx=window.location.href.indexOf('&',firstIdx) let params={ code:window.location.href.slice(firstIdx+5,secondIdx) } fetchGet('http://card.com/admin/get_open_id',params).then(res=>{ if(res.status==1){ // _this.$toast.success(res.msg) _this.getInfo(); }else{ _this.$toast.fail(res.msg) } }) }) }else{ _this.getId();//获取url上的参数id（该方法未贴出） _this.getInfo();//获取当前页的信息（该方法未贴出） } }