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

先來看看微信分享效果：

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

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

一、下載微信SDK開發包

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

二、設置安全域名

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

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

1、定義第三方類庫目錄（也可以放置在TP框架默認的插件目錄ThinkPHP/Library/Vendor/）。

在入口文件中加入define('VENDOR_PATH' APP_PATH .'Common/Vendor/');

2、在\Application\Common\Vendor文件夾下新建文件夾Wxshare，解壓微信SDK開發包，將jssdk.PHP、access_token.php、jsapi_ticket.php復制到Wxshare，重命名jssdk.php為class.jssdk.php（符合TP加載規則的文件名）。

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

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

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

四、應用

1、在公共函數庫寫一函數方便調用

/**

* 微信分享初始化

* @return array

* @author simon

*/

if(!function_exists('wx_share_init')){

function wx_share_init(){

$wxconfig = array();

vendor('Wxshare.class#jssdk');

$config = APP_DEBUG ? C("WECHAT_SDK_TEST"): C("WECHAT_SDK");//這里配置了微信公眾號的AppId和AppSecret

$jssdk =new JSSDK($config['APPID'], $config['APPSECRET']);

$wxconfig = $jssdk->GetSignPackage();

return $wxconfig;

}

}

復制代碼

2、控制器調用

在需要做微信分享的控制器方法中調用：

$wxconfig = wx_share_init();

$this->assign('wxconfig', $wxconfig);

復制代碼

3、模板填充

在模板文件尾部加入：

wx.config({

debug:false,// 是否開啟調試模式

appId:'',// 必填，微信號AppID

timestamp:,// 必填，生成簽名的時間戳

nonceStr:'',// 必填，生成簽名的隨機串

signature:'',// 必填，簽名，見附錄1

jsApiList:['onMenuShareTimeline',//分享到朋友圈

'onMenuShareAppMessage',//分享給朋友

'onMenuShareQQ'//分享到QQ

]// 必填，需要使用的JS接口列表，所有JS接口列表見附錄2

});

wx.ready(function(){

var options ={

title:'',// 分享標題

link:'http://www.xxx.com/news/detail/id/',// 分享鏈接，記得使用絕對路徑

imgUrl:'http://www.xxx.com/',// 分享圖標，記得使用絕對路徑

desc:'',// 分享描述

success:function(){

console.info('分享成功！');

// 用戶確認分享后執行的回調函數

},

cancel:function(){

console.info('取消分享！');

// 用戶取消分享后執行的回調函數

}

}

wx.onMenuShareTimeline(options);// 分享到朋友圈

wx.onMenuShareAppMessage(options);// 分享給朋友

wx.onMenuShareQQ(options);// 分享到QQ

});

復制代碼

到此完成！在微信中訪問網址并分享試試看效果。

五、查閱開發文檔

微信JS-SDK Demo地址：http://demo.open.weixin.qq.com

常見問題及完整 JS-SDK 文檔地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html

-----------------------------------------------------------------------------------------------------------------

補充一個使用場景：

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

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

示例代碼：

1、后端代碼（如請求：/api/common/wxshareinit）將獲取的微信簽名參數打包成一個JSON，格式如：

{

"appId":"XXXXX",

"nonceStr":"XXXXXXXX",

"timestamp":1478161661,

"url":"http:\/\/www.xxx.com\/news\/detail\/id\/54",

"signature":"aa4eeec5e1ad6f39c85cd4f3c1147329a16eb784",

"rawString":"jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VIqb--nsh30pd5ZnAlGF4nz5j33A5wpvImM6P1_QX3azn2Kca1KYOCO9NfeWEQsNng&noncestr=NJVodYffglDbM3fD×tamp=1478161661&url=http:\/

\/www.xxx.com\/news\/detail\/id\/54"

}

復制代碼

2前端頁面調用：

var wxconfig =[];//定義一個全局的保存微信配置的變量

$(function(){

$.ajax({

async:false,//這里設為同步請求（重要）

type:'POST',

url:'/api/common/wxshareinit',//被請求的網址

data:{url:document.URL},//將當前調用網址發回給服務器做簽名用

dateType:'JSON',

cache:false,

success:function(result){

wxconfig = result.data;

},

error:function(){

alert('微信分享初始化失敗！');

}

});

wx.config({

debug:false,// 是否開啟調試模式

appId: wxconfig.appId,// 必填，微信號AppID

timestamp: wxconfig.timestamp,// 必填，生成簽名的時間戳

nonceStr: wxconfig.nonceStr,// 必填，生成簽名的隨機串

signature: wxconfig.signature,// 必填，簽名，見附錄1

jsApiList:['onMenuShareTimeline',//分享到朋友圈

'onMenuShareAppMessage',//分享給朋友

'onMenuShareQQ'//分享到QQ

]// 必填，需要使用的JS接口列表，所有JS接口列表見附錄2

});

wx.ready(function(){

var options ={

title:'【有料】3號產品神秘體驗，到底爽在哪？—xxx平臺',// 分享標題

link:'http://www.xxx.com/news/detail/id/52',// 分享鏈接

imgUrl:'http://www.xxx.com/Uploads/News/2016-11/1477995152201598.jpg',// 分享圖標

desc:'年化收益9.9%，3個月到期還本付息，起購門檻20萬',// 分享描述

success:function(){

console.info('分享成功！');

// 用戶確認分享后執行的回調函數

},

cancel:function(){

console.info('取消分享！');

// 用戶取消分享后執行的回調函數

}

}

wx.onMenuShareTimeline(options);// 分享到朋友圈

wx.onMenuShareAppMessage(options);// 分享給朋友

wx.onMenuShareQQ(options);// 分享到QQ

});

});