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

目的：微信瀏覽器分享網頁自定義標題、描述和圖片

效果：

pc端：手機端：自定義：

原始方法：（廢棄）

<body>
    <!--此圖片必須放在body標籤的最前面，且高度必須爲屏幕寬度的80%  -->
    <img src="你想要的小縮略圖的路徑" 
style="position:absolute; top:0; left:0;  width: 80%; z-index:-1;opacity: 0; ">

    <!-- 此處放其他元素 -->
</body>

概述

微信JS-SDK是微信公衆平臺面向網頁開發者提供的基於微信內的網頁開發工具包。

通過使用微信JS-SDK，網頁開發者可藉助微信高效地使用拍照、選圖、語音、位置等手機系統的能力，同時可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力，爲微信用戶提供更優質的網頁體驗。

官網說明：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

接入

步驟一：綁定域名

先登錄微信公衆平臺進入“公衆號設置”的“功能設置”裏填寫“JS接口安全域名”。

點擊設置之後，彈出這樣一個輸入框：

然後看看最後調用接口需要些什麼？？？

wx.config({
    debug: true, // 開啓調試模式,調用的所有api的返回值會在客戶端alert出來，
                   // 若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，
                    //僅在pc端時纔會打印。
    appId: '', // 必填，公衆號的唯一標識
    timestamp: , // 必填，生成簽名的時間戳
    nonceStr: '', // 必填，生成簽名的隨機串
    signature: '',// 必填，簽名
    jsApiList: [] // 必填，需要使用的JS接口列表
});

1. 獲取access_token

我們據先獲取access_token：思路很簡單，就是我們用代碼向微信服務器發一個請求，來換取它返回的access_token就行了。在寫代碼直接，我們還要添加ip白名單。這是因爲微信規定，通過開發者ID及密碼調用獲取access_token接口時，需要設置訪問來源IP爲白名單。

 /**
     * AccessToken（）並且存入緩存文件
     * 接口https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$this->appId&secret=$this->appSecret
     * @return mixed
     */
    private function getAccessToken() {
    // access_token 應該全局存儲與更新，以下代碼以寫入到文件中做示例
    $data = json_decode($this->get_php_file("access_token.php"));
    if ($data->expire_time < time()) {
      // 如果是企業號用以下URL獲取access_token
      // $url = "https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=$this->appId&corpsecret=$this->appSecret";
      $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$this->appId&secret=$this->appSecret";
      $res = json_decode($this->httpGet($url));
      $access_token = $res->access_token;
      if ($access_token) {
        $data->expire_time = time() + 7000;
        $data->access_token = $access_token;
        $this->set_php_file("access_token.php", json_encode($data));
      }
    } else {
      $access_token = $data->access_token;
    }
    return $access_token;
  }

2. 用access_token換取jsapi_ticket

用第一步拿到的access_token 採用http GET方式請求獲得jsapi_ticket（有效期7200秒，開發者必須在自己的服務全局緩存jsapi_ticket）：https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

  /**
     * 獲取ticket（）並且存入緩存文件
     * 接口https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$accessToken
     * @return mixed
     */
    private function getJsApiTicket() {
    // jsapi_ticket 應該全局存儲與更新，以下代碼以寫入到文件中做示例
    $data = json_decode($this->get_php_file("jsapi_ticket.php"));
    if ($data->expire_time < time()) {
      $accessToken = $this->getAccessToken();
      // 如果是企業號用以下 URL 獲取 ticket
      // $url = "https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=$accessToken";
      $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$accessToken";
      $res = json_decode($this->httpGet($url));
      $ticket = $res->ticket;
      if ($ticket) {
        $data->expire_time = time() + 7000;
        $data->jsapi_ticket = $ticket;
        $this->set_php_file("jsapi_ticket.php", json_encode($data));
      }
    } else {
      $ticket = $data->jsapi_ticket;
    }

    return $ticket;
  }

成功返回如下JSON：

{
    "errcode":0,
    "errmsg":"ok",
    "ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
    "expires_in":7200
}

這個就要我用access_token再向微信服務器發起請求，然後獲得ticket就行了。但是，這個上面說了，調用次數有限，需要我們緩存，這裏我們直接採用單例來緩存。

3.簽名

