React-微信网页开发总结

前段时间用React写了几个微信公众号的网页，遇到的主要阻力就是微信的网页授权问题和JS-SDK使用问题。

1. 网页授权

根据微信官方网页授权介绍，只有在需要获取用户信息时，才需要用到微信网页授权机制。关于如何进行网页授权，官方文档已经介绍很详细了，这里主要记录一下使用过程中遇到的问题以及需要注意的地方。

1.1 网页授权access_token

由于一个公众号的网页授权access_token是所有人共用的，如果每个需要用到授权的服务都自己调用微信提供的获取access_token的接口，每调用一次都会刷新一遍access_token，之前的access_token将会过期，access_token也就无法实现缓存。而access_token默认是2小时内有效的，所以在开发时，需要有一个统一的授权中心，授权中心负责access_token的获取缓存和更新。
统一授权还有一个好处：在开发时，公众号上面的不同菜单的网页可能是部署在不同的服务器，但是公众号后台的网页授权域名设置只能设置一个，用统一授权就可以解决这个问题。网页授权域名设置为授权中心的域名，腾讯后台的回调都会回调到授权中心，由授权中心转发重定向回每个菜单的页面。

1.2 回调

调用授权接口时，要求传入一个回调地址redirect_uri。这个redirect_uri的域名必须要和公众号平台-设置-公众号设置-功能设置-网页授权域名一致。

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

回调网页还要一个需要注意的地方：如果调用授权的页面和配置的redirect_uri是同一个页面，会出现从redirect_uri页面后退时，又重新进入到调用授权页，导致无法退出的问题。

这个问题可以通过监听popstate，如果返回到了授权页，则直接调用wx.closeWindow();退出来解决。

    window.addEventListener("popstate", function(e) {
        console.log("test"); 
        var documentUrl = document.location.href;
        console.log("documentUrl=" + documentUrl );
        if (documentUrl.indexOf("weixin.qq.com") !== -1) {
          wx.closeWindow();
        } 
      }.bind(this));

2. 微信JS-SDK