在微信项目的开辟中，常常须要对微信jssdk供应的接口举行调试，比方说灌音, 分享 ,上传图象等接口，然则微信jssdk要求绑定平安域名才运用其供应的一系列功用 , 而在开辟环境中运用localhost或许当地ip没法完成域名的认证和绑定, 所以没法在当地调试 。固然有一种必不得已要领 ，就是在当地开辟完 ，打包发到公司的测试效劳器上 ，应用测试效劳器认证后的域名举行调试，每次修改，调试都要发一遍测试，明显这类要领异常贫苦且很不科学，所以这篇文章就针对这个题目引见一下怎样应用ngrok和express处理开辟环境中微信接口的调试题目。
 
一：起首引见一下 ngrok，ngrok重要的功用就是将当地的ip映照到外网 ，而且分派给你一个可用的域名，经由历程这个域名能够让外网用户翻开你的当地的web效劳，运用起来也很简朴，官网也有文档也有细致引见 。这里简朴的引见一下运用要领，起首去ngrok 的官网下载ngrok的对应的客户端 ，而且注册用户 ，能够经由历程你的github账号或许google账号注册 ，注册完成后再个人中间翻开auth选项，复制这里的authtoken，以下图：

(这里就以window版本为例)，然后下载完成解压，会有一个ngrok.exe文件，双击运转会涌现下面的敕令行：
起首我们须要完成ngrok的token认证，不然运转会发作毛病，运转一下敕令ngrok authtoken ***************** //*号就是个人中间中的token ，复制下来就能够了认证完成后，就能够操纵了，上图中的examples就是一些经常使用的示例敕令，我们用到的就是ngrok http，背面接的参数就是你当地web效劳的端口号，运转后会分派一个外网域名，经由历程这个域名就能够接见到你的当地web效劳， 
不过，这个域名在重启后就会从新分派一个新域名，致使重启后须要去微信民众平台从新设置一下平安域名和token认证 。比较遗憾的是在ngrok1.0的时刻能够经由历程 ngrok http subdomain=***(自定义域名) 80 牢固每次的分派的域名，然则在2.0版本后，免费用户没法牢固域名，只要付费用户才能够，虽然每月只须要$5,然则关于不是常常测试的人来讲照样完整没有购置欲望，关键是彷佛只支撑visaa……。不过关于想要免费牢固域名的胖友来讲，处理办法照样有的，国内有个sunny-ngrok ，能够免费要求一个自定义的牢固域名 ，详细教程能够去其官网检察，也不是很庞杂，有题目话能够在批评内里问我，就不细致讲了。固然想要完成外网映照的话另有许多其他要领，比方运用npm装置的Localtunnel和花生壳等等，能够自行相识一下。

  二：取得域名后，接下来我们要做的就是运用该域名完成微信平安域名绑定啦，我们能够去微信民众平台要求一个测试号，不过这时刻填写时没法经由历程的，由于微信认证须要具有一个本身的效劳器准确响应设置要求

测试号要求的时刻填写设置信息的url，微信效劳器会发送一个get要求到这个地点上，get要求会照顾一些参数，我们须要用这些参数天生一个署名和微信参数的署名举行对照，对照胜利接口才会设置胜利。  由于微信认证须要具有一个本身的效劳器 ，所以这里我们就须要用到express搭建一个简朴的效劳器，用来完成微信的token认证和天生signature（署名），搭建的历程也很简朴，参照express中文文档，下面就贴一下官网的步骤：

装置完成事后,进入myapp目次，建立一个app.js的文件 ，

var express = require('express');
var crypto = require('crypto') //运用npm装置后引入，用来天生署名
var http = require('request') //express的中间件，运用npm装置，用来发出要求
var jsSHA = require('jssha')//jssha是微信官网供应的nodejs版本署名算法，能够去官网下载官网的sample包
var app = express();
app.use(express.static('./review'))

app.get('/weixin',function (req, res) {//这个get接口就是测试号填写的接口，用来响应微信效劳器的要求
    var token = 'weixin' //注重这里填写token，与微信测试号要求时刻填写的token要保持一致    
    var signature = req.query.signature;
    var timestamp = req.query.timestamp;    
    var nonce = req.query.nonce;    
    var echostr = req.query.echostr;   
     /*  加密/校验流程以下： */   
     //1. 将token、timestamp、nonce三个参数举行字典序排序   
     var array = new Array(token,timestamp,nonce);   
     array.sort();   
     var str = array.toString().replace(/,/g,"");      
    //2. 将三个参数字符串拼接成一个字符串举行sha1加密    
    var sha1Code = crypto.createHash("sha1");    
    var code = sha1Code.update(str,'utf-8').digest("hex");   
     //3. 开辟者取得加密后的字符串可与signature对照，标识该要求来源于微信    
    if(code===signature){        
        res.send(echostr)   
    }else{
        res.send("error");
    }  
});
var server = app.listen(80, function () {
    var host = server.address().address;
    var port = server.address().port;
    console.log('Example app listening at http://%s:%s', host, port);
});

