公众号实现扫一扫

最新推荐文章于 2023-08-21 13:49:06 发布

brake_lzk

最新推荐文章于 2023-08-21 13:49:06 发布

阅读量1.2k

点赞数

分类专栏：公众号 html js 文章标签：公众号 html js

本文链接：https://blog.csdn.net/brake_lzk/article/details/81018363

版权

html 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

公众号

1 篇文章 0 订阅

订阅专栏

 
  <!DOCTYPE html 
  > 
 
  < 
  html 
  lang= 
  "en" 
  > 
 
  < 
  head 
  > 
 
  < 
  meta 
  charset= 
  "UTF-8" 
  > 
 
  < 
  meta 
  name= 
  "viewport" 
  content= 
  "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" 
  > 
 
  < 
  title 
  >首页 
  </ 
  title 
  > 
 
  < 
  link 
  rel= 
  "stylesheet" 
  href= 
  "../assets/mui/css/mui.min.css" 
  > 
 
  < 
  script 
  src= 
  "../assets/zepto/zepto.min.js" 
  > 
  < 
  / 
  script 
  > 
 
  < 
  script 
  src= 
  "../assets/mui/js/mui.min.js" 
  > 
  < 
  / 
  script 
  > 
 
  < 
  script 
  src= 
  "../assets/artTemplate/template-native.js" 
  > 
  < 
  / 
  script 
  > 
 
   <!-- 上边引用根据自己情况引用 --> 
  
     <!-- 微信公众号接口的js -->

  < 
  script 
  src= 
  " http://res.wx.qq.com/open/js/jweixin-1.0.0.js" 
  > 
  < 
  / 
  script 
  > 
 
  </ 
  head 
  > 
 
  < 
  body 
  > 
 
  < 
  header 
  class= 
  "mui-bar mui-bar-nav" 
  > 
 
  < 
  h1 
  class= 
  "mui-title" 
  >标题 
  </ 
  h1 
  > 
 
  </ 
  header 
  > 
 
  < 
  div 
  class= 
  "mui-content" 
  > 
 
  <!-- 内容区 --> 
 
  < 
  div 
  id= 
  "scanQRCode" 
  type= 
  "button" 
  >扫一扫 
  </ 
  div 
  > 
 
  </ 
  div 
  > 
 
  </ 
  body 
  > 
 
   < 
   script 
   > 
  
   $( 
   function(){ 
  
       var 
   urld = 
   window. 
   location. 
   href. 
   split( 
   '#')[ 
   0];//获取当前页面地址 
  
       console. 
   log( 
   urld) 
  
       var 
   data= 
   null; 
  
       $ 
   . 
   ajax 
   ({// 
   获取 
   公众号的唯一标识、生成签名的时间戳、生成签名的随机串 
  
           type: 
   "post", 
  
           url: 
   "/wx/jsapiTicket", 
   //自己填写请求地址 
  
           contentType: 
   'text/plain', 
  
           data:urld, 
  
           async: 
   false, 
  
           success 
   : 
   function( 
   result){ 
  
               console. 
   log('后台返回数据:', 
   result); 
  
               data= 
   result. 
   data 
  
            } 
  
        }) 
  
       console. 
   log( 
   data) 
  
       wx. 
   config({//调用公众号接口 
  
           // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数， 
  
           //可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 
  
           debug: 
   false, 
  
           // 必填，公众号的唯一标识 
  
           appId: 
   data. 
   appId, 
  
           // 必填，生成签名的时间戳 
  
           timestamp:data. 
   timestamp, 
  
           // 必填，生成签名的随机串 
  
           nonceStr:data. 
   noncestr, 
  
           // 必填，签名，见附录1 
  
           signature:data. 
   signature, 
  
           // 必填，需要使用的JS接口列表，所有JS接口列表见附录2 
  
           jsApiList : [ 
   'checkJsApi', 
   'scanQRCode' ] 
  
        }); 
  
       wx. 
   error( 
   function( 
   res) { 
  
   alert( 
   "出错了：" + 
   res. 
   errMsg); 
  
   //这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误， 
  
   // 然后根据微信文档查询即可。 
  
        }); 
  
       wx. 
   ready( 
   function() { 
  
           wx. 
   checkJsApi({ 
  
               jsApiList : [ 
   'scanQRCode'],//调用扫一扫 
  
               success 
    : 
   function( 
   res) { 
  
                } 
  
            }); 
  
       //点击按钮扫描二维码 
  
       document. 
   querySelector( 
   '#scanQRCode'). 
   onclick = 
   function() { 
  
           wx. 
   scanQRCode({ 
  
               needResult : 
   1, 
   // 默认为0，扫描结果由微信处理，1则直接返回扫描结果， 
  
               // 可以指定扫二维码还是一维码，默认二者都有     
  
               scanType : [ 
   "qrCode", 
   "barCode"],  
  
               success 
    : 
   function( 
   res) { 
  
                   console. 
   log('扫码返回结果', 
   res) 
  
                   var 
   keyword = 
   res. 
   resultStr; 
   // 当needResult 为 1 时，扫码返回的结果 
  
                  //因为我这边是扫描后有个链接，然后跳转到该页面 
  
                   window. 
   location. 
   href = 
   "/view/scanCode?keyword="+ 
   keyword; 
  
                } 
  
            }); 
  
        }; 
  
        }); 
  
    }) 
  
   < 
   / 
   script 
   > 
  
  </ 
  html 
  >