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(), // 必填，企业微信的cropID
			timestamp : '${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('版本过低请升级');
				}
			}
		});
	};
	
});