建立完成后，运转node app.js效劳器就开启好了，上面要注重的几点就是：
1：jssha不能用npm装置，由于npm装置的运转时刻会报Chosen SHA variant is not supported，必需运用官网供应的sample包，下载解压后，挑选node版本，翻开后将node_module内里jssha文件复制到项目内的node_module内里即可；
2：这里的token值须要和微信测试号中填写的token值一致；如今我们就能够最先填写测试号的参数了，填写完成微信效劳器就会发送要求给你填写的接口了，都准确响应的话就会弹出设置胜利。
  固然到这还没有结束，由于前端想要挪用jssdk的接口还须要经由历程接口要求完成权限设置，这里人人能够看一下微信jssdk的申明文档，详细援用步骤这里就不赘述了，接口要求也许以下：

这个接口重要就是提交当前的url要求效劳端拿到响应的参数，完成权限设置，所以在express中还须要在写一个响应post要求的接口，这个接口做的重要的事情就是拿appid和appSerect（测试号供应）去要求微信供应的接口天生access_token，然后拿这个access_token再去要求微信供应的接口天生tiket，关于这两者文档上都有细致申明。末了天生署名，代码以下

// noncestr天生var createNonceStr = function() {
    return Math.random().toString(36).substr(2, 15);
};
// timestamp时候戳天生var createTimeStamp = function () {
    return parseInt(new Date().getTime() / 1000) + '';
};
//猎取tiket
var getTiket= function (data) { //经由历程access_token猎取tiket
   return new Promise((reslove,reject)=>{
        http.get(`https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${data}&type=jsapi`,
         function(err,res,body){
             if(res.body.tiket){
                resoleve(res.body.ticket)
             }else{
                reject(err)
             }         })      })}
// 盘算署名要领
var calcSignature = function (ticket, noncestr, ts, url) {//运用jssha
    var str = 'jsapi_ticket=' + ticket + '&noncestr=' + noncestr + '&timestamp='+ ts +'&url=' + url;
    shaObj = new jsSHA(str, 'TEXT');    return shaObj.getHash('SHA-1', 'HEX');
}
//返回给前端设置信息的post接口
app.post('/weixin',function(req,res,next){
     let appId = '******'
     let appSecret = '******'
     let url = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appId}&secret=${appSecret }`
     http.get(url, function (err, response, body) {
       getTiket(response.body).then(resolve=>{
          let tiket = resolve//tiket
          let nonceStr = createNonceStr()//随机字符串
          let timeStamp = createTimeStamp()//时候戳
          let signature = calcSignature(tiket,nonceStr,timeStamp,req.body.url)
          let obj = { //将前端须要的参数返回
            data:{
                appId:appId,
                timestamp:timeStamp,
                nonceStr:nonceStr,
                signature:signature
            } 
         } 
         res.end(JSON.stringify(obj))
        }).catch(err=>{})
          res.end(JSON.stringify(err))
     });})

这里要注重的是微信返回的access_token 和tiket的都有7200s的有用期，所以要举行缓存，我的代码中没有写缓存的操纵代码了，人人有两种要领：
1.拿到access_token和tiket后，直接写在变量中存下来，有用期内就不必继承要求接口了，直接举行署名操纵就能够了；逾期后，在要求一次就好了，虽然这类要领有点笨，不过好歹有用期还算长。
2.在效劳器拿到access_token和tiket后，写入当地的json文件中，详细步骤也不赘述了，然后推断是不是逾期，逾期后就从新要求，没逾期就直接读取json文件中的数据举行署名。
  末了呢，有两种挑选：第一：把我们的前端项目实行npm run build后，把dist文件放入我们的效劳器文件夹中，能够直接用express的static中间件app.use(express.static('./dist'))然后微信开辟者东西，输入分派的域名翻开我们的项目，如许我们不必设置代办了，不过须要实行build，项目大一点的话照样有点浪费时候的；
第二：就是为我们的开辟环境在要求一个域名，由于如今脚手架的热更新实在就是启动了一个webpack-dev-sever的微效劳器，要求域名是后填写开辟的端口号就能够了，使得开辟地点和我们的效劳器地点的二级域名雷同，不过关于效劳器的接口，开辟环境须要设置一下代办，而且热更新也会失效，须要手动革新一下，不过相关于第一种要领可能会更好一点。两种要领运转胜利后检察发出要求假如设置胜利，控制台会涌现设置胜利的信息以下：
然后我们就能够兴奋的在运用jssdk的接口了，再也不求后端，能够本身在当地测试好一切的接口了，且不是美滋滋。
  写的历程当中已只管细致申清楚明了，不过难免会遗漏一些细节题目，迎接指正和议论。