微信自定义分享卡片

官方帮助文档：

微信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" . "&timestamp=$timestamp" . "&url=$url";
$signature = sha1($string1);
$root['appid'] = $appid;
$root['nonceStr'] = $nonceStr;
$root['timestamp'] = $timestamp;
$root['signature'] = $signature;

echo json_encode($root);

效果图

黑色加粗的文字是title，下方文字是desc