先來(lái)看看微信分享效果：
在沒(méi)有集成微信分享js-sdk前是這樣的：沒(méi)有摘要，縮略圖任意抓取正文圖片
在集成微信分享js-sdk后是這樣的：標(biāo)題，摘要，縮略圖自定義
一、下載微信SDK開(kāi)發(fā)包
下載地址：http://demo.open.weixin.qq.com/jssdk/sample.zip
二、設(shè)置安全域名
所有的微信JS接口都只能在公眾號(hào)綁定的域名下調(diào)用。登錄微信公眾平臺(tái)，點(diǎn)擊左邊的“公眾號(hào)設(shè)置”，切換到“功能設(shè)置”，在“JS接口安全域名”一欄設(shè)置安全域名，下載驗(yàn)證文件到網(wǎng)站根目錄，再回到窗口點(diǎn)擊“確定”（注：在點(diǎn)擊“確定”前，設(shè)置的域名下都要能在瀏覽器下正常訪問(wèn)剛才下載的驗(yàn)證文件才能通過(guò)驗(yàn)證）。
三、以第三方插件形式集成到ThinkPHP
1、定義第三方類庫(kù)目錄（也可以放置在TP框架默認(rèn)的插件目錄ThinkPHP/Library/Vendor/）。
在入口文件中加入define('VENDOR_PATH' APP_PATH .'Common/Vendor/');
2、在\Application\Common\Vendor文件夾下新建文件夾Wxshare，解壓微信SDK開(kāi)發(fā)包，將jssdk.PHP、access_token.php、jsapi_ticket.php復(fù)制到Wxshare，重命名jssdk.php為class.jssdk.php（符合TP加載規(guī)則的文件名）。
3、修改access_token.php、jsapi_ticket.php的讀寫(xiě)路徑。打開(kāi)class.jssdk.php文件，加入私有屬性private $filePath;
在構(gòu)造函數(shù)中設(shè)置屬性為當(dāng)前文件路徑：$this->filePath = __DIR__.'/';
搜索access_token.php、jsapi_ticket.php，在文件名前連接上$this->filePath
四、應(yīng)用
1、在公共函數(shù)庫(kù)寫(xiě)一函數(shù)方便調(diào)用
/**
* 微信分享初始化
* @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");//這里配置了微信公眾號(hào)的AppId和AppSecret
$jssdk =new JSSDK($config['APPID'], $config['APPSECRET']);
$wxconfig = $jssdk->GetSignPackage();
return $wxconfig;
}
}
復(fù)制代碼
2、控制器調(diào)用
在需要做微信分享的控制器方法中調(diào)用：
$wxconfig = wx_share_init();
$this->assign('wxconfig', $wxconfig);
復(fù)制代碼
3、模板填充
在模板文件尾部加入：
wx.config({
debug:false,// 是否開(kāi)啟調(diào)試模式
appId:'',// 必填，微信號(hào)AppID
timestamp:,// 必填，生成簽名的時(shí)間戳
nonceStr:'',// 必填，生成簽名的隨機(jī)串
signature:'',// 必填，簽名，見(jiàn)附錄1
jsApiList:['onMenuShareTimeline',//分享到朋友圈
'onMenuShareAppMessage',//分享給朋友
'onMenuShareQQ'//分享到QQ
]// 必填，需要使用的JS接口列表，所有JS接口列表見(jiàn)附錄2
});
wx.ready(function(){
var options ={
title:'',// 分享標(biāo)題
link:'http://www.xxx.com/news/detail/id/',// 分享鏈接，記得使用絕對(duì)路徑
imgUrl:'http://www.xxx.com/',// 分享圖標(biāo)，記得使用絕對(duì)路徑
desc:'',// 分享描述
success:function(){
console.info('分享成功！');
// 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
},
cancel:function(){
console.info('取消分享！');
// 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
}
}
wx.onMenuShareTimeline(options);// 分享到朋友圈
wx.onMenuShareAppMessage(options);// 分享給朋友
wx.onMenuShareQQ(options);// 分享到QQ
});
復(fù)制代碼
到此完成！在微信中訪問(wèn)網(wǎng)址并分享試試看效果。
五、查閱開(kāi)發(fā)文檔
微信JS-SDK Demo地址：http://demo.open.weixin.qq.com
常見(jiàn)問(wèn)題及完整 JS-SDK 文檔地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
-----------------------------------------------------------------------------------------------------------------
補(bǔ)充一個(gè)使用場(chǎng)景：
如果是前后臺(tái)端分離的網(wǎng)站架構(gòu)（也就是通過(guò)api接口的形式），前端必然要用到ajax請(qǐng)求，會(huì)出現(xiàn)一個(gè)問(wèn)題：
被請(qǐng)求的網(wǎng)址與調(diào)用的網(wǎng)址不一致，微信SDK會(huì)提示簽名無(wú)效。提供一個(gè)解決辦法是：把調(diào)用的網(wǎng)址當(dāng)成參數(shù)發(fā)回給服務(wù)器端，再生成微信簽名。
示例代碼：
1、后端代碼（如請(qǐng)求：/api/common/wxshareinit）將獲取的微信簽名參數(shù)打包成一個(gè)JSON，格式如：
{
"appId":"XXXXX",
"nonceStr":"XXXXXXXX",
"timestamp":1478161661,
"url":"http:\/\/www.xxx.com\/news\/detail\/id\/54",
"signature":"aa4eeec5e1ad6f39c85cd4f3c1147329a16eb784",
"rawString":"jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VIqb--nsh20pd5ZnAlGF4nz5j33A5wpvImM6P1_QX3azn2Kca1KYOCO9NfeWEQsNng&noncestr=NJVodYffglDbM3fD×tamp=1478161661&url=http:\/
\/www.xxx.com\/news\/detail\/id\/54"
}
復(fù)制代碼
2前端頁(yè)面調(diào)用：
var wxconfig =[];//定義一個(gè)全局的保存微信配置的變量
$(function(){
$.ajax({
async:false,//這里設(shè)為同步請(qǐng)求（重要）
type:'POST',
url:'/api/common/wxshareinit',//被請(qǐng)求的網(wǎng)址
data:{url:document.URL},//將當(dāng)前調(diào)用網(wǎng)址發(fā)回給服務(wù)器做簽名用
dateType:'JSON',
cache:false,
success:function(result){
wxconfig = result.data;
},
error:function(){
alert('微信分享初始化失??！');
}
});
wx.config({
debug:false,// 是否開(kāi)啟調(diào)試模式
appId: wxconfig.appId,// 必填，微信號(hào)AppID
timestamp: wxconfig.timestamp,// 必填，生成簽名的時(shí)間戳
nonceStr: wxconfig.nonceStr,// 必填，生成簽名的隨機(jī)串
signature: wxconfig.signature,// 必填，簽名，見(jiàn)附錄1
jsApiList:['onMenuShareTimeline',//分享到朋友圈
'onMenuShareAppMessage',//分享給朋友
'onMenuShareQQ'//分享到QQ
]// 必填，需要使用的JS接口列表，所有JS接口列表見(jiàn)附錄2
});
wx.ready(function(){
var options ={
title:'【有料】3號(hào)產(chǎn)品神秘體驗(yàn)，到底爽在哪？—xxx平臺(tái)',// 分享標(biāo)題
link:'http://www.xxx.com/news/detail/id/52',// 分享鏈接
imgUrl:'http://www.xxx.com/Uploads/News/2016-11/1477995152201598.jpg',// 分享圖標(biāo)
desc:'年化收益9.9%，3個(gè)月到期還本付息，起購(gòu)門(mén)檻20萬(wàn)',// 分享描述
success:function(){
console.info('分享成功！');
// 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
},
cancel:function(){
console.info('取消分享！');
// 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
}
}
wx.onMenuShareTimeline(options);// 分享到朋友圈
wx.onMenuShareAppMessage(options);// 分享給朋友
wx.onMenuShareQQ(options);// 分享到QQ
});
});
