主要有下面幾步。首先你們先分清楚 小程序的appid,appSecret 跟公衆號的appid,appSecret是不同的。由於這兩個都能拿到token,且是不一樣的值。php
準備開始:前端
1.準備好 公衆號的appid ,appSecret .算法
2.在微信後臺設置js 安全接口域名。能夠添加三個,你們本身找下。或者百度。json
環境介紹,我這裏用的是TP5 框架,有用到Cache類小程序
第一步:根據appid,appSecret 獲取access_token,這裏,咱們給說明下,access_token 有效期是7200s (2個小時);api
這裏直接貼出獲取的函數。方便你們看懂。這裏,httpRequest() 函數是一個curl操做。數組
function gettoken($data){ $appId = $data['appid']; $appSecret = $data['appSecret']; $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".$appId."&secret=".$appSecret; return $result=httpRequest($url,'GET'); }
/** * CURL請求 * @param $url 請求url地址 * @param $method 請求方法 get post * @param null $postfields post數據數組 * @param array $headers 請求header信息 * @return mixed */ function httpRequest($url, $method, $postfields = null, $headers = array(), $debug = false) { $method = strtoupper($method); $ci = curl_init(); /* Curl settings */ curl_setopt($ci, CURLOPT_HTTP_VERSION, CURL_HTTP_VERSION_1_0); curl_setopt($ci, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows NT 6.2; WOW64; rv:34.0) Gecko/20100101 Firefox/34.0"); curl_setopt($ci, CURLOPT_CONNECTTIMEOUT, 60); /* 在發起鏈接前等待的時間,若是設置爲0,則無限等待 */ curl_setopt($ci, CURLOPT_TIMEOUT, 7); /* 設置cURL容許執行的最長秒數 */ curl_setopt($ci, CURLOPT_RETURNTRANSFER, true); switch ($method) { case "POST": curl_setopt($ci, CURLOPT_POST, true); if (!empty($postfields)) { $tmpdatastr = is_array($postfields) ? http_build_query($postfields) : $postfields; curl_setopt($ci, CURLOPT_POSTFIELDS, $tmpdatastr); } break; default: curl_setopt($ci, CURLOPT_CUSTOMREQUEST, $method); break; } $ssl = preg_match('/^https:\/\//i',$url) ? TRUE : FALSE; curl_setopt($ci, CURLOPT_URL, $url); if($ssl){ curl_setopt($ci, CURLOPT_SSL_VERIFYPEER, FALSE); // https請求 不驗證證書和hosts curl_setopt($ci, CURLOPT_SSL_VERIFYHOST, FALSE); } //curl_setopt($ci, CURLOPT_FOLLOWLOCATION, 1); curl_setopt($ci, CURLOPT_MAXREDIRS, 2);/*指定最多的HTTP重定向的數量,這個選項是和CURLOPT_FOLLOWLOCATION一塊兒使用的*/ curl_setopt($ci, CURLOPT_HTTPHEADER, $headers); curl_setopt($ci, CURLINFO_HEADER_OUT, true); $response = curl_exec($ci); $requestinfo = curl_getinfo($ci); $http_code = curl_getinfo($ci, CURLINFO_HTTP_CODE); curl_close($ci); return $response; //return array($http_code, $response,$requestinfo); }
第二部: 根據token 獲取getticket ,jsapi數據,這裏爲了避免使得你們迷糊,貼完整的代碼。看不懂的部分,能夠自行查閱資料。根據返回值,咱們有作時間的處理。緩存
防止重複調用token 和 getticket 。代碼裏面有說明。安全
獲取到的 getticket 信息,須要根據errcode 狀態來判斷。微信
下面是源碼部分,展開列表,你就能看到豐富的代碼。
public function indexdemo(){ //經過接口去拿token的值。 $data['appid']="wx0c38278aa06f63dd";//這裏的appid已經修改成假的,請你們替換 $data['appSecret']="29cb76731d9f0d6c2e364190a1ad117c";//請替換 $token=Cache::get('token'); if(empty($token)){//token不存在,請求 $token=gettoken($data); $strtoken=json_decode($token,true); $strtoken['expires_in']=$strtoken['expires_in']-10;//這裏作10s的兼容處理。 //設置access_token 緩存,跟有效期。 Cache::set('token',$strtoken['access_token'],$strtoken['expires_in']); $token=$strtoken['access_token']; } //根據token 獲取getticket ,jsapi數據 $urling="https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=".$token."&type=jsapi"; $ticket=Cache::get('ticket'); if(empty($ticket)){//爲空,獲取ticket $result=file_get_contents($urling); $result=json_decode($result,true); //返回結果成功,緩存ticket if($result['errcode']=='0'){ $result['expires_in']=$result['expires_in']-10;//10s 兼容處理 Cache::set('ticket',$result['ticket'],$result['expires_in']); $ticket=$result['ticket']; } } $jsapi_ticket=$ticket; //生成隨機的nonceStr $noncestr = $this->createNonceStr(); $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://"; $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; $timestamp = time(); //按照字典序列組裝字符串,並sha1加密。 $string1 = "jsapi_ticket={$jsapi_ticket}&noncestr={$noncestr}×tamp={$timestamp}&url={$url}"; $signature = sha1($string1); $signPackage = array( 'appId' => $data['appid'], 'nonceStr' => $noncestr, 'timestamp' => $timestamp, 'signature' => $signature, ); //返回數據給前端 $this->assign('signPackage',json_encode($signPackage,true)); // $this->assign('signPackage',$signPackage); return $this->fetch(); }
調試出要的字段,而後進行var_dump()輸出測試。如圖,正常顯示。
第三部:使用php語法,輸出數據到前端js裏面,js裏面作配置便可。這裏使用的是微信開發者工具,公衆號模式。其實也能夠在本身的編輯器裏面用的。看到這裏,
後續就能夠根據微信的文檔來操做,前端的分享頁面了。
1.關於遇到的坑分析:appid 無效,config:配置失敗。
這裏咱們須要效驗signature 簽名是否是跟微信一致。
咱們能夠先生成本身的signature,而後使用微信開發工具生成的signnature 跟咱們本身的作對比。
微信開發工具地址:https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign&token=&lang=zh_CN
兩種結果:
最後生成的signnature 同樣:說明咱們的簽名正確。 不同,說明咱們的簽名失敗。(失敗的簽名是調用不到微信的自定義分享接口的,拿不到權限列表裏面的權限。)
這裏php語法下按字典序列排序外,還有個要點:
$string1 = "jsapi_ticket=$jsapi_ticket&noncestr=$noncestr×tamp=$timeing&url=$url"; $signature =sha1($string1);
×tamp 這裏面會自動轉義成xtamp,前面部分轉義了。不過這裏是正確的,直接用sha1()算法加密就是正確的串。在後面就是前端的配置了,配置好後,就完成了。一切作完後,就能夠將數據返回前端了。這裏要簡單說下思路,若是你的公衆號只有一個,而網站地址卻有2個或者3個的時候,你能夠緩存現有的 ticket,還有appid.而後這個現有網站向另外兩個站提供api接口訪問。而後用另外網站的url,從新生成有用的signature 字符串。這樣在返回前端,就能夠作到多個站點的微信-js-sdk分享。爲了安全期間,你能夠在網絡上傳輸ticket,就夠了。appid。在另一個站點中,放在配置文件,或者配置選項裏面。後面--一篇是分享的前端配置,若是有須要能夠看下。>:)