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

時間 2019-12-18

標籤 thinkphp3.2.3 thinkphp 集成微信分享 sdk 實踐欄目 PHP 简体版

原文原文鏈接

先來看看微信分享效果：
php

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

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

1、下載微信SDK開發包ajax

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

2、設置安全域名api

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

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

一、定義第三方類庫目錄（也能夠放置在TP框架默認的插件目錄ThinkPHP/Library/Vendor/）。服務器

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

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

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

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

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

4、應用

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

/**

* 微信分享初始化

* @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;

}

複製代碼

二、控制器調用

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

$wxconfig = wx_share_init();

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

複製代碼

三、模板填充

在模板文件尾部加入：

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

});

複製代碼

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

5、查閱開發文檔

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

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

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

補充一個使用場景：

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

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

示例代碼：

一、後端代碼（如請求：/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&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',