微信扫一扫功能JSSDK的使用

引入微信JSSDK

1.步骤一：绑定域名
在公众号后台“设置—公众号设置—功能设置—JS接口安全域名”设置域名。
2.步骤二：引入JS文件
有2种引入方式:
(1)在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js
(2)使用 AMD/CMD 标准模块加载方法加载，在项目路径下执行“npm i -S weixin-js-sdk”安装依赖的包。然后在页面里按照路径按装依赖的位置，使用“import wx from 'weixin-js-sdk'语句”引入。
3.步骤三：通过config接口注入权限验证配置

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名
    jsApiList: [] // 必填，需要使用的JS接口列表
});

config里的appId，timestamp，nonceStr，signature均有前端传给后台一个要使用JSSDK的当前页路由传递给后台，后台按照签名生成算法返回对应参数值。注意签名用的url必须是调用JS接口页面的完整URL，如果是动态的可以通过以下语句获取。注意不要对url进行encodeURIComponent编码，微信在附录里提到要对url进行编码，但我在项目里编码后会提示“invalid signature”签名错误。不编码就能拿到正常的签名，我目前也没找到原因。其它签名错误原因可以按照开发文档-附录5常见错误及解决方法来一一排除。

var url=window.location.href.split('#')[0];

生成jsApiList写上当前页面要使用的接口名称，比如微信的扫一扫功能接口名为“scanQRCode”，如需要其它接口则可以按需配置。
传送门:所有JS接口列表
4.步骤四：通过ready接口处理成功验证

wx.ready(function(){
    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

5.步骤五：通过error接口处理失败验证

wx.error(function(res){
    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。    
});

调起扫一扫接口

 wx.scanQRCode({
                needResult: 1,
                desc: 'scanQRCode desc',
                success: function(res) {
                var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果

                if (typeof(result) != 'undefined') {
                       if (result.indexOf(",") > 0) {
                                    result = result.split(',')[1];
                                    result = result.replace(/[^a-z\d]/ig, "");
                                }
                                _self.$router.push({
                                    name: 'BrandIntroduction',
                                     params:{
                                      traceCode: result
                                    }
                                })
                            }
                        }
                    });

我们的业务需要扫码后拿到 res.resultStr后，调转项目的某个页面，所以needResult设为1。如果needResult设置为0扫码成功后微信处理，不会跳转到自己写的success回调里面。