微信自定义分享链接信息（标题，图片和内容）实现过程

图片1是普通连接分享,图片2是完成后的有标题,描述,和图片的分享

步骤:

1.去公众号拿到appid和AppSecret 并设置白名单

 

2.在H5页面中添加如下代码

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
 
<script>
    var  url=location.href;
 
    $.ajax({
        type : "get",
        url : "http://这里改为你自己的网址.com/sample.php?url="+url, 
        dataType : "jsonp",
        jsonp: "callback",
        jsonpCallback:"success_jsonpCallback",
        success : function(data){
 
            wx.config({
                debug: false,
                appId: data.appId,
                timestamp: data.timestamp,
                nonceStr: data.nonceStr,
                signature: data.signature,
                jsApiList: [
                    'onMenuShareTimeline',//
                    'onMenuShareAppMessage',
                    'onMenuShareQQ',
                    'onMenuShareWeibo',
                    'onMenuShareQZone'
 
                ]
            });
        },
        error:function(data){
            alert("连接失败！");
        }
    });
 
    wx.ready(function () {
        var shareData = {
            title: '这是是分享标题',
            desc: '这是是摘要',
            link: url,
            imgUrl: '这里改为你网站域名下的小图标文件的地址'
        };
 
        wx.onMenuShareAppMessage(shareData);//分享给好友
        wx.onMenuShareTimeline(shareData);//分享到朋友圈
        wx.onMenuShareQQ(shareData);//分享给手机QQ
        wx.onMenuShareWeibo(shareData);//分享腾讯微博
        wx.onMenuShareQZone(shareData);//分享到QQ空间
 
 
 
    });
    wx.error(function (res) {
        //alert(res.errMsg);//错误提示
 
    });
</script>

 

url :"http://这里改为你自己的网址.com/sample.php?url="+url,

 

3.服务端接口代码 去微信官方下载

http://demo.open.weixin.qq.com/jssdk/sample.zip

备注：链接中包含php、java、nodejs以及python的示例代码供第三方参考，第三方切记要对获取的accesstoken以及jsapi_ticket进行缓存以确保不会触发频率限制。

 

下载后解压是这样的,然后自己选择合适的,我这边用的是PHP

据说只要把appid和AppSecret   写入就可以直接用了 $jssdk = new JSSDK("wx********************", "*************************");

但是我是使用中遇到了点问题 这边记录下,首先是sample.php这个接口没有给返回 自己加个返回代码,

<?php
require_once "jssdk.php";
$jssdk = new JSSDK("你的appid", "你的appsecret");
$signPackage = $jssdk->GetSignPackage();
// return  var_dump($signPackage);
echo json_encode($signPackage);
exit;
?>

　　然后直接调用这个接口,发现数据可以拿到,但是会报签名错误,

 

https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign

 使用这个微信提供的签名工具验证的了,是签名的时候拿到的url有误,

然后去计算速度快.php里面GetSignPackage()里面修改了下Url的获取方法

    public function getSignPackage()
    {
        $jsapiTicket = $this->getJsApiTicket();

        // 注意 URL 一定要动态获取，不能 hardcode.
        $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
        // $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
        $url = $_GET['url'];//这里修改了Url的获取方法


        $timestamp = time();
        $nonceStr = $this->createNonceStr();

        // 这里参数的顺序要按照 key 值 ASCII 码升序排序
        $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr&timestamp=$timestamp&url=$url";

        $signature = sha1($string);

        $signPackage = array(
            "appId"     => $this->appId,
            "jsapiTicket"  => $jsapiTicket,
            "nonceStr"  => $nonceStr,
            "timestamp" => $timestamp,
            "url"       => $url,
            "signature" => $signature,
            "rawString" => $string
        );
        return $signPackage;
    }

　　到这里就完成了,记录下自己的经历,可能有遗漏的地方,如果不能用请留言

 

 

 

 

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> <script>    var  url=location.href;     $.ajax({        type : "get",        url : "http://这里改为你自己的网址.com/jssdk.php?url="+url,        dataType : "jsonp",        jsonp: "callback",        jsonpCallback:"success_jsonpCallback",        success : function(data){             wx.config({                debug: false,                appId: data.appId,                timestamp: data.timestamp,                nonceStr: data.nonceStr,                signature: data.signature,                jsApiList: [                    'onMenuShareTimeline',//                    'onMenuShareAppMessage',                    'onMenuShareQQ',                    'onMenuShareWeibo',                    'onMenuShareQZone'                 ]            });        },        error:function(data){            alert("连接失败！");        }    });     wx.ready(function () {        var shareData = {            title: '这是是分享标题',            desc: '这是是摘要',            link: url,            imgUrl: '这里改为你网站域名下的小图标文件的地址'        };         wx.onMenuShareAppMessage(shareData);//分享给好友        wx.onMenuShareTimeline(shareData);//分享到朋友圈        wx.onMenuShareQQ(shareData);//分享给手机QQ        wx.onMenuShareWeibo(shareData);//分享腾讯微博        wx.onMenuShareQZone(shareData);//分享到QQ空间       });    wx.error(function (res) {        //alert(res.errMsg);//错误提示     });</script>