動態頁微信分享 · TP5常用代碼

[TOC] ## 一、前端 ~~~ <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> <script type="text/javascript"> // 通過config接口注入權限驗證配置 wx.config({ debug: false, appId: '{$data.appId}', timestamp: '{$data.timestamp}', nonceStr: '{$data.nonceStr}', signature: '{$data.signature}', jsApiList: [ 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareQZone', 'onMenuShareWeibo' ] }); // 通過ready接口處理成功驗證 wx.ready(function(){ wx.onMenuShareTimeline({ title: '{$info.title}', link: '{if condition='$static'}{$data.url}{else/}{:url('info',['id'=>$vo.id,'catid'=>$vo.catid])}{/if}', imgUrl: 'http://xxx/uploads/image/{$info.thumb}', success: function () {} }); wx.onMenuShareAppMessage({ title: '{$info.title}', desc: '{$info.description}', link: '{if condition='$static'}{$data.url}{else/}{:url('info',['id'=>$vo.id,'catid'=>$vo.catid])}{/if}', imgUrl: 'http://xxx/uploads/image/{$info.thumb}', type: 'link', dataUrl: '', success: function () {} }); wx.onMenuShareQQ({ title: '{$info.title}', desc: '{$info.description}', link: '{if condition='$static'}{$data.url}{else/}{:url('info',['id'=>$vo.id,'catid'=>$vo.catid])}{/if}', imgUrl: 'http://xxx/uploads/image/{$info.thumb}', success: function () {}, cancel: function () {} }); wx.onMenuShareQZone({ title: '{$info.title}', desc: '{$info.description}', link: '{if condition='$static'}{$data.url}{else/}{:url('info',['id'=>$vo.id,'catid'=>$vo.catid])}{/if}', imgUrl: 'http://xxx/uploads/image/{$info.thumb}', success: function () {}, cancel: function () {} }); wx.onMenuShareWeibo({ title: '{$info.title}', desc: '{$info.description}', link: '{if condition='$static'}{$data.url}{else/}{:url('info',['id'=>$vo.id,'catid'=>$vo.catid])}{/if}', imgUrl: 'http://xxx/uploads/image/{$info.thumb}', success: function () {}, cancel: function () {} }); }); </script> ~~~ ## 二、后端 ### 1、接口調用 ~~~ public function interfaceCall(){ $id = input('id',0);//ID $catid = input('catid',0);//分類ID $modelInfo = getModInfoById($catid); $info = Db::name($modelInfo['tablename'])->where('id',$id)->find(); $catinfo = getCatInfoById($catid); $p_catname = getCatInfoById($catinfo['parentid'],'catname'); //微信接口調用 $obj = new Jssdk(); $data = $obj->sign($catid,$id); $this->assign('info',$info); $this->assign('catid',$catid); $this->assign('catname',$catinfo['catname']); $this->assign('p_catname',$p_catname); $this->assign('data',$data); return view('../application/index/view/default/index/' . $modelInfo['show_template']); } ~~~ ### 2、微信接口 ~~~ <?php namespace util; /** +------------------------------------------------ * ThinkPHP5集成JS-SDK實現微信自定義分享功能 +------------------------------------------------ +------------------------------------------------ * @date 2018年8月15 +------------------------------------------------ */ class Jssdk { protected $appid = '你的接口ID'; protected $secret = '你的接口密碼'; /** * 獲取access_token方法 */ public function getAccessToken(){ //定義文件名稱 $name = 'token_' . md5($this->appid . $this->secret); //定義存儲文件路徑 // $filename = __DIR__ . '/cache/' . $name . '.php'; $filename = '../runtime/temp/' . $name . '.php'; //判斷文件是否存在,如果存在,就取出文件中的數據值,如果不存在,就向微信端請求 if (is_file($filename) && filemtime($filename) + 7100 > time()){ $result = include $filename; //定義需要返回的內容$data $data = $result['access_token']; }else{ // https請求方式: GET // https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET // 調用curl方法完成請求 $url = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='.$this->appid.'&secret=' . $this->secret; $result = $this->curl($url); //將返回得到的json數據轉成php數組 $result = json_decode($result,true); //將內容寫入文件中 file_put_contents($filename,"<?php\nreturn " . var_export($result,true) . ";\n?>"); //定義需要返回的內容 $data = $result['access_token']; } //將得到的access_token的值返回 return $data; } /** * * 獲取臨時票據方法 * * @return mixed */ public function getJsapiTicket(){ //存入文件中,定義文件的名稱和路徑 $name = 'ticket_' . md5($this->appid . $this->secret); //定義存儲文件路徑 //$filename = __DIR__ . '/cache/' . $name . '.php'; $filename = '../runtime/temp/' . $name . '.php'; //判斷是否存在臨時票據的文件,如果存在,就直接取值,如果不存在,就發送請求獲取并保存 if (is_file($filename) && filemtime($filename) + 7100 > time()){ $result = include $filename; }else{ //定義請求地址 $url = 'https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token='.$this ->getAccessToken().'&type=jsapi'; //使用curl方法發送請求,獲取臨時票據 $result = $this->curl($url); //轉換成php數組 $result = json_decode($result,true); //將獲取到的值存入文件中 file_put_contents($filename,"<?php\nreturn " . var_export($result,true) . ";\n?>"); } //定義返回的數據 $data = $result['ticket']; //將得到的臨時票據結果返回 return $data; } /** * 獲取簽名方法 */ public function sign($cid,$id){ //需要定義4個參數,分別包括隨機數,臨時票據,時間戳和當前url地址 $nonceStr = $this->makeStr(); $ticket = $this->getJsapiTicket(); $time = time(); //組合url //$url = $_SERVER['REQUEST_SCHEME'] . '://' . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI']; $url = 'http://' . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI']; //$url = 'http://' . $_SERVER['SERVER_NAME'] . 'a/show_' . $cid . '_' . $id . '.html'; //將4個參數放入一個數組中 $arr = [ 'noncestr=' . $nonceStr, 'jsapi_ticket=' . $ticket, 'timestamp=' . $time, 'url=' . $url ]; //對數組進行字段化排序 sort($arr,SORT_STRING); //對數組進行組合成字符串 $string = implode('&',$arr); //將字符串加密生成簽名 $sign = sha1($string); //由于調用簽名方法的時候不只需要簽名,還需要生成簽名的時候的隨機數,時間戳,所以我們應該返回由這些內容組成的一個數組 $reArr = [ 'appId' => $this->appid, 'timestamp' => $time, 'nonceStr' => $nonceStr, 'signature' => $sign, 'url' => $url ]; //將數組返回 return $reArr; } /** * * 生成隨機數 * * @return string */ protected function makeStr(){ //定義字符串組成的種子 $seed = 'wwwianrendong5tgblaochaguan8ik9500net'; //通過循環來組成一個16位的隨機字符串 //定義一個空字符串用來接收組合成的字符串內容 $str = ''; for ($i = 0;$i < 16; $i++){ //定義一個隨機數 $num = rand(0,strlen($seed) - 1); //循環連接隨機生成的字符串 $str .= $seed[$num]; } //將隨機數返回 return $str; } /** * * 服務器之間請求的curl方法 * * @param $url 請求地址 * @param array $field post參數 * @return string */ public function curl($url,$field = []){ //初始化curl $ch = curl_init(); //設置請求的地址 curl_setopt($ch,CURLOPT_URL,$url); //設置接收返回的數據,不直接展示在頁面 curl_setopt($ch,CURLOPT_RETURNTRANSFER,1); //設置禁止證書校驗 curl_setopt($ch,CURLOPT_SSL_VERIFYPEER,false); curl_setopt($ch,CURLOPT_SSL_VERIFYHOST,false); //判斷是否為post請求方式,如果傳遞了第二個參數,就代表是post請求,如果么有傳遞,第二個參數為空,就是get請求 if (!empty($field)){ //設置請求超時時間 curl_setopt($ch,CURLOPT_TIMEOUT,30); //設置開啟post curl_setopt($ch,CURLOPT_POST,1); //傳遞post數據 curl_setopt($ch,CURLOPT_POSTFIELDS,$field); } //定義一個空字符串,用來接收請求的結果 $data = ''; if (curl_exec($ch)){ $data = curl_multi_getcontent($ch); } //關閉curl curl_close($ch); //將得到的結果返回 return $data; } } //測試獲取access_token值的方法 //$obj = new Wx(); //$data = $obj->getAccessToken(); //echo $data; //測試獲取jsapiticket方法 //$obj = new Wx(); //$data = $obj->getJsapiTicket(); //echo $data; //測試生成簽名方法 //$obj = new Wx(); //$data = $obj->sign(); //echo '<pre>'; //print_r($data); ?> ~~~ ## 三、靜態頁微信分享參考網址：[html靜態頁面實現微信分享思路](https://www.cnblogs.com/phpper/p/6604903.html) 微信分享網頁的時候，希望分享出來的鏈接是標題+描述+縮略圖，微信開發代碼示例里已提供了方法，但只適用于動態頁面。由于有的是生成了靜態文件，其實我想使用ajax獲取jssdk參數也能也能實現微信分享功能了，在這里分享給大家。 **jssdk的步驟業務流程是這樣滴**： 1：在微信公眾號后臺配置js 安全域名，即需要引入jssdk的頁面域名。需要在域名根目錄下放置微信的檢測文件。 2：配置出ip白名單（可參考:http://www.idcxx.com/wx-125-1-1.html） 3：后臺開發人員生成簽名傳遞給前臺 4：前端頁面引入script方式 jssdk文件 5：通過ajax獲取config 配置，完成config 配置后即可使用jssdk的各項功能了。再補充啰嗦一句： **確保你獲取用來簽名的url是動態獲取的，動態頁面可參見實例代碼中php的實現方式。如果是html的靜態頁面在前端通過ajax將url傳到后臺簽名，前端需要用js獲取當前頁面除去'#'hash部分的鏈接（可用location.href.split('#')[0]獲取,而且需要encodeURIComponent，后臺decodeURIComponent解碼），因為頁面一旦分享，微信客戶端會在你的鏈接末尾加入其它參數，如果不是動態獲取當前鏈接，將導致分享后的頁面簽名失敗**。