手机微信(JS-SDK)扫一扫开发详解

    手机开发,微信扫一扫功能。需求很明确,就是在微信内部操作,调用微信内置扫一扫功能!

    首先,仔细阅读微信JSSDK官方文档,并确保有效的开通微信公众平台账号,并成功设置jssdk安全域名

读完微信官网文档,其实开发就没什么可说的了,一步步来就行,直接 分享代码吧:

<script type="text/javascript">
 //alert(location.href.split('#')[0]);
 wx.config({
  debug : true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  appId : appId, // 必填,公众号的唯一标识
  timestamp : timestamp, // 必填,生成签名的时间戳
  nonceStr : nonceStr, // 必填,生成签名的随机串
  signature : signature,// 必填,签名,见附录1
  jsApiList : [ 'checkJsApi', 'scanQRCode'// 微信扫一扫接口
  ]
 // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
 });
 wx.ready(function() {
  // 9 微信原生接口 开始---------------------
  // 9.1.1 扫描二维码并返回结果
  $('#scanQRCode0').onclick ( function() {
   wx.scanQRCode({
    needResult : 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
    scanType : [ "qrCode", "barCode" ], // 可以指定扫二维码还是一维码,默认二者都有
    success : function(res) {
     var result = res.resultStr.split(',')[1]; // 当needResult 为 1
                // 时,扫码返回的结果
     $('#scanQRCode').val(result);
    }
   });
  });
  // 9 微信原生接口 结束---------------------
  // 判断当前客户端版本是否支持指定JS接口
  wx.checkJsApi({
   jsApiList : [ 'scanQRCode' ], // 需要检测的JS接口列表,所有JS接口列表见附录2,
   success : function(res) {
    // alert("wx.ready===支持指定JS接口:"+res);
    // 以键值对的形式返回,可用的api值true,不可用为false
    // 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
    var isCode = res.errMsg.split(':')[1];
    if (isCode == 'ok') {// 当前客户端支持js接口,回填标识isCode:1
     $('#isCode').val(1);
    }
   }
  });
 });
 // 初始化jsapi接口 状态
 wx.error(function(res) {
  alert("wx.error===调用微信jsapi返回的状态:" + res.errMsg);
 });
 </script>

<div class="lbox_close wxapi_form">
  <h3 id="menu-scan">微信扫一扫</h3>
  <span class="desc">调起微信扫一扫接口</span>
  <button class="btn btn_primary" id="scanQRCode0">scanQRCode(微信处理结果)</button>
  <!-- 是否支持微信js接口 -->
  <input id="isCode" name="isCode" value="" />
  <!-- 扫码结果 1:支持 -->
  <input id="scanQRCode" name="scanQRCode" value="" />
  
 </div>


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值