ThinkPHP3.2.3內建微信分享JS-SDK實踐

先來看看微信分享效果：

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

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

<b>一、下載下傳微信SDK開發包</b>

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

<b>二、設定安全域名</b>

所有的微信JS接口都隻能在公衆号綁定的域名下調用。登入微信公衆平台，點選左邊的“公衆号設定”，切換到“功能設定”，在“JS接口安全域名”一欄設定安全域名，下載下傳驗證檔案到網站根目錄，再回到視窗點選“确定”（注：在點選“确定”前，設定的域名下都要能在浏覽器下正常通路剛才下載下傳的驗證檔案才能通過驗證）。

<b>三、以第三方插件形式內建到ThinkPHP</b>

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-&gt;filePath = __DIR__.'/';

搜尋access_token.php、jsapi_ticket.php，在檔案名前連接配接上$this-&gt;filePath

<b>四、應用</b>

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-&gt;GetSignPackage();

return $wxconfig;

}

複制代碼

2、控制器調用

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

$wxconfig = wx_share_init();

$this-&gt;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--nsh20pd5ZnAlGF4nz5j33A5wpvImM6P1_QX3azn2Kca1KYOCO9NfeWEQsNng&amp;noncestr=NJVodYffglDbM3fD×tamp=1478161661&amp;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('微信分享初始化失敗！');

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

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

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

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

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萬',// 分享描述