微信公众号页面调用微信扫一扫

最新推荐文章于 2023-05-19 16:03:20 发布

HuiRonmantic

最新推荐文章于 2023-05-19 16:03:20 发布

阅读量1.5k

点赞数

原文链接：https://www.imooc.com/article/42734

版权

本以为调用微信扫一扫很容易，结果看了微信的开发者文档，正如大家所说，微信的开发文档写的一塌糊涂，非常的不详细。

转载：https://www.imooc.com/article/42734
从而导致基于微信的好多开发都比较不是很方便，今天我们在公众号的个页面需要使用微信扫一扫撒，扫条形码，然后获取条形码数据，再生成二维码，再识别二维码进行付款。如果是自己写调用微信扫一扫，需要前后端结合才可以，尤其是签名，时间戳等动态获取的值，但是后来有一位大佬分享的代码，简单粗暴一共几行，就可调用微信扫一扫。
在这里插入图片描述

获取条形码数据并赋值到输入框

上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> 
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript" src="js/jquery.qrcode.min.js"></script>
		 <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
		<style>
			body{/*text-align:center*/} 
			.container{
				margin: 0 auto;
				padding: 25px 0 0 0 ;
		        position: relative;
		      
		    }
		    #scanBtn{
		        display: inline-block;
		    	width: 60px;
		    	height: 60px;		    	
		    	top: 23px;
		    	/*margin-left: 15px;*/
		    	position:absolute;
		    	background-image: url(img/aaronS.png) ;
		    	background-size:50% 50% ;
		    	background-repeat:no-repeat ;
		    	background-position-x:center ;
		    	background-position-y:center ;
		    }
			#DeliveryID
			{
				width:200px;
				height:40px;
				border-radius:10px;
				padding-left: 10px;
				font-size: 1rem;
				vertical-align: middle;
			}
			.coders{
			  text-align:center;
			}
			#CodeBut
			{
				
				-webkit-appearance:none;	
				margin-top: 40px;
				height: 60px;
				width: 300px;
				color:white;
				border-width: 0;
				background-color: rgba(234,85,4,1); 
				font-size: 2rem;
				border-radius:10px;
			}
			#CodeImg{
				 text-align:center;
				margin-top: 150px;
			}
			#name{
				-webkit-appearance:none;
				width:100px;			
				height:60px;
				color:white;
				background-color: rgba(234,85,4,1); 
				-webkit-background-color: rgba(234,85,4,1); 
				border-width: 0;
				border-radius:10px;
				font-size:20px;
				vertical-align: middle;
			}
			canvas{
				display: none;
			}
				
			input {
				width: 80%;
				border: 1px solid #ccc;
				padding: 11px 15px;
				border-radius: 3px;
				padding-left: 5px;
				-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
				box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
				-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
				-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
				transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
			}
			
			input:focus {
				border-color: #66afe9;
				outline: 0;
				-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
				box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
			}
			
			input::-webkit-outer-spin-button,
			input::-webkit-inner-spin-button {
				-webkit-appearance: none;
				appearance: none;
				margin: 0;
			}
			
		</style>
		<script type="text/javascript">
			$(document).ready(function () {
			
				 if (location.href.indexOf("qrresult=")>-1){
				 			var listContent = location.href.split("qrresult=")[1]; //获取扫中以后的内容
				 			var listContents = listContent.slice(9);	//由于生成的字符串前9位是没用，直截取有用的数字内容		 			
				    	 	$("#DeliveryID").val(listContents);
				    	 
				    }
    			
				
	});
	
	</script>
	</head>
	<body>

		<div>
			<div class="container">
				
				<input id="DeliveryID" type="number" placeholder="请输入交货单号" name="" value="" />
				<div id="scanBtn"></div>
				<!--对，就是下面这一句，大佬提供的，且必须要a标签-->
				<a id="scanBtn" href="http://sao315.com/w/api/saoyisao?redirect_uri=你使用扫一扫当前页面的服务器地址，https开头的"></a>
			</div>
	</body>
</html>

HuiRonmantic

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
微信公众号页面调用微信扫一扫

本以为调用微信扫一扫很容易，结果看了微信的开发者文档，正如大家所说，微信的开发文档写的一塌糊涂，非常的不详细。转载：https://www.imooc.com/article/42734从而导致基于微信的好多开发都比较不是很方便，今天我们在公众号的个页面需要使用微信扫一扫撒，扫条形码，然后获取条形码数据，再生成二维码，再识别二维码进行付款。如果是自己写调用微信扫一扫，需要前后端结合才可以，尤其是签名，时间戳等动态获取的值，但是后来有一位大佬分享的代码，简单粗暴一共几行，就可调用微信扫一扫。获取条形
复制链接

扫一扫