公众号配置
登录微信公众平台进入–>“公众号设置”–>“功能设置”–>填写“JS接口安全域名”,具体进入官网查看与配置。
引入js文件
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
通过jssdk配置接口注入权限验证配置
wx.config({
debug: false,
appId: "", // 公众号唯一标识
timestamp: "", // 生成签名的时间戳
nonceStr: "", // 生成签名的随机串
signature: "", // 加密的签名
jsApiList: [] // 需要使用的JS接口列表
});
封装一个jssdk配置类
- 先获取access_token
- 再获取jsapi_ticket
- 最后获取jssdk配置
<?php
namespace wx;
class JSSDK
{
private $appid ='';
private $appsecret ='';
public function __construct($appid, $appsecret)
{
$this->appid = $appid;
$this->appsecret = $appsecret;
}
// 1.获取access token
// 2.获取jsapi_ticket
// 3.获取jssdk配置
// 请求方式,通过curl获取
}
先封装一个curl请求方法
private function httpPostRequest($url, $data = null, $json = false)
{
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
if (!empty($data)) {
curl_setopt($curl, CURLOPT_POST, 1);
curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
if ($json) {
curl_setopt($curl, CURLOPT_HEADER, 0);
curl_setopt(
$curl,
CURLOPT_HTTPHEADER,
array(
'Content-Type: application/json; charset=utf-8',
'Content-Length: ' . strlen($data)
)
);
}
}
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
$output = curl_exec($curl);
curl_close($curl);
return $output;
}
获取access_token
-
请求地址
https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET -
步骤
– 判断缓存中是否存在access_token
– 如果有缓存则直接返回access_token
– 如果没有缓存则通过curl请求地址,并返回access_token -
代码
private function getAccess_token()
{
$cache = cache('access_token');
if($cache){
return $cache;
} else {
$url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$this->appid&secret=$this->appsecret";
$output = $this->httpPostRequest($url);
$json = json_decode($output);
if(isset($json->access_token)) {
cache('access_token',$json->access_token,7000);
return $json->access_token;
} else {
return false;
}
}
}
获取jsapi_ticket
拿到access_token后,就可以获取jsapi_ticket,jsapi_ticket是公众号用于调用微信JS接口的临时票据
- 请求方式
https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
private function getJsapi_ticket()
{
$cache = cache('jsapi_ticket');
if($cache) { //判断是否缓存
return $cache; // 有缓存则直接返回jsapi_ticket
} else {a
$access = $this->getAccess_token(); // 获取access_token
if ($access) {
$url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=$access&type=jsapi";
$output = $this->httpPostRequest($url);
$json = json_decode($output);
if(isset($json->ticket)) {
cache('jsapi_ticket',$json->ticket,7000); // 缓存jsapi_ticket
return $json->ticket;
} else {
return false;
}
} else {
return false;
}
}
}
获取jssdk配置:
- 获取appid(公众号唯一标识)
- 生成签名的一个随机字符串(noncestr)
- 生成签名的时间戳(timestamp)
- 加密的签名(signature)
public function getJSSDKconfig()
{
$strs="QWERTYUIOPASDFGHJKLZXCVBNM1234567890qwertyuiopasdfghjklzxcvbnm";
$noncestr=substr(str_shuffle($strs),mt_rand(0,strlen($strs)-11),10); //随机字符串
$jsapi_ticket = $this->getJsapi_ticket(); //获取jsapi_ticket
$timestamp = time(); //时间戳
$url = request()->url(true); //获取当前url
//生成签名
$str = 'jsapi_ticket='.$jsapi_ticket.'&noncestr='.$noncestr.'×tamp='.$timestamp.'&url='.$url;
// 生成签名 -> jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
$signature = sha1($str); //sha1加密,生成JS-SDK权限验证的签名
// 返回配置参数
return [
'appId'=> $this->appid,
'timestamp'=> $timestamp,
'nonceStr'=> $noncestr,
'signature' => $signature
];
}
例子
实现微信扫一扫:
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
wx.config({
debug: false,
appId: "{$jssdkconfig['appId']}",
timestamp: "{$jssdkconfig['timestamp']}",
nonceStr: "{$jssdkconfig['nonceStr']}",
signature: "{$jssdkconfig['signature']}",
jsApiList: ['scanQRCode']
});
$('#scanButton').click(function () {
wx.scanQRCode({
needResult: 0,
scanType: ["qrCode", "barCode"],
success: function (res) {
var result = res.resultStr;
}
})
});
</script>