【微信扫一扫】爬坑之旅,微信扫一扫调起摄像头

微信扫一扫功能在我们日常生活中很常见,那么微信JS-SDK是如何实现扫一扫功能的呢,最近在做一个线下扫码取货的功能,并附有代码实现。


查看微信官方JS-SDK文档,调起微信扫一扫的api


一:微信JS-SDK里面的接口都需要依赖js的config配置项,所以我们先获取配置项需要的参数

/**
 * 获取微信jsSDK配置项数据
 */
public function getWxConfig(){
	$mid = $_SESSION['userData']['mid'];
	
//	商户微信配置
	$wechat = M('wxtoken') -> where(['mid'=>$mid]) -> find();
	
//	签名生成时间戳
	$time = time();					//必须为数值类型,否则某些版本的的手机系统会报js的配置项有误!!
	
	$rand = rand(1000, 999999);		//签名随机串
	$rand = strval($rand);			//数值转字符串类型(如果不注意数据类型,只有安卓7.0能通过,其他版本的手机全部报js的配置项有误!!)
	
//	获取access_token
	$url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".$wechat['appid']."&secret=".$wechat['appsecret'];
	$get_access_token = $this -> https_request($url);
	$get_access_token = json_decode($get_access_token,TRUE);
	$access_token = $get_access_token['access_token'];
	
//	获取jsapi_ticket
	$url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=$access_token&type=jsapi";
	$get_jsapi_ticket = $this -> https_request($url);
	$get_jsapi_ticket = json_decode($get_jsapi_ticket,TRUE);
	$jsapi_ticket = $get_jsapi_ticket['ticket'];
	
//	config签名
	$jsConfigSign = "jsapi_ticket=".$jsapi_ticket.
				 "&noncestr=".$rand.							//签名的随机串类型必须是字符串
				 "&timestamp=".$time.							//签名的时间戳类型必须是数值
				 "&url=http://www.xxxxxxxxx.com/v/wxhx.html";	//该路径必须和拉起摄像头的页面路径完全一致(否则某些版本的手机js配置项报错)
	$jsConfigSign = sha1($jsConfigSign);
	
	$data['appid'] = $wechat['appid'];		//appid
	$data['timestamp'] = $time;				//生成签名的时间戳
	$data['nonceStr'] = $rand;				//生成签名的随机串
	$data['signature'] = $jsConfigSign;		//签名
	$data['jsapi'] = 'scanQRCode';			//jsApi
	
	echo json_encode($data,JSON_UNESCAPED_UNICODE);die;
}

QQ截图20170705100511.png

一开始只有华为荣耀8的手机才能成功拉起微信扫一扫,其他手机全部报错,都快把微信开发者文档泛滥了,也没找到原因,后来尝试了下把参数的类型都定义死了,居然所有手机都可以拉起扫一扫了。。。在此爬坑一下午,默默的鄙视下微信开发者文档的小编,文档无处不是坑。。


二:在页面js配置config配置项

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript"></script>	//微信js-sdk依赖文件
		<script type="text/javascript">
$.ajax({
	type:"post",
	url:"http://www.xxxxxxx.com/v_api/getWxConfig",
	dataType:'json',
	success:function(datas){
		
		wx.config({
		    debug: false, 		// 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
		    appId: datas.appid, 	// 必填,公众号的唯一标识
		    timestamp: datas.timestamp, // 必填,生成签名的时间戳
		    nonceStr: datas.nonceStr, 	// 必填,生成签名的随机串
		    signature: datas.signature,	// 必填,签名,见附录1
		    jsApiList: [datas.jsapi] 	// 必填,需要使用的JS接口列表,所有JS接口列表见附录2
		});
		
		wx.ready(function(){
			wx.scanQRCode({
			    needResult: 1, 		    // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
			    scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码,默认二者都有
			    success: function (res) {
				    var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
				    if (result!='') {
//				    	取到扫一扫返回结果后,在此编写后续的逻辑代码
				    }
				}
			});
		})
		
	}
});

QQ截图20170705101635.png

微信图片_20170705102117_meitu_1.jpg

微信扫一扫至此完结!耗时一天,再次默默的鄙视下微信开发者文档的小编。。。


点击下方打赏一个呗~

点赞

发表评论