微信分享筆記（第二版）

週日過來擼了一下微信分享的功能，翻了以前的部落格，微信分享等api筆記，發現寫的真的好混亂，還有有一些點當時都寫錯了，順手重新記錄一遍吧。

個人部落格原文

準備工作

首先是肯定參考 微信JS-SDK說明文件，如果你還沒有認證之後，開通了分享介面的微信公共號，可以在 微信公眾平臺 -> 開發者工具->公共平臺測試工具 ，申請一個測試號。

自動分配 一個測試公眾號，AppID ，AppSecret，這樣就可以做 Token 驗證和今天的主角 微信分享 了。按照 微信JS-SDK說明文件 JSSDK使用步驟，步驟一：繫結域名，在這個頁面要設定 JS介面安全域名。

注意：個人主體的公眾號，是無法使用這個功能的。

另外：如果是真實的公眾平臺是需要驗證檔案的。

使用JSSDK

做完一些基礎配置之後，專案中分別要做兩件事情

服務端驗籤

獲取 access_token 之後 獲取 jsapi_ticket ，最後生成簽名 signature ，和生成簽名的引數一起返回給前端。

    /**
     * @var string
     * APPID & APPSECRET
     */
    private $APPID = "你的APPID";
    private $APPSECRET = "你的APPSECRET";

    /**
     * @return array
     * 生成簽名config
     */
    public function outWeixin()
    {
        $jsapi_ticket = $this->getJsApiTicket();
        $nonceStr = 'leon0204';
        $url = "https://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";//獲取當前不帶＃和hash值的url
        $timestamp = time();//當前時間戳
        $string1 = "jsapi_ticket=" . $jsapi_ticket . "&noncestr=" . $nonceStr . "&timestamp=" . $timestamp . "&url=" . $url;//按微信規定連線的字串
        $signature = sha1($string1);//加密
        $wxJsConfig = array();
        $wxJsConfig['AppID'] = $this->APPID;
        $wxJsConfig['timestamp'] = $timestamp;
        $wxJsConfig['nonceStr'] = $nonceStr;
        $wxJsConfig['signature'] = $signature;
        return $wxJsConfig;
    }

    /**
     * @return string
     * 獲取jsapi_ticket
     */
    private function getJsApiTicket()
    {
        $access_token = $this->getAccessToken();
        $jsapi_ticket = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" . $access_token . "&type=jsapi";
        $res = file_get_contents($jsapi_ticket); //獲取檔案內容或獲取網路請求的內容
        $result = json_decode($res, true); //接受一個 JSON 格式的字串並且把它轉換為 PHP 變數
        $jsapi_ticket = $result['ticket'];
        return $jsapi_ticket;
    }

    /**
     * @return mixed
     * 獲取access_token
     */
    private function getAccessToken()
    {
        $token_access_url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" . $this->APPID . "&secret=" . $this->APPSECRET;
        $res = file_get_contents($token_access_url); //獲取檔案內容或獲取網路請求的內容
        $result = json_decode($res, true); //接受一個 JSON 格式的字串並且把它轉換為 PHP 變數
        $wxdata['access_token'] = $result['access_token'];
        $access_token = $wxdata['access_token'];
        return $access_token;
    }

Important ！ 這裡偷懶沒有寫快取 access_token 和 jsapi_ticket ，實際上一定要寫的。7200S 有效期，自己隨便通過什麼辦法設定快取就好了，不要每次都請求介面。

頁面使用 Jssdk

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
    //微信
    wx.config({
        debug: false, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。
        appId: '{{$wx['AppID']}}', // 必填，公眾號的唯一標識
        timestamp: {{$wx['timestamp']}}, // 必填，生成簽名的時間戳
        nonceStr: '{{$wx['nonceStr']}}', // 必填，生成簽名的隨機串
        signature: '{{$wx['signature']}}',// 必填，簽名
        jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'] // 必填，需要使用的JS介面列表
    });
    @foreach($articleList as $value)
@section('pageDesc')@endsection
    wx.ready(function () {
        wx.onMenuShareTimeline({
            title: '有人邀請你看：{{$value->title}}', // 分享標題
            link: window.location.href, // 分享連結
            imgUrl: '', // 分享圖示
            success: function () {
                // 使用者確認分享後執行的回撥函式
                alert('分享成功');
            },
            cancel: function () {
                // 使用者取消分享後執行的回撥函式
                alert('取消分享');
            }
        });
        wx.onMenuShareAppMessage({
            title: '有人邀請你看：{{$value->title}}', // 分享標題
            desc: '{{$value->description}}', // 分享描述
            link: window.location.href, // 分享連結，該連結域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
            imgUrl: '', // 分享圖示
            type: '', // 分享型別,music、video或link，不填預設為link
            dataUrl: '', // 如果type是music或video，則要提供資料連結，預設為空
            success: function () {
                // 使用者確認分享後執行的回撥函式
                alert('分享成功');
            },
            cancel: function () {
                // 使用者取消分享後執行的回撥函式
                alert('取消分享');
            }
        });

    });
    @endforeach
</script>

這裡模版引擎是 Laravel 中的 blade 。

這樣就完成分享啦

坑點

開啟 debug: true 方便除錯。

1 參考之前的部落格，一個點造成了簽名錯誤：

$string1 = "jsapi_ticket=".$jsapi_ticket."&noncestr=".$nonceStr."×tamp=".$timestamp."&url=".$url;//按微信規定連線的字串  
// ×tamp 應該是 &timestamp ，也不知道之前是怎麼記錄的，坑了半天 

這個簽名是通過 微信 JS 介面簽名校驗工具 輸入生成簽名的引數，和微信生成的簽名對比，看出來我的簽名演算法有問題。

2 提示 invalid url domain ，是我把域名設定成了 Https ，實際上寫域名 www.xxx.com 就可以了 。

3 簽名成功之後，發現分享時候，配置的標題沒有生效，因為是在微信客戶端測試的，後來退出微信客戶端搞定。

4 如果前端用 axios 或者 ajax 調介面，可能獲取不到 url ， 需要約定傳遞 url 引數 。axios 跨域 可以設定 header 解決 。