点此查看 微信公众号/微信网页/微信支付/企业微信/小程序开发合集及源代码下载

1. 背景

我们可以在微信网页调起扫一扫功能，可以识别一维码、二维码的内容，然后根据扫码结果实现我们的业务逻辑。

2. 代码

代码如下，需要注意的是needResult参数最好设置为1，也就是扫码的结果我们自己处理。如果设为0，微信处理的话，我们就不好自定义业务逻辑处理扫码结果了。

另外，扫码的结果存储在res.resultStr中。

<input type="button" value="扫一扫" onclick="scan()"> |<script src="http://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script><script>var apiList = [ 'checkJsApi','scanQRCode' ];$(function() {// 向后端请求配置信息$.ajax({type : "GET",url : "/wx-server/wxJsapiSignature",data : {url : location.href.split('#')[0]},dataType : "json",success : function(res) {configInfo(res);}});});// 通过wx.config注入配置信息function configInfo(res) {wx.config({debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId : res.appId, // 必填，公众号的唯一标识timestamp : res.timestamp, // 必填，生成签名的时间戳nonceStr : res.nonceStr, // 必填，生成签名的随机串signature : res.signature,// 必填，签名jsApiList : apiList// 必填，需要使用的JS接口列表});// 处理成功后回调wx.ready(function() {console.log("处理成功:");wx.checkJsApi({jsApiList : apiList,success : function(checkRes) {console.log("checkRes:", checkRes);}});});// 处理失败后回调wx.error(function(err) {console.log("处理失败:", err);});}// 扫一扫function scan() {wx.scanQRCode({needResult : 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，scanType : [ "qrCode", "barCode" ], // 可以指定扫二维码还是一维码，默认二者都有success : function(res) {alert(res.resultStr);}});}</script>

3. 测试

使用微信客户端，点击扫一扫，我自己制作了一个二维码内容为1234，扫码结果如下，可见扫码成功。