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-常見錯誤及解決辦法”解決,如仍未能解決可通過以下渠道反饋:
* 郵箱地址:weixin-open@qq.com
* 郵件主題:【微信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 參考
