微信jsSDK本地调试流程攻略（nodeJs实现获取access_token等信息）

最近想在微信平台嵌入一个H5页面的DEMO，并想要调用微信平台的jsAPI,但这一操作需要获取微信的认证，经过一天的不断调试，终于攻克了这个问题，现将思路和解决方案记录下来，以供需要的朋友参考。

使用微信js接口需要配置文件，

   wx.config({       debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。       appId: 'wx3b70375e1032772b',    // 必填，公众号的唯一标识       timestamp: data.body.timestamp, // 必填，生成签名的时间戳       nonceStr: data.body.noncestr,   // 必填，生成签名的随机串       signature: data.body.signature, // 必填，签名，见附录1       jsApiList: ['checkJsApi',           // 'chooseImage',           // 'previewImage',           // 'uploadImage',           // 'downloadImage',           // 'getNetworkType',//网络状态接口           // 'openLocation',//使用微信内置地图查看地理位置接口           // 'getLocation', //获取地理位置接口           // 'hideOptionMenu',//界面操作接口1           // 'showOptionMenu',//界面操作接口2           // 'closeWindow' ,  ////界面操作接口3           // 'hideMenuItems',////界面操作接口4           // 'showMenuItems',////界面操作接口5           // 'hideAllNonBaseMenuItem',////界面操作接口6           // 'showAllNonBaseMenuItem',////界面操作接口7           'scanQRCode'// 微信扫一扫接口       ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2   });

上面有四个必填项，接下来我们将介绍如何获取它们：

获取步骤

第一步，去微信公众平台的开发者工具界面，进入公众平台测试帐号，获取测试号信息，也就是appID 和 appsecret , 填写JS接口安全域名（设置接口访问的白名单），注意域名(必须备案)需要填写端口号，如yangqi.site:1338

第二步，获取access_token，有效期7200s

const appId = ...      // 第一步获取const appSecret = ...  // 第一步获取https.get(  'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='+ appId +'&secret=' + appSecret,  (backData) => {    backData.on('data', (d) => {      process.stdout.write(d);      accessToken = JSON.parse(d)['access-token'];      res.send(d);  // (获取到access-token)    })  })

第三步，根据第二步获取的access-token，获取ticket，有效期7200s

const accessToken = ...      // 第二步获取    https.get(  'https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token='+accessToken+'&type=jsapi',  (back) => {    back.on('data', (d) => {      res.send(d);           // 获取到ticket    })  })

第四步，根据第三步获取的ticket，获取signature。获取signature需要noncestr 和 timestamp，需要后台自动生成，与微信接口无关。

var ticket = ...    // 第三步获取const createNonceStr = () => Math.random().toString(36).substr(2, 15);const createTimeStamp = () => parseInt(new Date().getTime() / 1000) + '';const calcSignature = function (ticket, noncestr, ts, url) {   var str = 'jsapi_ticket=' + ticket + '&noncestr=' + noncestr + '&timestamp='+ ts +'&url=' + url;  // (第一步设置的域名+接口)   shaObj = sha1(str);   return shaObj;}const noncestr = createNonceStr();const timestamp = createTimeStamp();const signature = calcSignature(ticket, noncestr, timestamp, 'http://yangqi.site:1338/');  // 通过sha1算法得到res.send({  noncestr: noncestr,  timestamp: timestamp,  signature: signature,})

至此，我们就可以完整的得到wx.config中的所有内容。

但仅仅获取wx.config是不够的，我们不能每次都将调试代码放到线上，这是不可思议的，我们需要使用本地调试，电脑端还好说，修改host后使用nginx代理，但手机端不成，我们需要修改手机端网络访问的代理，这里介绍使用fiddler。

使用步骤

第一步，手机和fiddler所在电脑必须处于同一无线网中。
第二步，修改电脑的host，如 yangqi.site:1338 10.101.11.11
第三步，手机连接wifi时，设置手动代理，将代理设置为fiddler所在电脑的ip 和 fiddler Tools -> Connections -> listen port 如，8888
第四步，手机必须访问域名，而非ip才会生效。

最后感谢刘妍小盆友的鼓励，让我有了钻研下去的动力