在此之前我们已经学习过微信的sdk使用,但是之前实在easyWechat的PHP插件基础上实现的,具体可以参考:https://www.jb51.net/article/174309.htm
一:引入所需要的js
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
二:通过config接口注入权限验证配置
wx.config({ debug: true,// 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: '',// 必填,公众号的唯一标识 timestamp:,// 必填,生成签名的时间戳 nonceStr: '',// 必填,生成签名的随机串 signature: '',// 必填,签名 jsApiList: [] // 必填,需要使用的JS接口列表 });
签名的生成步骤如下:
1:获取微信公众号的全局唯一接口调用凭据access_token
调取下面的接口获取access_token
https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
get参数说明:
appid:微信公众号的唯一标识appId
secret:微信公众号的appsecret
根据上面的接口可以获取到微信公众号的全局唯一接口调用凭据access_token,接口返回结果如下:
{"access_token":"ACCESS_TOKEN","expires_in":7200}
2:根据access_token获取jsapi_ticket
调取下面的接口获取jsapi_ticket
https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
get参数说明:
access_token:上面接口获取到的access_token
type:类型,这里指定填jsapi
根据上面的接口可以获取到jsapi_ticket,接口返回结果如下:
{ "errcode":0,"errmsg":"ok","ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA","expires_in":7200 }
3:根据获取到的jsapi_ticket和noncestr,timestamp,url生成签名
对所有待签名参数按照字段名的ASCII 码从小到大排序后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串,然后通过sha1加密生成签名
三:通过ready接口处理成功验证后在ready内写我们所需要的微信sdk接口
wx.ready(function(){ // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。 });
四:具体实现
1:PHP端:
public function actionTicket() { //开启session session_start(); //appId $appId = 'wx73d0c47a64aa5315'; //secret $appSecret = 'aba2793c10623350f6aeee5a728099d3'; if (!isset($_SESSION['ticket'])){ //获取微信公众号全局唯一接口调用凭据access_token $result = $this->getAccessToken($appId,$appSecret); $accessToken = $result['access_token']; //获取jsapi_ticket $getTicket = $this->getTicket($accessToken); $ticket = $getTicket['ticket']; $_SESSION['ticket'] = $ticket; } //jsapi_ticket(公众号用于调用微信JS接口的临时票据) $ticket = $_SESSION['ticket']; //当前时间戳 $timestamp = time(); //随机字符串 $noncestr = $this->getRandCode(); //当前url $url = $this->getUrl(); $params = [ 'jsapi_ticket' => $ticket,'timestamp' => $timestamp,'noncestr' => $noncestr,'url' => $url,]; $options = $this->urlParams($params); //获取签名 $signature = sha1($options); //将appId,timestamp,noncestr,signature渲染到页面 return $this->render('ticket',[ 'appId' => $appId,'signature' => $signature,]); } /* * 获取jsapi_ticket */ public function getTicket($accessToken) { $params = [ 'access_token' => $accessToken,'type' => 'jsapi',]; $urlParams = $this->urlParams($params); $ticketUrl = 'https://api.weixin.qq.com/cgi-bin/ticket/getticket?' . $urlParams; $result = $this->http_curl($ticketUrl); return json_decode($result,true); } /* * 获取微信公众号的全局唯一接口调用凭据access_token */ public function getAccessToken($appId,$appSecret) { $params = [ 'grant_type' => 'client_credential','appid' => $appId,'secret' => $appSecret,]; $urlParams = $this->urlParams($params); $accessUrl = 'https://api.weixin.qq.com/cgi-bin/token?' . $urlParams; $result = $this->http_curl($accessUrl); return json_decode($result,true); } /* * 获取随机码 */ function getRandCode($num = 16){ $array = array( 'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','z','1','2','3','4','5','6','7','8','9','0',); $tmpstr=''; $max = count($array); for($i=1; $i<=$num; $i++){ $key = rand(0,$max-1); //'A' -> $array[0] $tmpstr .= $array[$key]; } return $tmpstr; } /* * curl接口调用 */ public function http_curl($url,$data=null) { $curl = curl_init(); curl_setopt($curl,CURLOPT_URL,$url); curl_setopt($curl,CURLOPT_RETURNTRANSFER,1); curl_setopt($curl,CURLOPT_SSL_VERIFYPEER,0); curl_setopt($curl,CURLOPT_SSL_VERIFYHOST,CURLOPT_POST,CURLOPT_POSTFIELDS,$data); $result = curl_exec($curl); curl_close($curl); return $result; } /* * 字符串拼接 */ public function urlParams($params) { ksort($params); reset($params); $options = ''; foreach ($params as $key => $value) { $options .= $key . '=' . $value .'&'; } $options = rtrim($options,'&'); return $options; } /* * 获取当前url */ public function getUrl() { //获取协议类型 $protocalPort = isset($_SERVER['SERVER_PORT']) && $_SERVER['SERVER_PORT'] == '443' ? 'https://' : 'http://'; //获取当前执行脚本的url $PHPSelf = $_SERVER['PHP_SELF'] ? $_SERVER['PHP_SELF'] : $_SERVER['SCRIPT_NAME']; $pathInfo = isset($_SERVER['PATH_INFO']) ? $_SERVER['PATH_INFO'] : ''; $queryString = isset($_SERVER['QUERY_STRING']) ? $_SERVER['QUERY_STRING'] : ''; $relateUrl = isset($_SERVER['REQUEST_URI']) ? $_SERVER['REQUEST_URI'] : $PHPSelf . (!empty($queryString) ? '?' . $queryString : $pathInfo); $url = $protocalPort . (isset($_SERVER['HTTP_HOST']) ? $_SERVER['HTTP_HOST'] : '') . $relateUrl; return $url; }
2:前端:
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script> <script> $(document).ready(function(){ wx.config({ debug: false,// 开启调试模式为true后可以通过alert弹窗将公众号签名等结果反馈出来 appId: '<?= $appId ?>',// 必填,公众号的唯一标识 timestamp: '<?= $timestamp ?>',// 必填,生成签名的时间戳 nonceStr: '<?= $noncestr ?>',// 必填,生成签名的随机串 signature: '<?= $signature ?>',// 必填,签名 jsApiList: [ "hideOptionMenu",] }); //配置成功以后config:ok wx.ready(function () { //隐藏右上角菜单接口 wx.hideOptionMenu(); }) }) </script>
这样我们就是实现了原生PHP使用微信sdk