当前位置：首页 > 编程日记 > 正文

微信网页开发 jssdk前后端代码，PHP实现完整代码,自定义分享

编程日记 2024-08-05 16:10:00

如果你页面启用了https，务必引入 https😕/res.wx.qq.com/open/js/jweixin-1.0.0.js ，否则将无法在iOS9.0以上系统中成功使用JSSDK

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

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

效果图：

访问地址：
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd9c832f1bafb383d&redirect_uri=https%3A%2F%2Fjayjing.wang%2Fwx_h5_jssdk_fenxiang%2FgetAccess_token.php%3Fac_id%3D202004sad14&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect

他会自动跳转到填的 redirect_uri 的地址，redirect_uri的值需要先url编码。

php代码

getAccess_token.php

<?phpheader("Content-Type:text/html;charset=utf8"); header("Access-Control-Allow-Origin: *"); //解决跨域header('Access-Control-Allow-Methods:GET');// 响应类型  header('Access-Control-Allow-Headers:*'); // 响应头设置 $appid = "wxd9c8111111";$secret = "dcec3a1111111111111111111111";$code = $_GET['code'];$ac_id = $_GET['ac_id'];// 获取授权的$url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid={$appid}&secret={$secret}&code={$code}&grant_type=authorization_code";//网页授权得到结果：$s = "{\"access_token\":\"32_P2gAMCy1B5Nxj6f214o3QXPeAI4c8wqeg9pIAh5Q5Xu_7gigCShnK_hUqPbSgSDKrpfdP5M3ZbieXwvlbJnHJQ\",\"expires_in\":7200,\"refresh_token\":\"32_HyDtpGDuwh-JDxK4yCkU14_oe4Z1VofusV6xjnJ3pnDYf4Bf2iEjxhS__63_qOWVpmecmb4pxWIyz0hCv3muJQ\",\"openid\":\"o_EZdwFq8g39d-jQPkOh6lXGkqG4\",\"scope\":\"snsapi_userinfo\",\"unionid\":\"odpLct4586g19xTw8q5tvdAXPUHU\"}"// 获取普通的// $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);// echo $s['access_token'];// echo urldecode(json_encode($s));$access_token =$s['access_token'];$openid =$s['openid'];$userinfo_url = "https://api.weixin.qq.com/sns/userinfo?access_token={$access_token}&openid={$openid}&lang=zh_CN";$userinfo_data = file_get_contents($userinfo_url);// echo urldecode(json_encode($userinfo_data));// 得到的用户基础信息//$info =:"{\"openid\":\"o_EZdwFq8g39d-jQPkOh6lXGkqG4\",\"nickname\":\"a_\u9756\",\"sex\":1,\"language\":\"zh_CN\",\"city\":\"\",\"province\":\"\",\"country\":\"\u4e2d\u56fd\",\"headimgurl\":\"http:\\\/\\\/thirdwx.qlogo.cn\\\/mmopen\\\/vi_32\\\/Q0j4TwGTfTLpAib9yVTp6B6MCbQJBy7QSYWuC3RpxJ6wc83xyEgdSh5fpyHWc5NBRH8F2uaNYbDagFIqUKTfyxw\\\/132\",\"privilege\":[],\"unionid\":\"odpLct4586g19xTw8q5tvdAXPUHU\"}"$info =json_decode($userinfo_data, true);$openid = $info["openid"];$nickname = $info["nickname"];$headimgurl = $info["headimgurl"];
?><!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 src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>new VConsole();</script></head><body><input type="hidden" id="ac_id" name="text1" value="<?=$ac_id?>"><input type="hidden" id="openid" name="text1" value="<?=$openid?>"><input type="hidden" id="appid" name="text1" value="<?=$appid?>"><input type="hidden" id="nickname" name="text1" value="<?=$nickname?>"><input type="hidden" id="headimgurl" name="text1" value="<?=$headimgurl?>"><script>var appid =$("#appid").val();var openid =$("#openid").val();var nickname =$("#nickname").val();var headimgurl =$("#headimgurl").val();var ac_id =$("#ac_id").val();if(appid&&headimgurl&&nickname){setTimeout(function(){var p_url = "?appid="+appid+"&headimgurl="+encodeURIComponent(headimgurl)+"&nickname="+nickname+"&openid="+openid+"&ac_id="+ac_id;// window.close();window.location="https://jayjing.wang/wx_h5_jssdk_fenxiang/shareArticle.php"+p_url;},500)}else{console.log('appid',appid)console.log('headimgurl',headimgurl)console.log('nickname',nickname)console.log('openid',openid)console.log('没跳转页面')}</script></body></html>

shareArticle.php

<?phpheader("Content-Type:text/html;charset=utf8"); header("Access-Control-Allow-Origin: *"); //解决跨域header('Access-Control-Allow-Methods:GET');// 响应类型  header('Access-Control-Allow-Headers:*'); // 响应头设置 $appid = "wxd9c832f1111";$secret = "dcec3a4811111111111";$openid = $_GET['openid'];$nickname = $_GET['nickname'];$headimgurl = $_GET['headimgurl'];$ac_id = $_GET['ac_id'];$servername = "localhost";$username = "root";$password = "root";$dbname = "demo";// 创建连接$conn = new mysqli($servername, $username, $password, $dbname);// Check connectionif ($conn->connect_error) {die("连接失败: " . $conn->connect_error);} $sql = "SELECT access_token_, _time, jsapi_ticket FROM js_sdk";$result = $conn->query($sql);// 进行sha1签名$timestamp = time();$nonceStr = createNonceStr();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'];$_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);// 注意 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'];// 注意 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;};//print();// echo $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.4.0.js"></script> --><!-- <script src="http://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script> --><script src="https://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script><script type="text/javascript" src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>new VConsole();</script></head><body><input type="hidden" id="appId" name="text1" value="<?=$appid?>"><input type="hidden" id="ac_id" name="text1" value="<?=$ac_id?>"><input type="hidden" id="timestamp" name="text1" value="<?=$timestamp?>"><input type="hidden" id="nonceStr" name="text1" value="<?=$nonceStr?>"><input type="hidden" id="signature" name="text1" value="<?=$signature?>"><input type="hidden" id="openid" name="text1" value="<?=$openid?>"><input type="hidden" id="nickname" name="text1" value="<?=$nickname?>"><input type="hidden" id="headimgurl" name="text1" value="<?=$headimgurl?>"><div class="article_html"></div><script>var ac_id = $("#ac_id").val();let en_html ="./article_html"+ac_id+".html";console.log("en_html",en_html)$(".article_html").load(en_html);var openid = $("#openid").val();var nickname = $("#nickname").val();var headimgurl = $("#headimgurl").val();var appId = $('#appId').val();var timestamp = $('#timestamp').val();var nonceStr = $('#nonceStr').val();var signature = $('#signature').val();console.log('openid:', openid)console.log('signature', signature)if(!openid){window.location="https://jayjing.wang/wx_h5_jssdk_fenxiang/shareArticle.php?appid=wxd9c832f1bafb383d&headimgurl=http%3A%2F%2Fthirdwx.qlogo.cn%2Fmmopen%2Fvi_32%2FQ0j4TwGTfTKqZsiaO21zTvg5dh0srpyZq6rNLQ0TvCR1AsS08L8icP2kjtLGntFo4GHLaVy1xvuCThz0VYz1n8wQ%2F132&nickname=a_%E9%9D%96&openid=oISUiuGZToTMlSkRKs2QUllYV1W0&ac_id="+ac_id;}function scc_share(){console.log('分享了')var share_date = getNowTime();var data={openid,nickname,headimgurl,share_date}var url ="https://jayjing.wang/wx_h5_jssdk_fenxiang/addS.php";console.log('分享接口---提交',data)$.ajax({type: 'post',url: url,contentType: 'application/x-www-form-urlencoded;charset=utf-8',data: data,dataType: "json",complete: res => {console.log('分享接口---res',res)}})}console.log('wx.config',appId,timestamp,nonceStr,signature);wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: appId, // 必填，公众号的唯一标识timestamp:  timestamp+"", // 必填，生成签名的时间戳nonceStr: nonceStr+"", // 必填，生成签名的随机串signature: signature, // 必填，签名jsApiList: ['updateAppMessageShareData','updateTimelineShareData','onMenuShareAppMessage','onMenuShareQQ','onMenuShareQZone','onMenuShareTimeline' ] // 必填，需要使用的JS接口列表});wx.ready(function() {console.log('wx.ready')var wx_title =$('#wx_title').val();var wx_desc =$('#wx_desc').val();var wx_link =$('#wx_link').val();var wx_icon =$('#wx_icon').val();wx_link= "https://jayjing.wang/wx_h5_jssdk_fenxiang/shareArticle.php?appid=wxd9c832f1bafb383d&headimgurl=http%3A%2F%2Fthirdwx.qlogo.cn%2Fmmopen%2Fvi_32%2FQ0j4TwGTfTKqZsiaO21zTvg5dh0srpyZq6rNLQ0TvCR1AsS08L8icP2kjtLGntFo4GHLaVy1xvuCThz0VYz1n8wQ%2F132&nickname=a_%E9%9D%96&openid=oISUiuGZToTMlSkRKs2QUllYV1W0&ac_id="+ac_id;console.log('wx_title-----', wx_title)// wx.updateAppMessageShareData({ //     title:wx_title, // 分享标题//     desc:wx_desc, // 分享描述//     link:wx_link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致//     imgUrl:wx_icon, // 分享图标//     success: function () {// 		scc_share()//       // 设置成功//     }//   })//   wx.updateTimelineShareData({ //       title:wx_title, // 分享标题//       link:wx_link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致//       imgUrl:wx_icon, // 分享图标//       success: function () {// 		  scc_share()//         // 设置成功//       }//     })wx.onMenuShareAppMessage({title:wx_title, // 分享标题desc:wx_desc, // 分享描述link:wx_link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl:wx_icon, // 分享图标type: '', // 分享类型,music、video或link，不填默认为linkdataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空success: function () {scc_share()// 用户点击了分享后执行的回调函数}});wx.onMenuShareTimeline({title:wx_title, // 分享标题link:wx_link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl:wx_icon, // 分享图标success: function () {console.log('分享到朋友圈成功')// 用户点击了分享后执行的回调函数scc_share()},fial:function(){console.log('分享到朋友圈sb')}})wx.onMenuShareQQ({title:wx_title, // 分享标题desc:wx_desc, // 分享描述link:wx_link, // 分享链接imgUrl:wx_icon, // 分享图标success: function () {// 用户确认分享后执行的回调函数},cancel: function () {scc_share()// 用户取消分享后执行的回调函数}});wx.onMenuShareWeibo({title:wx_title, // 分享标题desc:wx_desc, // 分享描述link:wx_link, // 分享链接imgUrl:wx_icon, // 分享图标success: function () {scc_share()// 用户确认分享后执行的回调函数},cancel: function () {// 用户取消分享后执行的回调函数}});wx.onMenuShareQZone({title:wx_title, // 分享标题desc:wx_desc, // 分享描述link:wx_link, // 分享链接imgUrl:wx_icon, // 分享图标success: function () {scc_share()// 用户确认分享后执行的回调函数},cancel: function () {// 用户取消分享后执行的回调函数}});});wx.error(function(res) {console.log('wx.error', res)// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。});// 获得当前时间 2019-02-02 14:06:08function getNowTime() {// 加0function add_10(num) {if (num < 10) {num = '0' + num}return num;}var myDate = new Date();myDate.getYear(); //获取当前年份(2位)myDate.getFullYear(); //获取完整的年份(4位,1970-????)myDate.getMonth(); //获取当前月份(0-11,0代表1月)myDate.getDate(); //获取当前日(1-31)myDate.getDay(); //获取当前星期X(0-6,0代表星期天)myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)myDate.getHours(); //获取当前小时数(0-23)myDate.getMinutes(); //获取当前分钟数(0-59)myDate.getSeconds(); //获取当前秒数(0-59)myDate.getMilliseconds(); //获取当前毫秒数(0-999)myDate.toLocaleDateString(); //获取当前日期var nowTime = myDate.getFullYear() + '-' + add_10(myDate.getMonth()+1) + '-' + myDate.getDate() + ' ' + add_10(myDate.getHours()) + ':' + add_10(myDate.getMinutes()) + ':' + add_10(myDate.getSeconds());return nowTime;}</script></body>
</html>

完成

php结合html版本

<?phpheader("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 connectionif ($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>

https://www.dkcj.cn/info/12948.html

delphi自定义事件处理

http://www.cnblogs.com/ywangzi/archive/2012/09/06/2673414.html delphi自定义事件处理为什么我们点击按钮，就会执行按钮的onclick事件？这个事件是怎么和我们自己的代码关联起来的。相信很多人都有这个疑问。那么我们就通过一个自定义事件来了解这里面…

编程日记2024/08/05 16:00:00

textarea输入框限制字数（JS）

第一种: <textarea οnkeyup"checkLen(this)"></textarea> <div>您还可以输入 <span id"count">200</span> 个文字</div> <script type"text/javascript"> function checkLen(obj) { var maxCha…

编程日记2024/08/05 15:50:00

域名管理系统二级域名_域名系统简介

域名管理系统二级域名by Sumedh Nimkarde由Sumedh Nimkarde 域名系统简介 (An introduction to the Domain Name System) You all might have heard about or know about the Domain Name System (DNS) if you understand how the internet works or how computer networks w…

编程日记2024/08/05 15:40:00

redis面试总结

（1）什么是redis? Redis 是一个基于内存的高性能key-value数据库。 （2）Reids的特点 Redis本质上是一个Key-Value类型的内存数据库，很像memcached，整个数据库统统加载在内存当中进行操作，定期通…

编程日记2024/08/05 15:30:00

struts2 实现自定义标签

/*** lostingz* Created on 2015年11月18日*/ package com.test.web.tags;import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;import org.apache.struts2.components.Component; import org.apache.struts2.views.jsp.ComponentTa…

编程日记2024/08/05 15:20:00

php修改多个字段

1.直接修改 2.按条件修改 1.代码： <?phpheader("Content-Type:text/html;charsetutf8"); header("Access-Control-Allow-Origin: *"); //解决跨域header(Access-Control-Allow-Methods:GET);// 响应类型 header(Access-Control-Allow-H…

编程日记2024/08/05 15:10:00

备忘录吕吕没有备忘录十新建_一份备忘单，可帮助您记住CSS自定义属性

备忘录吕吕没有备忘录十新建CSS custom properties, also known as CSS variables, represent custom properties that can be declared and be called in your CSS.CSS定制属性，也称为CSS变量，表示可以在CSS中声明和调用的定制属性。在CSS中声明自定义…

编程日记2024/08/05 15:00:00

Oracle数据库一些操作信息

Oracle数据库如何查看当前用户角色权限及默认表空间查看当前用户的一些信息，包括用户拥有的角色权限信息、用户表空间以及用户和默认表空间的关系等--查看用户的角色权限1、查看当前用户拥有的角色权限信息：select * from role_sys_privs; 2、查看所有用…

编程日记2024/08/05 14:50:00

Eclipse用法和技巧十：显示代码outline

在一个文件中快速找到某一个方法或者某一个作用域，可以使用 CtrlO或者CtrlF3，快速显示当前代码的outline，进行快速查找。效果如下： 这里主要是补充一些后续操作，能更加方便的帮助我们查找。步骤一：再…

编程日记2024/08/05 14:40:00

上传文件到服务器指定目录，文件名相同自动替换PHP实现代码

效果图： html代码： <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body><form action"https://xxx.wang/xxx/upload.php&qu…

编程日记2024/08/05 14:30:00

ssh框架实现数据库_自顶向下介绍SSH及其如何实现安全的数据共享

ssh框架实现数据库by Sam Ollason通过萨姆奥拉森(Sam Ollason) This article will take a high-level and top-down approach to explain how SSH works and how it is used for securely communicating with remote computers.本文将采用一种自上而下的高级方法来解释SSH的工…

编程日记2024/08/05 14:20:00

UITableView

表格视图目录表格视图的功能和介绍表格视图的基本使用显示分组数据单元格的构成和基本定制常用事件处理添加头部视图和尾部视图设置段头和段尾表格视图的编辑(难点)表格视图的索引表格的分割线表格视图的搜索表格视图控制器表格视图的功能和介绍表格视图的功能:如上图所示,t…

编程日记2024/08/05 14:10:00

js 跨页面的全局变量

定义全局变量的js： a.js 1 function GlobalConfig(){ 2 3 } 4 GlobalConfig.IPSSAddress"http://localhost/index/"; 5 (function(){ 6 7 })(); View Code页面index.html里需要引用a.js 页面index.html自己的js： b.js $scope.URL GlobalCon…

编程日记2024/08/05 14:00:00

微信小程序发送表情

实现代码： 先在data定义两个数组，分别是表情和存表情正则替换的符号表示 connectemoji: [😊, 😅, 😲, 😭, 😂, 😄, 😩, 😞, 😵, 😒, …

编程日记2024/08/05 13:50:00

CSS-in-JS的权衡

by Oleg Isonen由Oleg Isonen CSS-in-JS的权衡 (The tradeoffs of CSS-in-JS) Recently I wrote a higher level overview of CSS-in-JS, mostly talking about the problems this approach is trying to solve. Library authors rarely invest time into describing the trad…

编程日记2024/08/05 13:40:00

抽象工厂模式AbstractFactory

简介抽象工厂模式(Abstract Factory Pattern)：提供一个创建一系列相关或相互依赖对象的接口，而无须指定它们具体的类。抽象工厂模式又称为Kit模式，属于对象创建型模式。不同点为了更清晰地理解抽象工厂模式，需要先引入两个概念…

编程日记2024/08/05 13:30:00

uni-app 之使用扩展组件（uni ui） Pagination 分页器使用示例

先贴出分页器文档的地址： Pagination 分页器使用步骤： 1.下载或者导入插件到你的项目； 2.在需要使用的页面引入该插件。使用操作： 1.下载或者导入插件到你的项目； 导入的操作流程示例图： 点击使用…

编程日记2024/08/05 13:20:00

S3C2440-中断体系架构

1.ARM的体系与架构 1.1.ARM体系的CPU有以下其中工作模式: 用户模式 (usr)快速中断模式 (fiq) 中断模式 (irq)管理模式 (svc)数据访问终止模式 (abt)系统模式 (sys)未定义指令终止模式 (und)1.2.ARM寄存器: 31个通用寄存器 : R0~R7(未备份寄存器) , R8~R14(备份寄存器) , R15( …

编程日记2024/08/05 13:10:00

编码和编码格式一样吗?_学习如何像专业人士一样编码

编码和编码格式一样吗?Learn how to write more professional code from Dylan Israel. Dylan teaches about tools and principles to improve your code that hes found helpful in his job as a developer.从Dylan Israel了解如何编写更专业的代码。 Dylan教授有关改善您的…

编程日记2024/08/05 13:00:00

__bridge 使用注意

前奏在平常开发中,我们可能遇到 CoreFoundation(CF) 框架的对象和 OC 对象之间的类型转换,这时候我们需要 __bridge 来帮忙注意 : 如果是使用 CF __bridge CF -> OC (只完成类型转换)- (void)bridgeCF2OC{CFStringRef aCFString CFStringCreateWithCString(NULL, "b…

编程日记2024/08/05 12:50:00

php使用TCPDF生成PDF文件教程

functioncreatePdfFile($frontData) { /*新建一个pdf文件： Orientation：orientation属性用来设置文档打印格式是“Portrait”还是“Landscape”。 Landscape为横式打印，Portrait为纵向打印 Unit：设置页面的单位。pt：点…

编程日记2024/08/05 12:40:00

VUE 框架添加全局公共方法 , 保留小数点后两位

在main.js 里面给Vue对象添加方法。来一个示例代码： import Vue from vue import App from ./AppVue.prototype.num_to_str_liangwei (val 0) > {return (val / 100).toFixed(2) } App.mpType appconst app new Vue({...App }) app.$mount() 代码添加的…

编程日记2024/08/05 12:30:00

在Unity中创建3D直升机游戏

In this lecture from Colton Ogden, you can learn game development principles by coding a Helicopter Game 3D using Unity and C#. The principles you learn can apply to any programming language and any game.在Colton Ogden的本次演讲中，您可以通过使用…

编程日记2024/08/05 12:20:00

洛谷P3572 [POI2014]PTA-Little Bird

P3572 [POI2014]PTA-Little Bird 题目描述 In the Byteotian Line Forest there are nn trees in a row. On top of the first one, there is a little bird who would like to fly over to the top of the last tree. Being in fact very little, the bird might lack the str…

编程日记2024/08/05 12:10:00