jssdk.php扫一扫,微信扫一扫功能JSSDK的使用

1.引入微信JSSDK

绑定域名 在公众号后台“设置—公众号设置—功能设置—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可以在这里更新签名。

});

6.调起扫一扫接口

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回调里面。