微信内置分享

在详情页ajax获取成功以后在回调函数中

var shareData = {
     title: '',//分享标题
     desc: '',//分享描述
     imgUrl:'',//分享图片
}
     getShare(shareData);

分享html页面中需要添加两个js文件

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

sha1加密文件https://files.cnblogs.com/files/luoshang/sha1.min.js

前两个步骤前端会有跨域，但微信依然给的json；不好处理最好后台处理

//获取后台取得微信的 ticket 进行签名生成
function getShare(shareData){   

 var data = ({});
    $.ajax({
        type: "post",
        url: '',
        dataType: 'json',
        data: {
            "data": JSON.stringify(data)
        },
        success: function(data) {
            var timestamp = (new Date).getTime();//时间戳
            var nonceStr = data.nonceStr;//随机串
            var ticket = data.ticket;
            var Url = location.href.split('#')[0];//获取分享页面URL
            var jsapi_ticket = 'jsapi_ticket=' + ticket + '&noncestr=' + nonceStr + '&timestamp=' + timestamp + '&url=' + Url;
            var signature = sha1(jsapi_ticket);//sha1加密生成签名
　　　　　　　if(shareData.imgUrl){
　　　　　　　　　　shareData.imgUrl = location.origin + shareData.imgUrl;//文章图片
　　　　　　　　}else{
　　　　　　　　　　shareData.imgUrl = location.origin + "";//默认图片
　　　　　　　　}
            share(timestamp, nonceStr, signature, Url,shareData)
        },
        beforeSend: function(e) {},
        error: function(e) {
            var t = JSON.stringify(e)
        }
    });
}
function share(timestamp, nonceStr, signature, Url,shareData) {
    wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: '', // 必填，公众号的唯一标识
        timestamp: timestamp, // 必填，生成签名的时间戳
        nonceStr: nonceStr, // 必填，生成签名的随机串
        signature: signature, // 必填，签名，见附录1
        jsApiList: ['checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'chooseWXPay','onMenuShareQZone']
        // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });
    wx.ready(function() {
　　　　//分享朋友圈
        wx.onMenuShareTimeline({
            title: shareData.title,
            link: Url,
            imgUrl: shareData.imgUrl,
            success: function() {
                // 用户确认分享后执行的回调函数
                alert('分享到朋友圈成功');
            },
            cancel: function() {
                // 用户取消分享后执行的回调函数
                alert('你没有分享到朋友圈');
            }
        });
　　　　//分享给好友
        wx.onMenuShareAppMessage({
            title:  shareData.title,
            desc:  shareData.desc,
            link: Url,
            imgUrl:  shareData.imgUrl,
            success: function(res) {
                alert('分享成功');
            },
            cancel: function(res) {
                alert('你没有分享');
            },
            fail: function(res) {
                alert(JSON.stringify(res));
            }
        });
　　　　//分享到QQ
        wx.onMenuShareQQ({
            title:  shareData.title,
            desc:  shareData.desc,
            link: Url,
            imgUrl:  shareData.imgUrl,
            success: function() {
                alert('分享成功'); // 用户确认分享后执行的回调函数
            },
            cancel: function() {
                alert('你没有分享'); // 用户取消分享后执行的回调函数
            }
        });
　　　　//分享到空间
        wx.onMenuShareQZone({
            title:  shareData.title,
            desc:  shareData.desc,
            link: Url,
            imgUrl:  shareData.imgUrl,
            success: function() {
                alert('分享成功');// 用户确认分享后执行的回调函数
            },
            cancel: function() {
                alert('你没有分享');// 用户取消分享后执行的回调函数
            }
        });
    });
}

微信 JS 接口签名校验工具

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

 

QQ内置网页中的分享功能：

只要js引入然后设置一下这个值就可以了

QQ分享文档地址：http://open.mobile.qq.com/api/component/share

setShareInfo({
                 title  : wxShareConfig.title,
                 summary: wxShareConfig.desc,
                 pic    : wxShareConfig.imgUrl,
                 url    : wxShareConfig.link
             });

 

特别提醒：

微信分享以及相关的页面api功能调用，必须要先在公众号后台配置安全域名，具体位置参考微信开发文档