在微信內置瀏覽器中，網頁默認分享到「朋友圈」或「發送給好友」時，標題、圖片、描述往往是隨機抓取的（首圖 + URL），極大降低點擊率。通過微信 JSSDK 的 wx.config 授權與 wx.onMenuShareTimeline/wx.onMenuShareAppMessage 接口，開發者可精確控制分享卡片內容，並監聽成功/取消回調實現營銷邏輯（如分享後解鎖內容、統計傳播）。
[公眾號後台] → [JS 接口安全域名] → [獲取 AppID/AppSecret]
↓
[服務端] → access_token (2h 有效，全局緩存)
↓
[服務端] → jsapi_ticket (2h 有效，全局緩存)
↓
[服務端] → 簽名算法 (noncestr + timestamp + url + ticket → sha1)
↓
[前端頁面] → wx.config({appId, timestamp, nonceStr, signature, jsApiList})
↓
[前端頁面] → wx.ready(() => { onMenuShareTimeline/AppMessage 設置分享內容 + 回調 })
function getAccessToken($appid, $secret) {
$url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$appid&secret=$secret";
$res = json_decode(file_get_contents($url), true);
if (isset($res['errcode'])) throw new Exception($res['errmsg']);
return $res['access_token'];
}function getJsapiTicket($accessToken) {
$url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=$accessToken&type=jsapi";
$res = json_decode(file_get_contents($url), true);
if (isset($res['errcode'])) throw new Exception($res['errmsg']);
return $res['ticket'];
}function generateSignature($ticket, $url) {
$nonceStr = substr(str_shuffle('abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'), 0, 16);
$timestamp = time();
$params = [
'noncestr' => $nonceStr,
'jsapi_ticket' => $ticket,
'timestamp' => $timestamp,
'url' => $url // 必須為當前頁面完整 URL（不含 # 及其後），動態獲取 $_SERVER['REQUEST_URI']
];
ksort($params, SORT_STRING);
$string1 = http_build_query($params, '', '&'); // 自動按 key 排序並拼接
$signature = sha1($string1);
return compact('nonceStr', 'timestamp', 'signature');
}<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
wx.config({
debug: false, // 開發期可設 true，PC 端 console 打印參數
appId: '<?php echo $appId; ?>',
timestamp: <?php echo $timestamp; ?>,
nonceStr: '<?php echo $nonceStr; ?>',
signature: '<?php echo $signature; ?>',
jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'updateAppMessageShareData', 'updateTimelineShareData'] // 新版推薦用 update* 接口
});
wx.ready(function() {
var shareData = {
title: '自定義分享標題',
desc: '自定義分享描述，吸引用戶點擊',
link: location.href.split('#')[0], // 分享鏈接，建議去 hash
imgUrl: 'https://example.com/share-logo.png', // 300x300px 以上，< 300KB
success: function() {
// 分享成功回調：統計、解鎖獎勵、彈窗提示
console.log('分享成功');
// fetch('/api/share-success', {method: 'POST'});
},
cancel: function() {
console.log('用戶取消分享');
}
};
// 兼容舊版接口（逐漸棄用）
wx.onMenuShareTimeline(shareData);
wx.onMenuShareAppMessage(shareData);
// 新版接口（推薦，iOS 14+ 必須）
wx.updateAppMessageShareData(shareData);
wx.updateTimelineShareData(shareData);
});
wx.error(function(res) {
console.error('wx.config 失敗:', res.errMsg); // 簽名錯誤、域名未綁定等
});
</script>| 現象 | 原因 | 解決方案 |
|---|---|---|
| 簽名驗證失敗 (invalid signature) | URL 不一致（含 #、端口、http/https）、ticket 過期、參數排序錯 | 動態獲取當前頁完整 URL（去 #）；Redis 緩存 ticket 並提前刷新；用 ksort + http_build_query |
| 分享出去無圖/標題錯 | imgUrl 域名不在安全域名、圖片過大/無法訪問、HTTPS 證書問題 | 圖片放 CDN 配置 HTTPS；尺寸 < 300KB、300x300+；公眾號後台綁定圖片域名 |
| success 回調不觸發 | 用戶分享到「聊天」不觸發、微信版本差異、頁面未授權 | 僅作輔助統計，核心業務不可強依賴回調；引導用戶分享到朋友圈/好友 |
| Android 正常 iOS 失效 | iOS WKWebView 對 JSSDK 權限更嚴格、需配置 WKUIDelegate | 使用新版 updateAppMessageShareData 接口；確保頁面 HTTPS |
// 後端記錄分享事件
public function recordShare($userId, $type, $targetUrl) {
// type: timeline / appmessage
// 寫入統計表，支持「分享 N 次解鎖」等邏輯
// 注意：微信不保證 100% 回調，建議結合「用戶主動點擊確認」按鈕雙重保險
}微信 JSSDK 分享配置看似步驟繁瑣，實則邏輯清晰：雙 Token 緩存 → 簽名算法標準化 → 前端按需注入配置 → 新舊接口兼容 → 回調輔助業務。掌握核心簽名生成與 URL 一致性原則，配合完善的錯誤日志與監控，即可穩定實現高轉化的分享傳播功能。建議封裝為通用 SDK/Composer 包，項目間復用。