獲得jsapi_ticket之後，就可以生成JS-SDK權限驗證的簽名了。就是按順序組裝參數，用SHA-1加密一下就行了。

 public function getSignPackage() {
    $jsapiTicket = $this->getJsApiTicket();

    // 注意 URL 一定要動態獲取，不能 寫死.
    $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
    $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";

    $timestamp = time();
    $nonceStr = $this->createNonceStr();

    // 這裏參數的順序要按照 key 值 ASCII 碼升序排序   必須有序
    $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr&timestamp=$timestamp&url=$url";
    //加密
    $signature = sha1($string);
    //重點是獲取$signPackage
    $signPackage = array(
      "appId"     => $this->appId,//appid
      "nonceStr"  => $nonceStr,//createNonceStr()產生的隨機數
      "timestamp" => $timestamp,//當前時間戳
      "url"       => $url,//當前路徑
      "signature" => $signature,//加密後的字符串
      "rawString" => $string//沒加密的字符串
    );
    return $signPackage; 
  }

類：

<?php
class JSSDK {
  private $appId;
  private $appSecret;

  //定義一個構造方法初始化賦值
  public function __construct($appId, $appSecret) {
    $this->appId = $appId;
    $this->appSecret = $appSecret;
  }

  public function getSignPackage() {
    $jsapiTicket = $this->getJsApiTicket();

    // 注意 URL 一定要動態獲取，不能 寫死.
    $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
    $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";

    $timestamp = time();
    $nonceStr = $this->createNonceStr();

    // 這裏參數的順序要按照 key 值 ASCII 碼升序排序   必須有序
    $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr&timestamp=$timestamp&url=$url";
    //加密
    $signature = sha1($string);
    //重點是獲取$signPackage
    $signPackage = array(
      "appId"     => $this->appId,//appid
      "nonceStr"  => $nonceStr,//createNonceStr()產生的隨機數
      "timestamp" => $timestamp,//當前時間戳
      "url"       => $url,//當前路徑
      "signature" => $signature,//加密後的字符串
      "rawString" => $string//沒加密的字符串
    );
    return $signPackage; 
  }



    /**
     * 獲取ticket（）並且存入緩存文件
     * 接口https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$accessToken
     * @return mixed
     */
    private function getJsApiTicket() {
    // jsapi_ticket 應該全局存儲與更新，以下代碼以寫入到文件中做示例
    $data = json_decode($this->get_php_file("jsapi_ticket.php"));
    if ($data->expire_time < time()) {
      $accessToken = $this->getAccessToken();
      // 如果是企業號用以下 URL 獲取 ticket
      // $url = "https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=$accessToken";
      $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$accessToken";
      $res = json_decode($this->httpGet($url));
      $ticket = $res->ticket;
      if ($ticket) {
        $data->expire_time = time() + 7000;
        $data->jsapi_ticket = $ticket;
        $this->set_php_file("jsapi_ticket.php", json_encode($data));
      }
    } else {
      $ticket = $data->jsapi_ticket;
    }

    return $ticket;
  }

    /**
     * AccessToken（）並且存入緩存文件
     * 接口https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$this->appId&secret=$this->appSecret
     * @return mixed
     */
    private function getAccessToken() {
    // access_token 應該全局存儲與更新，以下代碼以寫入到文件中做示例
    $data = json_decode($this->get_php_file("access_token.php"));
    if ($data->expire_time < time()) {
      // 如果是企業號用以下URL獲取access_token
      // $url = "https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=$this->appId&corpsecret=$this->appSecret";
      $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$this->appId&secret=$this->appSecret";
      $res = json_decode($this->httpGet($url));
      $access_token = $res->access_token;
      if ($access_token) {
        $data->expire_time = time() + 7000;
        $data->access_token = $access_token;
        $this->set_php_file("access_token.php", json_encode($data));
      }
    } else {
      $access_token = $data->access_token;
    }
    return $access_token;
  }

    /**
     * 創建一個隨機數
     * @param int $length
     * @return string
     */
    private function createNonceStr($length = 16) {
        $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
        $str = "";
        for ($i = 0; $i < $length; $i++) {
            $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);
        }
        return $str;
    }
    /**
     * 取文件裏面的值
     * @param $filename
     * @return string
     */
    private function get_php_file($filename) {
    return trim(substr(file_get_contents($filename), 15));
  }
    /**
     * 將值存入文件
     * @param $filename
     * @param $content
     */
    private function set_php_file($filename, $content) {
    $fp = fopen($filename, "w");
    fwrite($fp, "<?php exit();?>" . $content);
    fclose($fp);
  }
    /**
     * 封裝的請求
     * @param $url
     * @return bool|string
     */
    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;
    }
}

