本地开发微信网页时如何调试微信sdk

在微信开发文档中说到，引入/调用微信sdk相关api的网页，都需要在公众号平台配置js接口安全域名。否则无法调试/调用。那么我们如果是在开发阶段调试不可能开发到一半然后部署到指定的js接口安全域名下，所以我们在本地应该如何去调试呢.
这就又要用到微信公众平台提供的公众平台测试账号了，我们首先在公众平台的开发者工具中找到公众平台测试账号然后点进去，就可以看到下面这个界面

//好的到这一步我们先暂停一下，建议大家先去看看官网。官网中写到引入微信sdk的网页都需要引入微信sdk的脚本地址，然后在网页中调用下面这个方法，这个方法就是用来判断这个网页有没有使用微信sdk的权限.
wx.config({
debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
appId: ‘’, // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: ‘’, // 必填，生成签名的随机串
signature: ‘’,// 必填，签名
jsApiList: [] // 必填，需要使用的 JS 接口列表
});
//我们可以看到这里需要使用到appid作为参数，因为我们是在本地测试用就用测试号的这个appid

//像timestamp和nonceStr，signature一般由后端生成然后前端调接口获取，但是我们也需要知道后端是如何生成这三个东西的。
后端首先可以生成一个任意时间戳作为timestamp的值，生成一个任意的字符串作为nonceStr的值。但是注意的来了，这个signature参数的值就不能乱写了，这个就比较麻烦。首先需要调用微信对应接口获取access_token，然后再调取微信对应接口获取jsapi_ticket，再通过微信官网规定的签名算法最终才能获取signature
首先我们如何获取access_token呢，微信提供了一个get请求的接口
https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
我们可以看到该接口需要穿三个参数，一个grant_type，一个appid，一个secret。这个grant_type的值是固定为client_credential，appid就是我们上图中测试号的appid和测试号的appsecret(如果是上线之后就要改成我们公众号真实的appid和appsecret)。

获取到access_token后再使用get请求调用微信提供的下面这个接口来获取jsapi_ticket
https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
我们可以看到这个接口也需要传入两个参数，一个access_token，一个type。首先accsess_token参数的值肯定就是我们上一个接口获取的access_token，而这个type的值就是固定的jsapi

获取到jsapi_ticket后，然后通过微信官网的签名算法来生成signature。大概就是将刚刚后端生成的timestamp，nonceStr，和填写的jssdk接口安全域名地址(这个地址就是我们调用微信sdk的网页地址，但是由于我们是本地网页开发测试的话我们使用的是测试号，所以我们在测试号的js接口安全域名地址中可以填写本地ip，如果是上线之后就需要改成公众号中填写的真实的js安全接口域名)，以及刚刚获取的jsapi_ticket，这四个拼接成一个字符串然后通过sha1加密得出一个加密后的字符串，这个加密后的字符串就是signature这个的值了。
参考官方文档地址:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62
官方文档截图:

总结一句话，如果需要在本地测试微信sdk或者微信授权之类的接口，就必须使用微信公众平台提供的公众测试账号，因为公众测试账号提供的测试公众号可以填写本地ip作为js接口安全域名，进而能够在本地开发微信网页时进行微信sdk或微信授权等一些调试。等本地微信网页开发完毕，上线后。我们再进入公众平台，配置一下我们自己公众号的js接口安全域名为微信网页上线后的真实域名

微信sdk使用典例