微信公众号开发网页授权和微信JS-SDK wx.config权限验证

开发微信公众号h5页面，使用微信的东西。需要处理2点。
1、网页授权拿的code，调用后端同学的接口，把code提交给后端，返回openId，进行业务处理。
2、使用JS-SDK的方法，必须先wx.config权限验证通过后才能使用SDK方法。

微信公众号配置问题
1、公众号设置->功能设置->网页授权域名和JS接口安全域名添加我们的域名，添加校验文件。
2、接口权限->检查自己使用的功能是否开通或者已开启，比如位置授权和网页授权。
3、基本配置->公众号开发信息->IP白名单 添加ip白名单这里后端需要注意，不然服务端获取的 access_token 会有问题。

一、网页授权

网页授权官网地址
业务梳理问题
1、进入页面先判断缓存中是否有用户信息，如果没有用户信息，需要调用微信的网页授权地址。
2、回调后，从url中获取code参数。通过code调用后端接口，拿到openId,
3、获取到openId,通过openId,调用后端接口获取用户信息，缓存用户信息。

/*
this.appId 是微信公众号的appId  window.location.href 是当前的url地址 用户微信回调打开，传递code。
1、window.location.replace 替换当前连接，打开微信授权地址https://open.weixin.qq.com/connect/oauth2/authorize
2、打开微信授权地址后，微信会打开回调我们的连接地址，把code拼接在后边，
3、回调连接打开后，从url中获取code。
*/
window.location.replace(
          `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.appId}&redirect_uri=${encodeURIComponent(
            `${window.location.href}`
          )}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`
        )

注意：如果使用vue项目，路由模式如果是hash模式，会存在问题，建议使用history模式。

二、微信JS-SDK wx.config权限校验

JS-SDK说明文档

// 权限验证所需要的字段是通过调用后端接口获取的。
wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的JS接口列表
});

如果微信权限校验出现问题，建议查看 附录5-常见错误及解决方法 根据自己报错的情况检查排查问题。

注意：安卓config校验成功，ios失败。解决办法，ios记录进入的第一个页面地址，调用wx.config校验时，传第一次进入页面的地址。

三、本地开发调试问题

下载微信开发者工具
因为网页授权域名和JS接口安全域名不支持ip地址，所以我们使用网页授权和SDK校验就会受到限制，有两个处理办法。
1、申请微信公众平台接口测试帐号
无需公众帐号、快速申请接口测试号
直接体验和测试公众平台所有高级接口
使用测试帐号，网页授权和sdk就不会校验，直接能成功。我们本地开发调试大部分功能。
开发完成后，后续把测试账号替换成我们的真实的微信公众号信息。
如果涉及到支付问题，测试账号是无法完成的。这个时候需要真实的微信公众号。换成真实的微信公众号，需要配置网页授权域名和JS接口安全域名，调试可能每次修改代码之后，就需要部署一次。很不方便。
2、内网穿透
使用 natapp 实现内网穿透。
在natapp平台购买隧道，配置隧道，连接到我们本地项目地址，这个时候，我们就可以通过隧道的域名配置微信公众号，配置成功后，我们可以本地开发，通过隧道域名访问我们的本地项目。实现本地调试。
推荐阅读 使用Natapp本地调试微信公众号H5