微信网页开发 jssdk前后端代码，PHP实现完整代码

其他 2020-04-14 10:50:12 阅读次数: 0

微信网页JS-SDK的功能实现，后端php，完整源码。分享内容自定义。

jsapi_ticket ，access_token，wx_card_ticket 这些参数有实效限制，所以记录在了数据库，超时重新获取。

效果图：

前端代码：

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>测试</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />

		<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
		<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
		<script type="text/javascript" src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>
		<script>
			new VConsole();
		</script>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

		<style type="text/css">
			.toast {
				padding: 10px 25px 10px 25px;
				background: rgba(0, 0, 0, .5);
				border-radius: 5px;
				color: #ffffff;
				text-align: center;
				position: fixed;
				left: 50%;
				top: 40%;
				transform: translate(-50%, -50%);
				z-index: 100;
			}
		</style>
	</head>
	<body>
		<div id="test">
			<toast v-if='isShow' :message='isShowMsg'></toast>
			<div class="container" @click="showToast">
				点击显示 showToast1
			</div>
		</div>
		<script>
			var that;
			Vue.component('toast', {
				props: ['message'],
				template: `
			    <div class="toast_bg_transparent">
			        <div class="toast">
			            <span>{{message}}</span>
			        </div>
			    </div>
			    `
			})
			new Vue({
				el: '#test',
				data() {
					return {
						isShow: false,
						isShowMsg: '', //弹窗提示
					}
				},
				methods: {
					addCard(wx_card_ticket) {
						var timestamp = new Date().getTime();
						var data={
							timestamp,wx_card_ticket
						}
						var url ="https://jayjing.wang/wx_h5_jssdk_card/addCard.php";
						$.ajax({
							type: 'post',
							url: url,
							contentType: 'application/x-www-form-urlencoded;charset=utf-8',
							data: data,
							dataType: "json",
							complete: res => {
								console.log('---res--',res)
								var signature = res.responseText;
								// var cardExt ='{timestamp:1586169935692,signature:5671ad079de93ef9698400f0943d3fc87adeb48d}'
								var cardExt ='{timestamp:'+timestamp+',signature:'+signature+'}'
								wx.addCard({
								  cardList: [{
									cardId: 'p_EZdwPj7zGD9dACk4If4sO1cONk',
									cardExt: cardExt
								  }], // 需要添加的卡券列表
								  success: function (ress) {
									var cardList = ress.cardList; // 添加的卡券列表信息
									console.log('addCard', ress)
								  }
								});
							}
						})
					},

					getAccess_token() {
						console.log('getAccess_token')
						var that = this;
						var url = 'https://jayjing.wang/wx_h5_jssdk_card/getAccess_token.php';
						$.ajax({
							url: url,
							complete: res => {
								var getAccess_token = JSON.parse(res.responseText)
								console.log('getAccess_token', getAccess_token)
							}
						})
					},
					getConfig() {
						console.log('getConfig')
						var that = this;
						var url = 'https://jayjing.wang/wx_h5_jssdk_card/getConfig.php';
						$.ajax({
							url: url,
							complete: res => {
								var config = JSON.parse(res.responseText);
								config.jsApiList=['addCard'];
								console.log('config---my', config)
								
								wx.config({
									debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
									  appId: config.appId, // 必填，公众号的唯一标识
									  timestamp: config.timestamp, // 必填，生成签名的时间戳
									  nonceStr: config.nonceStr, // 必填，生成签名的随机串
									  signature: config.signature,// 必填，签名
									  jsApiList: config.jsApiList // 必填，需要使用的JS接口列表
								});
								wx.ready(function() {
									console.log('wx.ready')
									
									  
									that.addCard(config.wx_card_ticket);
								});
								wx.error(function(res){
									console.log('wx.error',res)
								  // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
								});
							}
						})
					},
					showToast() {
						console.log('点击了 showToast')
						this.isShow = true;
						this.isShowMsg = '错误提示';

						setTimeout(() => {
							this.isShow = false;
						}, 1000);
					}
				},
				mounted() {
					var that = this;
					this.getConfig()
					// this.createCard()
					
				}
			})
		</script>
	</body>
</html>

php代码