注意：
獲取簽名等信息，必須通過服務器返回，不能再前端js生成。
對應生成的ticket，accessToken，注意要緩存，也有有效期，如果不緩存，訪問量大的情況下，被限制。
生成signature所需要的url必須是前端傳入的模式，不能寫死，寫死的話，微信似乎有檢測機制，不能正常的分享成功。

控制器：

Vendor ('jssdk.jssdk');
//實例化一個類
$jssdk = new \JSSDK ('wxXXXXXXXXXXXXX0','8XXXXXXXXXXXXXXXXXXXXX2');
//方法調用
$signPackage = $jssdk->GetsignPackage ();
//傳值
$this->assign('signPackage', $signPackage);

步驟二：引入JS文件

在需要調用JS接口的頁面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.4.0.js

如需進一步提升服務穩定性，當上述資源不可訪問時，可改訪問：http://res2.wx.qq.com/open/js/jweixin-1.4.0.js （支持https）。

注意

如果自己的域名模式是https模式，要使用https模式，不然會出現，block:mixed-content問題；微信js不會執行原因是瀏覽器不允許在https頁面裏嵌入http的請求

步驟三：通過config接口注入權限驗證配置

所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調用（同一個url僅需調用一次，對於變化url的SPA的web app可在每次url變化時進行調用,目前Android微信客戶端不支持pushState的H5新特性，所以使用pushState來實現web app的頁面會導致簽名失敗，此問題會在Android6.2中修復）。

<?php
	
$arr = array(
 'appId' => $signPackage["appId"], 
 'nonceStr' => $signPackage["nonceStr"],
 'timestamp' => $signPackage["timestamp"],
 'signature' => $signPackage["signature"]);
?>

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script>
        var url=window.location.href;
        var img = "img/image.jpg";
        wx.config({
            debug:false,
            appId: "{$arr['appId']}",
            timestamp: "{$arr['timestamp']}",
            nonceStr: "{$arr['nonceStr']}",
            signature: "{$arr['signature']}",
            url:url,
            jsApiList: [
                // 所有要調用的 API 都要加到這個列表中
                "onMenuShareTimeline",     //分享給好友  
                "onMenuShareAppMessage",   //分享到朋友圈  
                "onMenuShareQQ",           //分享到QQ  
                "onMenuShareWeibo",        //分享到微博
            ]
        });
        wx.ready(function (){
            var shareData = {
                title: "{$post_title}",
                desc: url,
                link: url,
                imgUrl: img,
            };
            // 在這裏調用 API
            wx.onMenuShareAppMessage(shareData);
            wx.onMenuShareTimeline(shareData);
    
        });
    </script>

接口調用說明

所有接口通過wx對象(也可使用jWeixin對象)來調用，參數是一個對象，除了每個接口本身需要傳的參數之外，還有以下通用參數：

success：接口調用成功時執行的回調函數。
fail：接口調用失敗時執行的回調函數。
complete：接口調用完成時執行的回調函數，無論成功或失敗都會執行。
cancel：用戶點擊取消時的回調函數，僅部分有用戶取消操作的api纔會用到。
trigger: 監聽Menu中的按鈕點擊時觸發的方法，該方法僅支持Menu中的相關接口。

備註：不要嘗試在trigger中使用ajax異步請求修改本次分享的內容，因爲客戶端分享操作是一個同步操作，這時候使用ajax的回包會還沒有返回。

以上幾個函數都帶有一個參數，類型爲對象，其中除了每個接口本身返回的數據之外，還有一個通用屬性errMsg，其值格式如下：

調用成功時："xxx:ok" ，其中xxx爲調用的接口名

用戶取消時："xxx:cancel"，其中xxx爲調用的接口名

調用失敗時：其值爲具體錯誤信息

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

概述

接入

接口調用說明

Vue入門到放棄14（vue-resource 實現 get, post, jsonp請求）

JS控制頁面加載（當頁面滾動到某個地方纔加載）

Vue入門到放棄13（vue實例的生命週期）

Vue入門到放棄09（ Vue過濾器）

Vue入門到放棄18（Vue列表動畫-添加刪除）

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結