微信JSSDK分享可以實現自己的網頁在微信自定義圖標，標題，還有描述，還可以分享到朋友圈，分享到微信羣，分享給朋友等操作。
上圖就是，左側是分享到朋友圈，右側是分享到微信羣。
很多開發者下載官方的demo進行開發，最後debug的時候，顯示的是config:invalid signature
，這個原因其實很有可能是簽名不一致。
我們需要保持簽名一致，才能完整注入這個權限的。
一般，簽名不一致的是因爲access_token生成的時候，獲取jsapi_ticket的時候有問題造成的，我一開始弄了好久都沒搞對，後來一個個嘗試。
我先嚐試生成的一個jsapi_ticket，寫死在頁面，發現沒問題，然後再嘗試獲取access_token寫死在頁面，也沒問題，但是直接在頁面上生成access_token再調用就不行。
我就另外寫了一個access.php進行生成access_token，把access_token存入數據庫，搞一個定時任務，每隔1小時生成一個新的access_token，因爲access_token僅有2小時有效期，而且每天最多調用2000次，所以我覺得存數據庫是比較好的。
然後在分享頁面取數據庫的access_token就行了。
下面是生成access_token的代碼
access.php
<?php
header("Content-type:text/html;charset=utf-8");
//獲取access_token
$appId = '填寫您的';
$appSecret = '填寫您的';
$url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".$appId."&secret=".$appSecret;
$ch = curl_init();//初始化curl
curl_setopt($ch, CURLOPT_URL,$url); //要訪問的地址
curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);//跳過證書驗證
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false); // 從證書中檢查SSL加密算法是否存在
$data = json_decode(curl_exec($ch));
$token = $data->access_token;
//連接數據庫
$con = mysql_connect("數據庫地址","數據庫賬號","數據庫密碼");
mysql_select_db("數據庫名", $con);
mysql_query("INSERT INTO access_token (access_token) VALUES ('$token')");
mysql_close($con);
?>下面是分享頁面代碼：
index.php
<?php
//獲取jsapi_ticket
function getjsapi_ticket(){
//獲取微信access_token
//連接數據庫
$con = mysql_connect("數據庫地址","數據庫賬號","數據庫密碼");
mysql_select_db("數據庫名", $con);
$result = mysql_query("SELECT access_token FROM access_token ORDER BY ID DESC LIMIT 1");
while($row = mysql_fetch_array($result)){
$token = $row["access_token"];
}
$access_token = $token;
$url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token={$access_token}";
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL,$url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER,1);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER,0);
$data = curl_exec($ch);
curl_close($ch);
$data = json_decode($data,true);
return $data['ticket'];
}
// mysql_close($con);
//默認生成16位隨機數
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;
}
//獲取要排序的signature相關代碼
function getSignPackage() {
$jsapiTicket = getjsapi_ticket();
$url = "當前頁面的URL";
$timestamp = time();
$nonceStr = createNonceStr();
// 這裏參數的順序要按照 key 值 ASCII 碼升序排序
$string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr×tamp=$timestamp&url=$url";
$signature = sha1($string);
$signPackage = array(
"appId" => 'ADDPID修改爲您的',
"nonceStr" => $nonceStr,
"timestamp" => $timestamp,
"url" => $url,
"signature" => $signature
);
return $signPackage;
}
$signPackage = getSignPackage();
?>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>微信分享DEMO</title>
</head>
<body>
test
</body>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
wx.config({
debug: true,
appId: '<?php echo $signPackage["appId"];?>',
timestamp: <?php echo $signPackage["timestamp"];?>,
nonceStr: '<?php echo $signPackage["nonceStr"];?>',
signature: '<?php echo $signPackage["signature"];?>',
jsApiList: [
// 所有要調用的 API 都要加到這個列表中
'onMenuShareTimeline',
'onMenuShareAppMessage'
]
});
//分享到朋友圈
wx.ready(function () {
wx.onMenuShareTimeline({
title: '吾愛破解論壇，微信JSSDK分享學習',
link: "修改爲當前JS接口安全域名下的頁面的自定義URL",
imgUrl: 'http://wxpad.cn/editor/php/upload/20181025/1540469570441.png',
success: function (res) {
alert('已分享到朋友圈');
},
cancel: function (res) {
alert('已取消分享');
},
fail: function (res) {
alert(JSON.stringify(res));
}
})
//分享給朋友
wx.onMenuShareAppMessage({
title: "吾愛破解論壇，微信JSSDK分享學習", // 分享標題
desc: "學破解，學技術，就來吾愛破解論壇！", // 分享描述
link: "修改爲當前JS接口安全域名下的頁面的自定義URL", // 分享鏈接
imgUrl: "http://wxpad.cn/editor/php/upload/20181025/1540469570441.png", // 分享圖標
type: '', // 分享類型,music、video或link，不填默認爲link
dataUrl: '', // 如果type是music或video，則要提供數據鏈接，默認爲空
success: function () {
// 用戶確認分享後執行的回調函數
},
cancel: function () {
// 用戶取消分享後執行的回調函數
}
});
});
alert(location.href.split('#')[0])
</script>
</html>大概就這樣就可以config:ok了
當然，開發過程中需要設置IP白名單，JS接口安全域名這些我就不多說了。
作者：TANKING
2018-10-25
http://likeyunba.com