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

转载：https://blog.csdn.net/Start2019/article/details/128470705

查看评论

小言_互联网的博客

小言_互联网的博客

个人资料

文章分类

文章存档

阅读排行

评论排行

推荐文章

微信公众号调用扫一扫功能

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

二、获取 access_token、获取签名

1、配置 IP 白名单

2、获取 access_token、获取签名

3、wx.config

三、wx.ready、wx.error

四、整体代码

五、本地调试

* 以上用户言论只代表其个人观点，不代表本网站的观点或立场

小言_互联网的博客

小言_互联网的博客

个人资料

文章分类

文章存档

阅读排行

评论排行

推荐文章

微信公众号调用扫一扫功能

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

二、获取 access_token、获取签名

​1、配置 IP 白名单

2、获取 access_token、获取签名

3、wx.config

三、wx.ready、wx.error

四、整体代码

五、本地调试

* 以上用户言论只代表其个人观点，不代表本网站的观点或立场

1、配置 IP 白名单