官方帮助文档:
微信JS-SDK说明文档
JSSDK自定义分享接口的策略
常见错误及解决方法
微信公众平台
准备
1、微信认证过的公共号
2、域名服务器,域名必须添加到“JS接口安全域名”中
3、通过微信公众平台查看appid和AppSecret
代码展示
前端代码,放在需要分享的页面中。
注意:
1、页面中有多个window.onload会导致冲突。
2、分卡片的链接要加入到公众平台的白名单里。
//首先要引入js文件
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
window.onload=function(){//页面加载
var apiurl = '/jsdk.php';
var query = new Object();
var url = location.href.split('#')[0]; //页面url#前的完整url
query.url = $.trim(url);
$.ajax({
url: apiurl,
data: query,
type: "POST",
dataType: "json",
success: function(res){//成功回调
//执行JS_SDK
wx.config({
debug: false, //true为开启调试功能,若弹出{"errMsg":"config:ok"}代表配置成功
appId: res.appid,
timestamp: res.timestamp,
nonceStr: res.nonceStr,
signature: res.signature,
jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage']
});
window.share_config = {
"share": {
"imgUrl": "http://www.xxxxxx.com/logo.jpg",//分享图
"desc" : "你的描述",//摘要
"title" : '你的标题',//标题
"link": window.location.href,//现在为分享当前页面,可以指定链接(http://www.xxxxxx.com),但是要注意遵循JSSDK自定义分享接口的策略:https://mp.weixin.qq.com/s/hAdtKl2i4ilyo9HxT1kXyw
"success":function(){//分享成功后的回调函数
},
'cancel': function () {//用户取消分享后执行的回调函数
}
}
};
wx.ready(function () {
wx.onMenuShareAppMessage(share_config.share);//分享给好友
wx.onMenuShareTimeline(share_config.share);//分享到朋友圈
});
},
error:function(){
console.log("请求失败");
}
});
}
</script>
后端代码:
<?php
$url = $_POST['urll']; //获取当前页面的url
$root['url'] = $url;
//获取access_token,并缓存
$file = 'access_token'; //缓存文件名access_token
$expires = 3600; //缓存时间1个小时
if (file_exists($file)) {
$time = filemtime($file);
if (time() - $time > $expires) {
$token = null;
} else {
$token = file_get_contents($file);
}
} else {
fopen("$file", "w+");
$token = null;
}
//通过微信公众平台查看appid和AppSecret
$appid = '你的appid';
$secret = '你的secret';
if (!$token || strlen($token) < 6) {
$res = file_get_contents("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" . $appid . "&secret=" . $secret);
$res = json_decode($res, true);
$token = $res['access_token'];
@file_put_contents($file, $token);
}
//获取jsapi_ticket,并缓存
$file1 = 'jsapi_ticket';
if (file_exists($file1)) {
$time = filemtime($file1);
if (time() - $time > $expires) {
$jsapi_ticket = null;
} else {
$jsapi_ticket = file_get_contents($file1);
}
} else {
fopen("$file1", "w+");
$jsapi_ticket = null;
}
if (!$jsapi_ticket || strlen($jsapi_ticket) < 6) {
$ur = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=$token&type=jsapi";
$res = file_get_contents($ur);
$res = json_decode($res, true);
$jsapi_ticket = $res['ticket'];
@file_put_contents($file1, $jsapi_ticket);
}
$timestamp = time(); //生成签名的时间戳
$metas = range(0, 9);
$metas = array_merge($metas, range('A', 'Z'));
$metas = array_merge($metas, range('a', 'z'));
$nonceStr = '';
for ($i = 0; $i < 16; $i++) {
$nonceStr .= $metas[rand(0, count($metas) - 1)]; //生成签名的随机串
}
//生成signature
$string1 = "jsapi_ticket=" . $jsapi_ticket . "&noncestr=$nonceStr" . "×tamp=$timestamp" . "&url=$url";
$signature = sha1($string1);
$root['appid'] = $appid;
$root['nonceStr'] = $nonceStr;
$root['timestamp'] = $timestamp;
$root['signature'] = $signature;
echo json_encode($root);
效果图
黑色加粗的文字是title,下方文字是desc