Angularjs+ThinkPHP3.2.3集成微信分享JS-SDK實踐

先來看看微信分享效果：

在沒有集成微信分享js-sdk前是這樣的：沒有摘要，縮略圖任意抓取正文圖片

 

在集成微信分享js-sdk後是這樣的：標題，摘要，縮略圖自定義

 

1、下載微信SDK開發包

下載地址：http://demo.open.weixin.qq.com/jssdk/sample.zip

2、設置安全域名

全部的微信JS接口都只能在公衆號綁定的域名下調用。登陸微信公衆平臺，點擊左邊的「公衆號設置」，切換到「功能設置」，在「JS接口安全域名」一欄設置安全域名，下載驗證文件到網站根目錄，再回到窗口點擊「肯定」（注：在點擊「肯定」前，設置的域名下都要能在瀏覽器下正常訪問剛纔下載的驗證文件才能經過驗證）。

 

3、以第三方插件形式集成到ThinkPHP

一、解壓微信SDK開發包，將jssdk.PHP、access_token.php、jsapi_ticket.php複製到插件目錄ThinkPHP/Library/Org/Util下，重命名jssdk.php爲Jssdk.class.php（符合TP加載規則的文件名）。

 

二、修改access_token.php、jsapi_ticket.php的讀寫路徑。打開Jssdk.class.php文件，加入私有屬性private $filePath;

在構造函數中設置屬性爲當前文件路徑：$this->filePath = __DIR__.'/';

搜索access_token.php、jsapi_ticket.php，在文件名前鏈接上$this->filePath

 

4、應用

一、在PHP接口處寫一函數調用，$url爲angularjs訪問接口時傳過來的參數，保證請求地址和調用地址一致

//獲取微信jssdk配置信息
    public function getwxconfig(){
        $url=$_GET['url'];
        $jssdk = new \Org\Util\Jssdk(_APPID_, _APPSECRET_,$url);
        $signPackage = $jssdk->GetSignPackage();
        if(empty($signPackage)){
            $this->response(array('success'=>0,'info'=>'讀取錯誤'),'json');
        }else{
            $this->response(array('success'=>1,'info'=>'讀取成功','appid'=>$signPackage['appId'],'timestamp'=>$signPackage['timestamp'],'nonceStr'=>$signPackage['nonceStr'],'signature'=>$signPackage['signature']),'json');
        }
    }

二、angularjs代碼

$http.get("/h5n/games/web/getwxconfig?url="+encodeURIComponent('http://youxi919.com/h5web/'))
    .success(function (response) {
        if(response.success==1){
            wx.config({
              debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
              appId: response.appid, // 必填，公衆號的惟一標識
              timestamp: response.timestamp, // 必填，生成簽名的時間戳
              nonceStr: response.nonceStr, // 必填，生成簽名的隨機串
              signature: response.signature,// 必填，簽名，見附錄1
              jsApiList: [
                            'checkJsApi',
                            'onMenuShareTimeline',
                            'onMenuShareAppMessage',
                            'onMenuShareQQ',
                            'onMenuShareWeibo'
                          ] // 必填，須要使用的JS接口列表，全部JS接口列表見附錄2
            });
            
        }else{
        };
    });
    wx.ready(function () {
        wx.onMenuShareAppMessage({              //配置分享給朋友接口
            title: '分享的標題', // 分享標題
            desc: '這是一個測試分享', // 分享描述
            link: location.href, // 分享連接
            imgUrl: '', // 分享圖標
            type: '', // 分享類型,music、video或link，不填默認爲link
            dataUrl: '', // 若是type是music或video，則要提供數據連接，默認爲空
            success: function () { 
                // 用戶確認分享後執行的回調函數
            },
            cancel: function () { 
                // 用戶取消分享後執行的回調函數
            }
        })
     });

 

以上使用場景：

若是是先後臺端分離的網站架構（也就是經過api接口的形式），前端必然要用到ajax請求，會出現一個問題：

被請求的網址與調用的網址不一致，微信SDK會提示簽名無效。提供一個解決辦法是：把調用的網址當成參數發回給服務器端，再生成微信簽名。