微信网页授权，拿到用户code

1. 用微信登录测试公众号平台

地址：微信公众平台

2. 用微信扫描二维码关注测试公众号

3. 修改网页授权获取用户基本信息接口，如图：

   

4. 修改OAuth2.0网页授权

   

注意：
不能有http:// 等协议头；

地址是项目的地址，开发时测试用的就是项目启动后那个页面的地址，上线后就是线上页面的地址，还要注意下面的回调的页面地址要在这个地址的域名下，

如；当前地址是10.88.32.55:8080，回调的地址就可以是http://10.88.32.55:8080/aa.html, http://10.88.32.55:8080/bb/cc.html 等

5. 代码实现网页授权，拿到用户code

  const AppId = 'wx0d9cdf54debed1ce';  // 测试公众号平台的APPID，第1步那个链接里
  const { code = '' } = qs.parse(window.location.search); // 获取当前页面地址中的code参数的值
  const local = (window.location.href);  // 对当前地址用encodeURIComponent进行编码

  // 如果code是''，说明还没有授权，访问下面连接，用户同意授权，获取code
  if (code === '') {
    window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${AppId}
    &redirect_uri=${local}&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect`;
  } else {
    this.weixinCode = code;  // 能拿到code，说明用户已同意授权，拿到coed
    console.log('获取微信code：', this.weixinCode);
  }

参考链接： 参考

注：redirect_uri等于的这个参数是授权后回调的页面地址，这个回调后的地址，必须要在AppId等于的这个测试公众号下设置的那个授权回调页面域名的域名下才行（上面3.4步）

本地测试时，AppId设置成自己的微信申请的测试公众号AppId，公众号上面设置的地址是（10.88.32.55:8080），这个时候，第一次访问当前页面（http：//10.88.32.55:8080），由于没有code，先去访问https://open.weixin.qq.com/connect/oauth2/authorize?appid=${AppId} &redirect_uri=${local}&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect这个页面拿到code，回调的是当前页面地址，即http：//10.88.32.55:8080，在设置的授权回调页面域名的域名下，所以不会报 “redirect_uri参数错误”的错

同理，上线时，AppId需要换成上线的那个AppId，这里的回调地址是进入页面的当前地址，但这时的地址不再是开发时本地测试的那个地址了，所以需要在上线的那个AppId的公众平台上重新设置授权回调页面域名，保证回调的地址在这个设置的这个地址域名下，就不会报错了

如：当忘记改AppId，此时还是在用自己本地开发测试时的AppId（设置的授权回调页面域名还是10.88.32.55:8080），但是上线了，上线后回调的地址不再是http：//10.88.32.55:8080，而是上线后的地址，此时这个地址已经不在10.88.32.55:8080域名下了，所以就会报“redirect_uri参数错误”的错

这里可能有点绕，如果是下次看到，记得多读两次，始终注意这一句话redirect_uri等于的回调地址，要在代码中设置的 Appid这个公众号中 设置的授权回调页面域名 的域名下

---

附：

做web前端开发写微信浏览器上浏览的页面时，很多时候会要求只能在微信端访问页面，
或者比如说访问上面的获取code的这个链接（这个链接只能在微信端访问，在其他浏览器上访问会提示用户在微信端访问而不是打开访问的页面）

这种情况下，开发时就没法用PC端的浏览器来调试了，如何做到能在PC端调试页面，这时就可以使用微信web开发者工具来调试，在PC端模拟微信访问

下载地址：微信web开发者工具

本地开发测试时，第5步的Appid用的是谁的微信号申请的测试公众号Appid，登录微信web开发者工具就用这个的微信号登录，不然会报错，错误提示好像是“未关注该测试号”，好像是这个

如果是只是调试公众号的页面，最好下载微信web开发者工具，而不是微信开发者工具，虽然微信开发者工具还能调试小程序等，但是用它来调试公众号页面，点击页面时是错位的，根本没法用，如果即想调试公众号页面，又要调试小程序，还是用微信开发者工具吧

下载地址：微信开发者工具

一个折中的办法：用微信开发者工具想要调试公众号的一些页面，有些不要求只能在微信上访问的页面，可以点击在浏览器上访问，然后在本地的浏览器上进行调试