手把手教你调用微信扫一扫，三分钟包会_前端人的博客-CSDN博客_调用微信扫一扫

第一次搞公众号，还以为跟上回调用企业微信扫一扫一样。。。调起扫一扫功能的过程自然是不同的，要注意的地方还挺多，记录一下。

其实，在使用微信 JS-SDK 的前提是，你有微信小程序或微信公众号或企业微信的管理权限，否则，微信 JS-SDK 提供的这些功能都是用不了的。

一、阅读 jsdk 说明文档，绑定域名，引入资源

二、获取 access_token、获取签名

1、配置 IP 白名单

2、获取 access_token、获取签名

3、wx.config

三、wx.ready、wx.error

四、整体代码

一、阅读 jsdk 说明文档，绑定域名，引入资源

微信 JS-SDK 是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。

通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。

阅读 jsdk 说明文档

概述 | 微信开放文档

阅读下面画红框部分。

绑定域名、引入文件：

1、绑定域名：把自己在开发过程中调用的接口，将接口的域名在公众号中进行配置，下载校验文件部署到域名下。

2、引入 JS 文件：如上操作就行了 <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>，你也可以下载保存到本地再去引入。

二、获取 access_token、获取签名

在 JSSDK 使用步骤中，第三步开始之前，是要先获取签名信息的，而获取签名信息之后要先获取 access_token。在官方文档目录中的第 16 条有说明：概述 | 微信开放文档

1、配置 IP 白名单

在获取 access_token 之前是要配置 IP 白名单的，不配置就会报如下错误：{"errcode":48002,"errmsg":"api forbidden"}

这里获取 access_token 和获取签名我都交给后台去做了，让他给我返回 wx.config 需要的一堆东西，所以IP白名单我只要配置他的 IP 就好了。

2、获取 access_token、获取签名

因为我把获取 access_token 和获取签名交给后台了，所以这一步可以不用看，大致了解一下。

获取 access_token：

GET请求调用接口：https://api.weixin.qq.com/cgi-bin/token，参数：?grant_type=client_credential&appid=公众号Appid/开发者id&secret=公众号AppSecret

如上可以拿到 AppID 和 AppSecret，如果忘记 AppSecret，需要重置，里面会生成 AppSecret，复制保存。其中还有 校验文件，这个文件也最好让后台部署到你调用接口上线的域名地址中。

获取签名：

用第一步拿到的access_token 采用 http GET 方式请求获得 jsapi_ticket（有效期7200秒，开发者必须在自己的服务全局缓存jsapi_ticket）：https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

完成以上两步，就能拿到 wx.config 中需要的签名信息了。

3、wx.config

wx.config 时 appId 需填入非个人主体的已认证小程序，不需计算签名，timestamp、nonceStr、signature 填入非空任意值即可。

接上面引入 JSDK 文件后的步骤三：

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

三、wx.ready、wx.error

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

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

四、整体代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=Yes">
  <title>微信扫码</title>
</head>
<body>
  <div class="lbox_close wxapi_form">
    <!-- <h3>微信扫一扫</h3> -->
    <input id="codeValue">
    <button id="scanQRCode">扫码</button>
  </div>
</body>
</html>
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script src="../js/jquery.min.js"></script>
<script>
  $(document).ready(function () { 
    $.get("后台接口，返回签名信息", function(obj){
      wx.config({
        beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: obj.appId, // 必填，公众号的唯一标识
        timestamp: obj.timestamp, // 必填，生成签名的时间戳    <%= Html.Encode(ViewData["timestamp" ]) %>
        nonceStr: obj.nonceStr, // 必填，生成签名的随机串
        signature: obj.signature, // 必填，签名
        jsApiList: ['checkJsApi','scanQRCode'] // 必填，需要使用的JS接口列表, 这里只需要调用扫一扫
      }); 
    });   
    
    wx.ready(function(){
      wx.checkJsApi({  //判断当前客户端版本是否支持指定JS接口
        jsApiList: ['scanQRCode'],
        success: function (res) {// 以键值对的形式返回，可用true，不可用false。如：{"checkResult":{"scanQRCode":true},"errMsg":"checkJsApi:ok"}
            if(res.checkResult.scanQRCode != true){
                alert('抱歉，当前客户端版本不支持扫一扫');
            }
        },
        fail: function (res) { //检测getNetworkType该功能失败时处理
            alert('checkJsApi error');
        }
      }); //wx.checkJsApi结束
      
      // 调起企业微信扫一扫接口
      wx.scanQRCode({
        desc: 'scanQRCode desc',
        needResult : 1,  // 默认为0，扫描结果由企业微信处理，1则直接返回扫描结果，
        scanType : [ "qrCode", "barCode" ], // 可以指定扫二维码还是一维码，默认二者都有
        success : function(res) {
            console.log("调用扫描成功",res);
            var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
            $("#codeValue").val(result);//显示结果
            // alert("扫码结果为：" + result);
        },
        error:function(res){
            console.log(res)
            if (res.errMsg.indexOf('function_not_exist') > 0) {
                alert('版本过低请升级')
            }
        }
      }); //wx.scanQRcode结束

    }); //wx.ready结束
    wx.error(function(res){
      alert("错误信息:"+JSON.stringify(res));
    });        
  }); 

  //点击按钮进行扫码
  $("#scanQRCode").click(function(event){
    wx.ready(function(){
      wx.scanQRCode({
          desc: 'scanQRCode desc',
          needResult : 1,  // 默认为0，扫描结果由企业微信处理，1则直接返回扫描结果，
          scanType : [ "qrCode", "barCode" ], // 可以指定扫二维码还是一维码，默认二者都有
          success : function(res) {
              console.log("调用扫描成功",res);
              var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
              $("#codeValue").val(result);//显示结果
              alert("扫码结果为：" + result);
          },
          error:function(res){
              console.log(res)
              if (res.errMsg.indexOf('function_not_exist') > 0) {
                  alert('版本过低请升级')
              }
          }
      }); //wx.scanQRcode结束
    }); 
  });

</script>

五、本地调试

本地调式不方便，白名单设置的是服务器 ip（本地 ip 是动态的不能设置），得在服务器调接口拿 token，把 token 拿到本地生成验证签名，然后再把参数拿到服务器上调用微信的测试接口看两边的签名是否一致，就可以知道代码有没有问题。作者：邓子悦 https://www.bilibili.com/read/cv18760466/ 出处：bilibili