微信網頁分享標題圖片自定義設置（最新）
1 前言
剛好有微信網頁分享標題圖片自定義設置這個需求，然後查找文檔，發現有兩種方案[1]，但是第一種方案已經失效了，只能走第二種方案，然後根據實戰配置好了，本文會寫上配置中遇到的問題和解決方案，也作為記錄使用，方便自己也方便他人。
2 步驟
2.1 準備工作
2.1.1 微信JS-SDK說明文檔：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
2.1.2 附錄6-DEMO頁面和示例代碼：在JS-SDK說明文檔中的附錄6下載示例代碼，下載鏈接：http://demo.open.weixin.qq.com/jssdk/sample.zip
- 直接下載會出現警告（chrome瀏覽器下），如下圖：
- 此時建議用IE或者其它瀏覽器下載下來，然後裏面有4種常用代碼的demo包可供使用
- 備註：鏈接中包含php、java、nodejs以及python的示例代碼供第三方參考，第三方切記要對獲取的accesstoken以及jsapi_ticket進行緩存以確保不會觸發頻率限制。
2.1.3 Demo頁面：http://demo.open.weixin.qq.com/jssdk，建議直接用微信掃其二維碼
2.1.4 你需要分享的鏈接的域名需要在微信上JS安全域名進行設置，然後把類似MP_verify_HD1YQU88nBxyhisnY.txt文件放到項目的根目錄下即可
2.2 以php為例
2.2.1 在sample.php文件中的代碼嵌入到你需要分享的網頁（暫定成為share.html）裏面去，本文是直接把share.html合並到sample.php中去，然後直接修改sample.php為share.html（好處是不需要修改裏面的引入類的路徑）
2.2.2 只需要在sample.php中把AppID和Key配置一下即可$jssdk = new JSSDK("your appid", "your key");
2.2.3 配置自定義信息
<?php
require_once "jssdk.php";
$jssdk = new JSSDK("your appid", "your key");
$signPackage = $jssdk->GetSignPackage();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
/*
* 註意：
* 1. 所有的JS接口只能在公眾號綁定的域名下調用，公眾號開發者需要先登錄微信公眾平臺進入“公眾號設置”的“功能設置”裏填寫“JS接口安全域名”。
* 2. 如果發現在 Android 不能分享自定義內容，請到官網下載最新的包覆蓋安裝，Android 自定義分享接口需升級至 6.0.2.58 版本及以上。
* 3. 常見問題及完整 JS-SDK 文檔地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
*
* 開發中遇到問題詳見文檔“附錄5-常見錯誤及解決辦法”解決，如仍未能解決可通過以下渠道反饋：
* 郵箱地址：[email protected]
* 郵件主題：【微信JS-SDK反饋】具體問題
* 郵件內容說明：用簡明的語言描述問題所在，並交代清楚遇到該問題的場景，可附上截屏圖片，微信團隊會盡快處理你的反饋。
*/
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 都要加到這個列表中
‘checkJsApi‘,
‘onMenuShareTimeline‘,
‘onMenuShareAppMessage‘
]
});
var imgUrl = ‘http://app.example.com/images/logo.jpg‘;
var lineLink = ‘http://app.example.com/html/share.html‘;
var descContent = ‘我是副標題，我是小小地描述，分享好友才能看到我‘;
var shareTitle = ‘我是正標題，分享朋友圈和好友都能看到我‘;
wx.ready(function () {
// 在這裏調用 API
wx.onMenuShareTimeline({
title: shareTitle, // 分享標題
link: lineLink, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
imgUrl: imgUrl, // 分享圖標
success: function () {
// 用戶確認分享後執行的回調函數
},
cancel: function () {
// 用戶取消分享後執行的回調函數
}
});
wx.onMenuShareAppMessage({
title: shareTitle, // 分享標題
desc: descContent, // 分享描述
link: lineLink, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
imgUrl: imgUrl, // 分享圖標
type: ‘‘, // 分享類型,music、video或link，不填默認為link
dataUrl:‘‘ , // 如果type是music或video，則要提供數據鏈接，默認為空
success: function () {
// 用戶確認分享後執行的回調函數
},
cancel: function () {
// 用戶取消分享後執行的回調函數
}
});
});
</script>
</html> 2.2.4 用瀏覽器打開要分享的鏈接，此時會出現報錯，Notice：curl_setopt():CURLOPT_SSL_VERIFYHOST no longer accepts the value1,value2 will be used instead in xxx_file_postion on line yyy;
解決方案[3]：
第一種是：
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
第二種是：
按照文檔提示，直接在http://curl.haxx.se/ca/cacert.pem下載證書，放在和jssdk.js同個目錄下
private function httpGet($url) {
$curl = curl_init();
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_TIMEOUT, 500);
// 為保證第三方服務器與微信服務器之間數據傳輸的安全性，所有微信接口采用https方式調用，必須使用下面2行代碼打開ssl安全校驗。
// 如果在部署過程中代碼在此處驗證失敗，請到 http://curl.haxx.se/ca/cacert.pem 下載新的證書判別文件。
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, true);
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, true);
curl_setopt($curl, CURLOPT_URL, $url);
$res = curl_exec($curl);
curl_close($curl);
return $res;
}
2.2.5 然後就可以直接分享到朋友圈或者好友，就可以看到效果了
3 遇到的問題及解決方法
采用2.2.4的第二種加入證書方式，由於access_token和公眾號開發沒有統一（這個分享頁面是一個獨立的項目）沒有統一，導致了報錯Notice：curl_setopt():CURLOPT_SSL_VERIFYHOST no longer accepts the value1,value2 will be used instead in xxx_file_postion on line yyy;此時使用2.2.4的第一種取消SSL驗證就可以通過了，同時也修改了access_token統一管理，讓微信公眾號後臺和其能獲取到一樣的access_token。
4 參考
1 新版本微信下，如何設置"分享到朋友圈"的縮略圖？
2 微信分享網頁時自定義標題、描述和圖片
3 微信curl的證書問題
微信網頁分享標題圖片自定義設置（最新）