微信網頁分享標題圖片自定義設置（最新）

時間 2019-11-22

標籤微信網頁分享標題圖片自定義設置最新欄目 HTML 简体版

原文原文鏈接

1 前言javascript

恰好有微信網頁分享標題圖片自定義設置這個需求，而後查找文檔，發現有兩種方案^[1]，可是第一種方案已經失效了，只能走第二種方案，而後根據實戰配置好了，本文會寫上配置中遇到的問題和解決方案，也做爲記錄使用，方便本身也方便他人。php

2 步驟html

2.1 準備工做java

2.1.1 微信JS-SDK說明文檔：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115node

2.1.2 附錄6-DEMO頁面和示例代碼：在JS-SDK說明文檔中的附錄6下載示例代碼，下載連接：http://demo.open.weixin.qq.com/jssdk/sample.zippython

直接下載會出現警告（chrome瀏覽器下），以下圖：
此時建議用IE或者其它瀏覽器下載下來，而後裏面有4種經常使用代碼的demo包可供使用
備註：連接中包含php、java、nodejs以及python的示例代碼供第三方參考，第三方切記要對獲取的accesstoken以及jsapi_ticket進行緩存以確保不會觸發頻率限制。

2.1.3 Demo頁面：http://demo.open.weixin.qq.com/jssdk，建議直接用微信掃其二維碼chrome

2.1.4 你須要分享的連接的域名須要在微信上JS安全域名進行設置，而後把相似MP_verify_HD1YQU88nBxyhisnY.txt文件放到項目的根目錄下便可segmentfault

2.2 以php爲例api

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

1 新版本微信下，如何設置"分享到朋友圈"的縮略圖？

2 微信分享網頁時自定義標題、描述和圖片

3 微信curl的證書問題