JS端如何接入微信扫一扫功能

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第13天，点击查看活动详情

最近公司需要接入微信扫一扫支付功能，小白之前没有做过，心里没底，让我们跟着小白一起来看看微信扫一扫支付功能怎么做呢。

首先，我们打开微信公众平台开发者文档，在侧边栏找到——微信JS-SDK说明文档

第一步，阅读文档第一部分——JSSDK使用步骤

• 首先，我们需要有一个自己的公众号；
• 公众号需要绑定安全域名（使用支付类接口，需要保证支付目录在该域名下）
• 在调用微信接口的页面，引入微信的js文件——res.wx.qq.com/open/js/jwe…（注意区分http和https）
• 使用wx.config接口，注入权限验证配置参数，官方文档是这样使用的：

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

• 使用wx.ready(function(){})、wx.error(function(res){}接口，处理校验结果，ready处理成功结果，error处理失败结果

wx.config中的signature参数怎么获取

• access_token有效期7200秒，获取access_token: api.weixin.qq.com/cgi-bin/tok…
• jsapi_ticket的有效期为7200秒，通过access_token来获取，获取jsapi_ticket: api.weixin.qq.com/cgi-bin/tic…
• signature: sha1(jsapi_ticket={jsapi_ticket}&noncestr={随机字符串}&timestamp={时间戳秒}&url={当前网页的URL，不包含#及其后面部分})

接入微信扫一扫功能

官方文档是这样使用的：

wx.scanQRCode({
    needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
    scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
    success: function (res) {
    var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
}
});

这里要注意一下，我们接入的是扫一扫功能，而非支付功能，微信的支付功能是使用的wx.chooseWXPay这个接口，这里不赘述