<?php
    header("Content-Type:text/html;charset=utf8"); 
	header("Access-Control-Allow-Origin: *"); //解决跨域
	header('Access-Control-Allow-Methods:GET');// 响应类型  
	header('Access-Control-Allow-Headers:*'); // 响应头设置 
	$appid = "换成你的appid ";
	$secret = "换成你的secret";
	
	$servername = "localhost";
	$username = "root";
	$password = "root";
	$dbname = "demo";
	 
	// 创建连接
	$conn = new mysqli($servername, $username, $password, $dbname);
	// Check connection
	if ($conn->connect_error) {
	    die("连接失败: " . $conn->connect_error);
	} 
	 
	$sql = "SELECT access_token_, _time, wx_card_ticket, jsapi_ticket FROM js_sdk";
	$result = $conn->query($sql);
	 
	if ($result->num_rows > 0) {
	    // 输出数据
	    while($row = $result->fetch_assoc()) {
			if(number_format(time()-$row["_time"]>7200)){
				$url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={$appid}&secret={$secret}";
				$s = file_get_contents($url);
				$s = json_decode($s, true);
				$access_token =$s['access_token'];
				
				$url_b = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={$access_token}&type=jsapi";
				$data = file_get_contents($url_b);
				$data = json_decode($data, true);
				$jsapi_ticket = $data['ticket'];
				
				$wx_card_url_b = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={$access_token}&type=wx_card";
				$wx_card_data = file_get_contents($wx_card_url_b);
				$wx_card_data = json_decode($wx_card_data, true);
				$wx_card_ticket = $wx_card_data['ticket'];
				
				$__time = $row["_time"];
				$_time = time();
				
				//echo $_time. "<br>".$jsapi_ticket. "<br>".$access_token. "<br>".$wx_card_ticket. "<br>";
				$m_sql ="UPDATE js_sdk SET _time = $_time, jsapi_ticket = '$jsapi_ticket', access_token_ = '$access_token', wx_card_ticket = '$wx_card_ticket'";
				mysqli_query($conn,$m_sql);

				mysqli_close($conn);

				// 进行sha1签名
				$timestamp = time();
				$nonceStr = createNonceStr();
				
				// 注意 URL 一定要动态获取，不能 hardcode.
				//$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
				// $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
				$url = "https://jayjing.wang/wx_h5_jssdk_card/index.html";
				
				$str = "jsapi_ticket={$jsapi_ticket}&noncestr={$nonceStr}&timestamp={$timestamp}&url={$url}";
				$signature = sha1($str);
				
				$signPackage = array(
				    "appId" =>  $appid,
				    "nonceStr" => $nonceStr,
				    "timestamp" => $timestamp,
				    "signature" => $signature,
					"access_token"=>$access_token,
					"url"=>$url,
					"jsapi_ticket"=>$jsapi_ticket,
					"string1"=>$str,
					"wx_card_ticket"=>$wx_card_ticket,
					"_type"=>"db"
				);
				echo urldecode(json_encode($signPackage));
			}else{
				
				$access_token =$row['access_token_'];
				$jsapi_ticket =$row['jsapi_ticket'];
				$wx_card_ticket =$row['wx_card_ticket'];
				// 进行sha1签名
				$timestamp = time();
				$noncestr = createNonceStr();
				
				// 注意 URL 一定要动态获取，不能 hardcode.
				//$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
				// $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
				$url = "https://jayjing.wang/wx_h5_jssdk_card/index.html";
				
				$str = "jsapi_ticket={$jsapi_ticket}&noncestr={$nonceStr}&timestamp={$timestamp}&url={$url}";
				$signature = sha1($str);
						
				$signPackage = array(
				    "appId" =>  $appid,
				    "nonceStr" => $nonceStr,
				    "timestamp" => $timestamp,
				    "signature" => $signature,
					"access_token"=>$access_token,
					"url"=>$url,
					"string1"=>$str,
					"jsapi_ticket"=>$jsapi_ticket,
					"wx_card_ticket"=>$wx_card_ticket,
					"_type"=>"low"
				);
				echo urldecode(json_encode($signPackage));
			}
	    }
	} else {
	    echo "0 结果";
	}
	$conn->close();
       
				//随机字符串
				function createNonceStr($length = 16) {
					$chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
					$str = "";
					for ($i = 0; $i < $length; $i++) {
						$str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);
					}
					return $str;
				}
?>

完成

php结合html版本

