微信公众号开发 微信支付 本地联调jssdk 提示系统错误，错误码：63002,invalid signature

需求：公众号网页调用微信js-sdk完成微信支付
遇到的问题：无法在本地进行联调

通过微信的官方文档可以看到要在项目里调
微信的api首先是需要在公众号设置里绑定安全域名的,然后需要将当前网页的URL，不包含#及其后面部分,传给后台生产wx初始化签名signature,等权限配置，才能够调起jsapi

那么我们来看一下实现步骤吧
第一步
通过npm 引入

npm install jweixin-module --save

第二步
创建jwx.js，代码如下

var jweixin = require('jweixin-module');  
import {getwxsdk} from '../api/my'
import route from '../router'
export default {  
    //判断是否在微信中    
    isWechat: function() {  
        var dev = ''
        if (window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {
            var ua = navigator.userAgent.toLowerCase();
            if (!(ua.match(/MicroMessenger/i) == "micromessenger")) {
                dev = 'h5';
            }
            else{
                dev = 'wx';
            }
           
        } else {
            dev = 'pc';
        }
        return dev;
    },  

    initJssdk:function(callback){ 
    var MODE=this.isWechat()
    if(MODE=='wx'){
          let hashurl= location.href.split('#')[0]//动态获取当前地址 必须和安全域名一致   注微信官方检测这里不能写死。
   			//异步获取wx config权限配置  
          getwxsdk({url:hashurl}).then(res=>{
                  //注入config权限配置  
                  jweixin.config({  
                      debug:false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。  
                      appId:res.data.appId, // 必填，公众号的唯一标识  
                      timestamp:res.data.timestamp, // 必填，生成签名的时间戳  
                      nonceStr:res.data.nonceStr, // 必填，生成签名的随机串  
                      signature:res.data.signature,// 必填，签名，见附录1  
                      jsApiList: [//这里是需要用到的接口名称  
                          'checkJsApi',//判断当前客户端版本是否支持指定JS接口  
                          'chooseWXPay',//微信支付  
                      ]  
                  });  
                  if (callback) {  
                      callback(res.data);  
                  }  
          })  
    }
      
    },  

    wxpay: function(data,callback) {  
        this.initJssdk(function(res) {
            jweixin.ready(function() {  
                jweixin.chooseWXPay({  
                    timestamp: data.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符  
                    nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位  
                    package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）  
                    signType:'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'  
                    paySign: data.paysign, // 支付签名  
                    success: function (res) {  
                        // console.log(res);  
                        callback(res)  
                    },  
                    fail:function(res){ 
                    
                        callback(res)  
                    },  
                    // complete:function(res){  
                    //     console.log(res)  
                    // }  
                });  
            });  
        });  
     
    },
  
}  

第三步 mian.js引入jwxin.js 并挂载到vue的原型就可以通过$jwx.的方式来调用方法

import jwx from './utils/jwx'
Vue.prototype.$jwx = jwx

但是问题来了 后端要拿到你当前页面的url生成签名，然后与安全域名比对 在线上环境是ok的，在本地就会题提示系统错误63002 invalid signature 签名不对
那么我在本地怎么进行联调呢。
首先想到的是改本地hosts文件 文件目录 C:\Windows\System32\drivers\etc
将你的本地ip 映射到你的安全域名


然后打开cmd 刷新dns

并且清掉浏览器缓存 到这一步还没有结束
我们还要在（vue.config.js）webpack配置中将本地项目中的host改为线上的安全域名，并将端口号改为80

  devServer: {
        host:'xxx.com',
        port:80,
        open: false,
        https:false,
        disableHostCheck: true

      },

然后重新运行项目就可以了 在微信开发者工具直接访问就可以进行本地调试了，这时就可以调起微信api了