H5实现微信SDK二维码扫描

前端调用微信JSDK实现二维码扫描功能

页面中引入JS的代码：


<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript">function initWeiXinJsSdk(){wx.config({debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId : '${appId}',//$("#appId").val(), // 必填，企业微信的cropIDtimestamp : '${timestamp}',//$("#timestamp").val(), // 必填，生成签名的时间戳nonceStr : '${nonceStr}',//$("#nonceStr").val(), // 必填，生成签名的随机串signature : '${signature}',//$("#signature").val(),// 必填，签名jsApiList : [ 'scanQRCode', 'getLocation','chooseImage','uploadImage','downloadImage']// 必填，需要使用的JS接口列表，所有JS接口列表见附录2});wx.error(function(res) {console.log(res);//alert(res);// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。});}/*** 初始化坐标* @returns*/function initMapLocation(callback){//初始化坐标wx.getLocation({type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'success: function (res) {var lon = res.longitude; //经度var lat = res.latitude;    //纬度var errmsg = res.errMsg;var errResult = errmsg.split(':');if (errResult[1] == "ok") {LocationChange(lon,lat,function(result){callback(result);});}},cancel: function (res) {$.toptip('用户拒绝授权获取地理位置', 'error');var result = {'code':'01', 'msg':'用户拒绝授权获取地理位置', 'lng': 0, 'lat': 0};callback(result);}});}/*** 坐标转换（高德坐标）* @param lon 经度* @param lat 纬度* @returns*/function LocationChange(lon,lat,callback) {var map = new AMap.Map('app_index_map', {resizeEnable: true,zoom: 11});$.ajax({type: "get",url: "http://restapi.amap.com/v3/assistant/coordinate/convert?key=1b718b2826abfae7be353f5f27f89b7b&locations=" + lon + "," + lat + "&coordsys=gps",async: true,dataType: "json",success: function (res) {var latlng = res.locations;var locations = latlng.split(',');var result = {'code':'00', 'msg': '定位成功', 'lng': locations[0], 'lat': locations[1], 'map':map};addMarker(map, result);callback(result);},error:function(res){var result = {'code':'01', 'msg': '定位失败', 'lng': 0, 'lat': 0, 'map':map};callback(result);}});}/*** 标记地图位置* @param map* @param result* @returns*/function addMarker(map, result) {var marker = new AMap.Marker({position: [result.lng, result.lat]});marker.setMap(map);/* var circle = new AMap.Circle({center: [result.lng, result.lat],radius: 100,fillColor: "#000000", //填充颜色fillOpacity: 0.2,//填充透明度strokeColor: "#000000",//线颜色strokeOpacity: 0.6,//线透明度strokeWeight: 0,//线宽strokeStyle: "solid"//线样式});circle.setMap(map); */map.setFitView();}
</script>

扫描事件触发

<i class="scan-font iconfont icon-sao" id="icon-saoma"></i>

()(function(){initWeiXinJsSdk();
});wx.ready(function () {document.querySelector('#icon-saoma').onclick = function() {wx.scanQRCode({desc : 'scanQRCode desc',needResult : 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,scanType : [ "qrCode", "barCode" ], // 可以指定扫二维码还是一维码,默认二者都有success : function(res) {var url = res.resultStr;var errmsg = res.errMsg;var errResult = errmsg.split(':');if (errResult[1] == "ok") {//获取设备SN码if(url.indexOf('=')==-1){$("#txtSnCode").val($.trim(url));}else{var code = $.trim(url.substring(url.indexOf('=') + 1,url.length));$("#txtQrCode").val(code);//二维码值$("#txtSnCode").val('');}$("#signboard").val("1");//一些业务操作的方法//   do somthing....} else {//获取失败}},error : function(res) {if (res.errMsg.indexOf('function_not_exist') > 0) {alert('版本过低请升级');}}});};});

H5实现微信SDK二维码扫描相关推荐

QRCode 扫描二维码、扫描条形码、相册获取图片后识别、生成带 Logo 二维码、支持微博微信 QQ 二维码扫描样式...
QRCode 扫描二维码.扫描条形码.相册获取图片后识别.生成带 Logo 二维码.支持微博微信 QQ 二维码扫描样式参考链接:https://github.com/bingoogolapple/B ...
扫描二维码、扫描条形码、相册获取图片后识别、生成带 Logo 二维码、支持微博微信 QQ 二维码扫描样式
GitHub项目的链接地址目录功能介绍常见问题效果图与示例 apk Gradle 依赖布局文件自定义属性说明接口说明关于我功能介绍 ZXing 生成可自定义颜色.带 logo 的二维 ...
ReactNative从相册选取二维码进行扫描识别、扫描条形码、生成带 Logo 二维码、支持微博微信 QQ 二维码扫描样式
我的demo 地址 http://github.com/yrjwcharm/react-native-scanner-qrcode 博友直接下载压缩包或者git clone 因为我的版本比较高.所 ...
Android 基于google Zxing实现二维码条形码扫描，仿微信二维码扫描效果
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 转载请注 ...
Android 基于google Zxing实现二维码、条形码扫描，仿微信二维码扫描效果
转载请注明出处:http://blog.csdn.net/xiaanming/article/details/10163203 了解二维码这个东西还是从微信中,当时微信推出二维码扫描功能,自己感觉挺新 ...
基于google Zxing实现二维码、条形码扫描，仿微信二维码扫描效果
转载请注明出处:http://blog.csdn.net/xiaanming/article/details/10163203 了解二维码这个东西还是从微信中,当时微信推出二维码扫描功能,自己感觉挺新 ...
解决Android二维码扫描ZXing竖屏拉伸变长闪退扫描区域小等问题
Android 基于google Zxing实现二维码.条形码扫描,仿微信二维码扫描效果这篇文章写的不错,但是按照这篇文章使用二维码的话会出现竖屏扫描图像拉伸变长的问题(有一个地方计算错误),解决拉 ...
Windows逆向微信登录二维码的字符串
获取微信的登录二维码,网上已有很多教程了,这里稍作总结,大概就以下两种方式: 1.直接获取二维码的图片数据,下载到本地: 2.获取二维码所表示的字符串,利用其它库(比如:libqrencode)来生成 ...
一个二维码扫描自动识别下载应用【微信提示】
先前写了一个关于二维码扫描自动识别设备系统,并自动去下载相应版本的APP, 前一段时间微信扫描后,则不可再下载,原因是微信屏蔽了,只能提示用户从浏览器打开,并自动下载: 下载的界面效果: 下载的 do ...

H5实现微信SDK二维码扫描

H5实现微信SDK二维码扫描相关推荐

最新文章

热门文章