<?php
    header("Content-Type:text/html;charset=utf8"); 
	header("Access-Control-Allow-Origin: *"); //解决跨域
	header('Access-Control-Allow-Methods:GET');// 响应类型  
	header('Access-Control-Allow-Headers:*'); // 响应头设置 
	$appid = "wx9025b8efd9a17681";
	$secret = "90b3c06746e455ae7f128981eb9f267f";
	
	$servername = "localhost";
	$username = "root";
	$password = "root";
	$dbname = "demo";
	 
	// 创建连接
	$conn = new mysqli($servername, $username, $password, $dbname);
	// Check connection
	if ($conn->connect_error) {
	    die("连接失败: " . $conn->connect_error);
	} 
	 
	$sql = "SELECT access_token_, _time, wx_card_ticket, jsapi_ticket FROM js_sdk";
	$result = $conn->query($sql);
	 
	if ($result->num_rows > 0) {
	    // 输出数据
	    while($row = $result->fetch_assoc()) {
			if(number_format(time()-$row["_time"]>7200)){
				$url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={$appid}&secret={$secret}";
				$s = file_get_contents($url);
				$s = json_decode($s, true);
				$access_token =$s['access_token'];
				
				$url_b = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={$access_token}&type=jsapi";
				$data = file_get_contents($url_b);
				$data = json_decode($data, true);
				$jsapi_ticket = $data['ticket'];
				
				$wx_card_url_b = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={$access_token}&type=wx_card";
				$wx_card_data = file_get_contents($wx_card_url_b);
				$wx_card_data = json_decode($wx_card_data, true);
				$wx_card_ticket = $wx_card_data['ticket'];
				
				$__time = $row["_time"];
				$_time = time();
				
				//echo $_time. "<br>".$jsapi_ticket. "<br>".$access_token. "<br>".$wx_card_ticket. "<br>";
				$m_sql ="UPDATE js_sdk SET _time = $_time, jsapi_ticket = '$jsapi_ticket', access_token_ = '$access_token', wx_card_ticket = '$wx_card_ticket'";
				mysqli_query($conn,$m_sql);

				mysqli_close($conn);

				// 进行sha1签名
				$timestamp = time();
				$nonceStr = createNonceStr();
				
				// 注意 URL 一定要动态获取，不能 hardcode.
				$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
				$url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
				// $url = "https://jayjing.wang/wx_h5_jssdk_card/index.html";
				
				$str = "jsapi_ticket={$jsapi_ticket}&noncestr={$nonceStr}&timestamp={$timestamp}&url={$url}";
				$signature = sha1($str);
				
				$signPackage = array(
				    "appId" =>  $appid,
				    "nonceStr" => $nonceStr,
				    "timestamp" => $timestamp,
				    "signature" => $signature,
					"access_token"=>$access_token,
					"url"=>$url,
					"jsapi_ticket"=>$jsapi_ticket,
					"string1"=>$str,
					"wx_card_ticket"=>$wx_card_ticket,
					"_type"=>"db"
				);
				// echo urldecode(json_encode($signPackage));
			}else{
				
				$access_token =$row['access_token_'];
				$jsapi_ticket =$row['jsapi_ticket'];
				$wx_card_ticket =$row['wx_card_ticket'];
				// 进行sha1签名
				$timestamp = time();
				$noncestr = createNonceStr();
				
				// 注意 URL 一定要动态获取，不能 hardcode.
				$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
				$url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
				// $url = "https://jayjing.wang/wx_h5_jssdk_card/index.html";
				
				$str = "jsapi_ticket={$jsapi_ticket}&noncestr={$nonceStr}&timestamp={$timestamp}&url={$url}";
				$signature = sha1($str);
						
				$signPackage = array(
				    "appId" =>  $appid,
				    "nonceStr" => $nonceStr,
				    "timestamp" => $timestamp,
				    "signature" => $signature,
					"access_token"=>$access_token,
					"url"=>$url,
					"string1"=>$str,
					"jsapi_ticket"=>$jsapi_ticket,
					"wx_card_ticket"=>$wx_card_ticket,
					"_type"=>"low"
				);
				
				// echo urldecode(json_encode($signPackage));
			}
	    }
	} else {
	    echo "0 结果";
	}
	$conn->close();
       
				//随机字符串
				function createNonceStr($length = 16) {
					$chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
					$str = "";
					for ($i = 0; $i < $length; $i++) {
						$str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);
					}
					return $str;
				}
