如果你頁面啓用了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
<?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 = "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
<?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 = "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 connection
if ($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}×tamp={$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}×tamp={$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，不填默認爲link
dataUrl: '', // 如果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:08
function getNowTime() {
// 加0
function 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版本
<?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}×tamp={$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}×tamp={$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>