微信JSSDK分享可以实现自己的网页在微信自定义图标,标题,还有描述,还可以分享到朋友圈,分享到微信群,分享给朋友等操作。
上图就是,左侧是分享到朋友圈,右侧是分享到微信群。
很多开发者下载官方的demo进行开发,最后debug的时候,显示的是config:invalid signature ,这个原因其实很有可能是签名不一致。
我们需要保持签名一致,才能完整注入这个权限的。
一般,签名不一致的是因为access_token生成的时候,获取jsapi_ticket的时候有问题造成的,我一开始弄了好久都没搞对,后来一个个尝试。
我先尝试生成的一个jsapi_ticket,写死在页面,发现没问题,然后再尝试获取access_token写死在页面,也没问题,但是直接在页面上生成access_token再调用就不行。
我就另外写了一个access.php进行生成access_token,把access_token存入数据库,搞一个定时任务,每隔1小时生成一个新的access_token,因为access_token仅有2小时有效期,而且每天最多调用2000次,所以我觉得存数据库是比较好的。
然后在分享页面取数据库的access_token就行了。
下面是生成access_token的代码: access.php
"Content-type:text/html;charset=utf-8");
//获取access_token
$appId = '填写您的';
$appSecret = '填写您的';
$url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".$appId."&secret=".$appSecret;
$ch = curl_init();//初始化curl
curl_setopt($ch, CURLOPT_URL,$url); //要访问的地址
curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);//跳过证书验证
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false); // 从证书中检查SSL加密算法是否存在
$data = json_decode(curl_exec($ch));
$token = $data->access_token;
//连接数据库
$con = mysql_connect("数据库地址","数据库账号","数据库密码");
mysql_select_db("数据库名", $con);
mysql_query("INSERT INTO access_token (access_token) VALUES ('$token')");
mysql_close($con);
?>
复制代码
下面是分享页面代码: index.php
function getjsapi_ticket(){
//获取微信access_token
//连接数据库
$con = mysql_connect("数据库地址","数据库账号","数据库密码");
mysql_select_db("数据库名", $con);
$result = mysql_query("SELECT access_token FROM access_token ORDER BY ID DESC LIMIT 1");
while($row = mysql_fetch_array($result)){
$token = $row["access_token"];
}
$access_token = $token;
$url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token={$access_token}";
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL,$url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER,1);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER,0);
$data = curl_exec($ch);
curl_close($ch);
$data = json_decode($data,true);
return $data['ticket'];
}
// mysql_close($con);
//默认生成16位随机数
function createNonceStr($length = 16) {
$chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
$str = "";
for ($i = 0; $i < $length; $i++) {
$str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);
}
return $str;
}
//获取要排序的signature相关代码
function getSignPackage() {
$jsapiTicket = getjsapi_ticket();
$url = "当前页面的URL";
$timestamp = time();
$nonceStr = createNonceStr();
// 这里参数的顺序要按照 key 值 ASCII 码升序排序
$string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr×tamp=$timestamp&url=$url";
$signature = sha1($string);
$signPackage = array(
"appId" => 'ADDPID修改为您的',
"nonceStr" => $nonceStr,
"timestamp" => $timestamp,
"url" => $url,
"signature" => $signature
);
return $signPackage;
}
$signPackage = getSignPackage();
?>
"en">
"Content-Type" content="text/html; charset=utf-8">
"X-UA-Compatible" content="IE=edge">
"viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
"apple-mobile-web-app-capable" content="yes">
"apple-mobile-web-app-status-bar-style" content="black">
"format-detection" content="telephone=no">
微信分享DEMO
test
复制代码
大概就这样就可以config:ok了
当然,开发过程中需要设置IP白名单,JS接口安全域名这些我就不多说了。
作者:TANKING
2018-10-15
likeyunba.com