?>
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>测试</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />

		<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
		<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
		<script type="text/javascript" src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>
		<script>
			new VConsole();
		</script>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

		<style type="text/css">
			.toast {
				padding: 10px 25px 10px 25px;
				background: rgba(0, 0, 0, .5);
				border-radius: 5px;
				color: #ffffff;
				text-align: center;
				position: fixed;
				left: 50%;
				top: 40%;
				transform: translate(-50%, -50%);
				z-index: 100;
			}
		</style>
	</head>
	<body>
		<div id="test">
			<toast v-if='isShow' :message='isShowMsg'></toast>
			<div class="container" @click="showToast">
				点击显示 showToast1
			</div>
			<input type="text" id="appId" name="text1" value="<?=$appid?>">
			<input type="text" id="wx_card_ticket" name="text1" value="<?=$wx_card_ticket?>">
			<input type="text" id="timestamp" name="text1" value="<?=$timestamp?>">
			<input type="text" id="nonceStr" name="text1" value="<?=$nonceStr?>">
			<input type="text" id="signature" name="text1" value="<?=$signature?>">
		</div>
		<script>
			var that;
			Vue.component('toast', {
				props: ['message'],
				template: `
			    <div class="toast_bg_transparent">
			        <div class="toast">
			            <span>{{message}}</span>
			        </div>
			    </div>
			    `
			})
			new Vue({
				el: '#test',
				data() {
					return {
						isShow: false,
						isShowMsg: '', //弹窗提示
					}
				},
				methods: {
					getConfig() {
						console.log('getConfig')
						var that = this;
						setTimeout(function(){
									console.log('22222222222')
							var wx_card_ticket = $('#wx_card_ticket').val();
						var appId = $('#appId').val();
						var timestamp = $('#timestamp').val();
						var nonceStr = $('#nonceStr').val();
						var signature = $('#signature').val();
						console.log('signature',signature)
								wx.config({
									debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
									  appId: appId, // 必填，公众号的唯一标识
									  timestamp: timestamp, // 必填，生成签名的时间戳
									  nonceStr: nonceStr, // 必填，生成签名的随机串
									  signature: signature,// 必填，签名
									  jsApiList: ["addCard"] // 必填，需要使用的JS接口列表
								});
								wx.ready(function() {
									console.log('wx.ready')
									
									  
									that.addCard(wx_card_ticket);
								});
								wx.error(function(res){
									console.log('wx.error',res)
								  // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
								});
						},1500)
						
					},
					addCard(wx_card_ticket) {
						var timestamp = new Date().getTime();
						var data={
							timestamp,wx_card_ticket
						}
						var url ="https://jayjing.wang/wx_h5_jssdk_card/addCard.php";
						$.ajax({
							type: 'post',
							url: url,
							contentType: 'application/x-www-form-urlencoded;charset=utf-8',
							data: data,
							dataType: "json",
							complete: res => {
								console.log('---res--',res)
								var signature = res.responseText;
								// var cardExt ='{timestamp:1586169935692,signature:5671ad079de93ef9698400f0943d3fc87adeb48d}'
								var cardExt ='{timestamp:'+timestamp+',signature:'+signature+'}'
								wx.addCard({
								  cardList: [{
									cardId: 'p_EZdwPj7zGD9dACk4If4sO1cONk',
									cardExt: cardExt
								  }], // 需要添加的卡券列表
								  success: function (ress) {
									var cardList = ress.cardList; // 添加的卡券列表信息
									console.log('addCard', ress)
								  },fail:function(err){
									 console.log('addCard-err', err) 
								  }
								});
							}
						})
					},

					getAccess_token() {
						console.log('getAccess_token')
						var that = this;
						var url = 'https://jayjing.wang/wx_h5_jssdk_card/getAccess_token.php';
						$.ajax({
							url: url,
							complete: res => {
								var getAccess_token = JSON.parse(res.responseText)
								console.log('getAccess_token', getAccess_token)
							}
						})
					},
					showToast() {
						console.log('点击了 showToast')
						this.isShow = true;
						this.isShowMsg = '错误提示';

						setTimeout(() => {
							this.isShow = false;
						}, 1000);
					}
				},
				mounted() {
					var that = this;
					this.getConfig()
					// this.createCard()
					
				}
			})
		</script>
	</body>
</html>
a_靖 博客专家
发布了423 篇原创文章 · 获赞 842 · 访问量 213万+
他的留言板 关注

猜你喜欢

转载自blog.csdn.net/qq_35713752/article/details/105319560
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022