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 參考