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> ~~~