背景

        H5開發中幾乎所有專案都要用到自定義分享，見過的分享介面有php引入和ajax呼叫兩種，使用不方便且對程式碼環境有要求。故共享一版可通過javascript檔案引入方式來實現自定義分享的介面（這是15年底做的介面，一直在使用，如果有更簡單便捷的方法歡迎交流）。

        使用這個介面，不管你是php開發的專案還是純前端的html專案，不管是把程式碼放伺服器還是放到OSS CDN，都是OK的，是一件一勞永逸的事情。

實現方法

        根據微信JS-SDK開發文件，實現分享主要有幾個步驟：步驟一，繫結域名。步驟二，引入JS檔案。步驟三，許可權驗證。步驟四，設定自定義分享資訊。

        首先是要有一個認證的微信公眾號，進入 公眾號設定／功能設定／JS介面安全域名，填入專案域名。然後就是第三步，用介面實現許可權驗證。

        這裡不探討具體的實現方法（實現已封裝到jssdk.php檔案），只說明 介面配置和專案呼叫方法。

        介面配置只需填寫公眾號AppID、AppSecret兩個引數，    

require_once "jssdk.php";
$jssdk = new JSSDK("AppID", "AppSecret", $url); // 公眾號AppID、AppSecret
$signPackage = $jssdk->GetSignPackage();
echo "var signPackage=";
die(json_encode($signPackage)); // 返回微信分享所需引數
 

        專案呼叫介面更方便，只需在index.html裡通過javascript引入介面地址即可，

<script>
    document.write("<script src='accessToken/signPackage.php?originUrl=" + window.location.href + "' type='text/javascript'><\/script>");
</script>
<script>
    var baseUrl = "http://xxx.com/";       // 專案地址
    var wxData = {
        "imgUrl" : baseUrl + 'share.jpg',  // 分享圖示
        "link"   : baseUrl,                // 分享地址
        "title"  : '微信分享介面-分享標題',   // 分享標題
        "desc"   : '分享文案'               // 分享文案
    };
    wx.config({
        debug: false,
        appId: signPackage.appId,
        timestamp: parseInt(signPackage.timestamp),
        nonceStr: signPackage.nonceStr,
        signature: signPackage.signature,
        jsApiList: [
            'onMenuShareTimeline',
            'onMenuShareAppMessage'
        ]
    });
    wx.ready(function () {
        wx.onMenuShareTimeline({
            title: wxData.title,
            link: wxData.link,
            imgUrl: wxData.imgUrl,
            success: function () {
            }
        });
        wx.onMenuShareAppMessage({
            title: wxData.title,
            desc: wxData.desc,
            link: wxData.link,
            imgUrl: wxData.imgUrl,
            type: 'link',
            dataUrl: '',
            success: function () {
            }
        });
    });
</script>
 

Demo二維碼

原始碼下載地址

參考連結

-------------------------------  時間分界線：2018.6.26  -------------------------------

        最近一個專案投放微信朋友圈，程式碼部署騰訊伺服器，用到負載均衡共4臺IP不同的伺服器。那麼問題來了，分享介面程式碼部署到4臺伺服器，用於儲存access_token和jsapi_ticket快取的json檔案在不同的地方，那簽名過期重新生成資料必定不同而導致分享配置出錯。

        解決思路，把access_token和jsapi_ticket快取到一個固定的地方，分享介面都去呼叫這個地方的簽名快取檔案。

        具體實現，使用阿里雲的RDS雲資料庫，上面的問題得以解決，而且也能應對高併發。

        資料表設計，如下圖：