最近微信公众号网页开发项目遇到一个问题：

在吊起扫一扫功能的时候，Android端正常，iOS端总是提示config：fail 或者签名失败（sigxxxxxx）

Vue的项目，前几个类似的项目没遇到这种问题。这次微信配置和吊起的代码也是同事考培来的。

通过调试还有微信提供的签名验证工具都没问题；

因为Android端正常，说明逻辑是正确的，签名失败配置失败说明iOS端的参数是有问题的。

直接搜问题搜不到，最后从侧面看了下history模式，发现：

在路由配置的时候，即项目router下的路由文件中：

export default new Router({
  mode:'history',
     
     // ....省略不用代码

})

开启了history模式，注释掉后iOS吊起扫一扫正常；

因为history模式造成了，传入后台的url不对导致微信配置信息返回不正确，所以显示签名失败；

除了扫一扫外，分享等功能应该也会有这样的问题；

下面记录下weixin-js-sdk的配置和功能使用，以扫一扫为例：

步骤一：绑定JS接口安全域名

在'微信公众平台->设置->公众号设置->功能设置'中, 填写JS接口安全域名. 设置后, 公众号开发者才能在该域名下调用微信开放的JS接口. 

注：后台的端口号必须以 80开头；微信官方要求；

步骤二：引入JS文件

在项目根目录下的index.html文件中直接引入：

<!-- WXJSAPI -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

注：如果你的页面启用了https，务必引入 https://res.wx.qq.com/open/js/jweixin-1.0.0.js ，否则将无法在iOS9.0以上系统中成功使用JSSDK

步骤三：配置微信config

然后在你需要调用微信功能的界面中注册即可，如果项目需要多次调用或者需要微信多个功能，可以全局注册；


下面以微信扫一扫为例：

在界面初始化时注册wx.config：

// 初始化界面调用
// 传入的参数是要使用的功能对应的接口
// 其他功能对应的名字在官方文档中找（下面的是扫一扫）
mounted() {
            this.RegisterWxJsApi(["scanQRCode"]);
}

// 先通过后台接口获取微信配置的一些信息，一些保密或者动态信息放在后台处理是正常逻辑
// 后台具体逻辑在下面后台部分记录
// 下面的请求参数是按照ReliableA_Wechat项目走的，因为是公司文档，所以参数注释掉了
RegisterWxJsApi: function(jsApiList) {
    var url = "/后台配置信息获取接口";
    var req = {
        AppType: "xxxx",
        RequestUrl: window.location.href.split('#')[0]
    };
    this.$http.get(url, {
        params: req
    }).then(response => {
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: response.data.AppId, // 必填，公众号的唯一标识
            timestamp: response.data.TimeStamp, // 必填，生成签名的时间戳
            nonceStr: response.data.NonceStr, // 必填，生成签名的随机串
            signature: response.data.Sign, // 必填，签名，见附录1
            jsApiList: jsApiList // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });
    });
}

 步骤四：吊起微信功能

按钮点击时吊起微信扫一扫

// 点击事件
clickEvent: function() {
                var _this = this;
                wx.ready(function() {
                    wx.scanQRCode({
                        needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                        scanType: ["barCode"], // 可以指定扫二维码还是一维码，默认二者都有
                        success: function(res) {
                            var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                            var resultArr = result.split(",");
                            _this.Bind(resultArr[1]);
                        }
                    });
                    wx.error(function(res) {
                        var str = JSON.stringify(res);
                        alert(str);
                    })
                });
            },