JSSDK · laravel5

[TOC] # 什么是JSSDK 就是微信幫助我們完成的JS一個工具的封裝，直接調用這些接口就可以完成相應的功能。作用： * 自定義分享的鏈接(此鏈接也是有規定，如公眾后臺設置有效域名一致) * 調用一些手機底層應用，攝像頭，獲取網絡制式開發5步驟： * 平臺綁定授權域名 * 引入公眾平臺jssdk的js文件 * 根據官方簽名算法編寫出對就的簽名字符串 * 設置前臺script中的config接口配置注入權限驗證 * 通過前臺script中的接口提供的ready方法處理成功驗證 # JSSDK綁定域名在開發測試平臺添加綁定域名 ![](https://box.kancloud.cn/bdd9b5df5206a2842be10b3cdfeb2129_750x138.png) 一定要添加上授權域名，不然不能進行下一步的操作 # JSSDK使用步驟 ## 引入js文件 ![](https://box.kancloud.cn/a039d4880cfd275cd4f492c813e2775f_858x169.png) ![](https://box.kancloud.cn/e7cc6f386bbb3e470af188f067f95583_626x186.png) ## 生成簽名算法 ### 得到jsapi_ticket ![](https://box.kancloud.cn/18588162e333e151c759c9d321f6b777_621x206.png) 在主動模式那寫 ~~~ // 得到jsapi_ticket public function getTicket(){ $url = 'https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token='.$this->getAccessToken(); //http_request是封裝的 $json = $this->http_request($url); $arr = json_decode($json,true); //這就是jsapi_ticket // echo $arr['ticket']; return $arr['ticket']; } ~~~ 我們主動訪問這個方法 ## 生成簽名 ![](https://box.kancloud.cn/940de0acde14a7777f8bf90f55419414_1072x489.png) ~~~ // 生成隨機字符串 private function noncestr(int $len = 16) { $str = 'abcdefghigklmfsafjw;fjwefwefh'; $str = md5($str); $str = str_shuffle($str); return substr($str, 0, $len); } // 獲取當前的url地址 private function getCurrentUrl() { //$_SERVER['REQUEST_SCHEME']只在部分環境里被支持 // return $_SERVER['REQUEST_SCHEME'].'://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; //添加邏輯，先檢測$_SERVER['REQUEST_SCHEME']存不存在isset($_SERVER['REQUEST_SCHEME'])，然后不存在的時候怎么處理 return 'http' . '://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; } // 完成簽名 public function signature() { $ticket = $this->getTicket(); $noncestr = $this->noncestr(); $time = time(); $url = $this->getCurrentUrl(); $str = 'jsapi_ticket=%s&noncestr=%s&timestamp=%s&url=%s'; $str = sprintf($str, $ticket, $noncestr, $time, $url); $signature = sha1($str); // print_r([ // 'appid' => self::APPID, // 'ticket' => $ticket, // 'noncestr' => $noncestr, // 'time' => $time, // 'url' => $url, // 'signature' => $signature, // ]); return [ 'appid' => self::APPID, 'ticket' => $ticket, 'noncestr' => $noncestr, 'time' => $time, 'url' => $url, 'signature' => $signature, ]; } ~~~ ~~~ /** * 主動模式 */ $wx = new Wechat(); $wx->signature(); ~~~ ## 通過config接口注入權限驗證 ![](https://box.kancloud.cn/8aaeb243265b2b51c780ae5250f8d492_1120x237.png) 我們在一個頁面中寫 ~~~ <?php include '../Wechat.php'; $wx = new Wechat(); $config = $wx->signature(); ?> <!doctype html> <html lang="zh-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>砍一刀</title> <script src = "./js/jweixin-1.4.0.js"></script> <script> // 權限配置驗證 wx.config({ debug: true, // 開啟調試模式,開debug會彈窗,false就看控制臺了 appId: '<?php echo $config['appid']; ?>', // 必填，公眾號的唯一標識 timestamp: <?php echo $config['time']; ?>, // 必填，生成簽名的時間戳 nonceStr: '<?php echo $config['noncestr']; ?>', // 必填，生成簽名的隨機串 signature: '<?php echo $config['signature']; ?>',// 必填，簽名 jsApiList: [ // 權限 ] // 必填，需要使用的JS接口列表,我們先不填先看一下 }); </script> </head> <body> </body> </html> ~~~ 我們先不注入權限,我們把調試模式設置為true,false的話就要在控制臺看,然后在微信調試工具那,輸入這個頁面的地址,會看到 ![](https://box.kancloud.cn/e6c4644ee1b5ef755648f33fa9e4763f_1098x563.png) ## 通過ready接口處理成功驗證注意要注入權限了 ~~~ <?php include '../Wechat.php'; $wx = new Wechat(); $config = $wx->signature(); ?> <!doctype html> <html lang="zh-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>砍一刀</title> <script src = "./js/jweixin-1.4.0.js"></script> <script> // 權限配置驗證 wx.config({ debug: false, // 開啟調試模式 appId: '<?php echo $config['appid']; ?>', // 必填，公眾號的唯一標識 timestamp: <?php echo $config['time']; ?>, // 必填，生成簽名的時間戳 nonceStr: '<?php echo $config['noncestr']; ?>', // 必填，生成簽名的隨機串 signature: '<?php echo $config['signature']; ?>',// 必填，簽名 jsApiList: [ // 權限 'onMenuShareAppMessage', 'onMenuShareTimeline', 'chooseImage' ] // 必填，需要使用的JS接口列表 }); // 驗證成功后我們要處理的動作 wx.ready(function(){ // 分享給好友 wx.onMenuShareAppMessage({ title: '分享給好友標題', // 分享標題 desc: '享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致', // 分享描述 link: '<?php echo $config['url']; ?>', // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致 imgUrl: 'http://ns9aum.natappfree.cc/qrcode.jpg', // 分享圖標 type: 'link', // 分享類型,music、video或link，不填默認為link dataUrl: '', // 如果type是music或video，則要提供數據鏈接，默認為空 success: function () { // 用戶點擊了分享后執行的回調函數 alert('成功'); } }); // 自定義分享到朋友圈 wx.onMenuShareTimeline({ title: '自定義分享到朋友圈標題', // 分享標題 link: '<?php echo $config['url']; ?>', imgUrl: 'http://ns9aum.natappfree.cc/qrcode.jpg', // 分享圖標 success: function () { // 設置成功 alert('分享成功'); } }); wx.chooseImage({ count: 1, // 默認9 sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有 sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有 success: function (res) { var localIds = res.localIds; // 返回選定照片的本地ID列表，localId可以作為img標簽的src屬性顯示圖片 alert(localIds); } }); }); </script> </head> <body> <h1>微信分享,jssdk</h1> </body> </html> ~~~