网页中如何实现微信的朋友圈或者好友的分享功能,类似于网易新闻的内容分享

时间:2024-02-29 15:02:49

我们知道在如果是微信的开发,那么很容易就可以根据微信的开发者文档可以实现微信的内部浏览器的分享,但是如果我们是网页当中的内容需要分享到微信上,该如何如何实现呢

网页中的内容分享到微信上,只能够通过后台传给我们一个分享该内容的二维码,我们根据微信扫一扫,在手机上进入到要分享的页面,然后跟平时微信开发一样,写入我们的微信的分享的功能,从而来实现

网页当中来通过微信进行分享的功能。

function shareweixin() {
    $(".print-wb-share img").eq(0).attr("src", "../img/p-1.png");
    $.ajax({
        url: getv1 + \'news/wechatShare\',
        type: \'GET\',
        dataType: \'json\',
        data: { newsId: newsId },
        success: function(res) {
            if (res.status == 0) {
                var image = res.data; //微信的分享二维码
                $(".js_qrcode_img img").attr("src", \'data:image/png;base64,\' + image);
                $(".js_qrcode_wrap").fadeIn();
                weixin();
            }

        },
        error: function(res) {
            layer.alert("服务器正忙,请稍后再试");
        }
    });

}

function closeweixin() {
    $(".js_qrcode_wrap").fadeOut();
}

function weixin() {
    var timestamp;
    var nonceStr;
    var signature;
    var loc = decodeURI(window.location);
    $.ajax({
        url: getvt + \'weixin/getTicket\',
        dataType: \'json\',
        type: \'GET\',
        data: {
            url: \'\' + window.location + \'\'
        },
        success: function(data) {
            debugger;
            timestamp = data.data.timestamp;
            nonceStr = data.data.noncestr;
            signature = data.data.signature;
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                appId: \'wx5abf99ee5b333fb4\', // 必填,公众号的唯一标识
                timestamp: timestamp, // 必填,生成签名的时间戳
                nonceStr: nonceStr, // 必填,生成签名的随机串
                signature: signature, // 必填,签名,见附录1
                jsApiList: [\'scanQRCode\', \'onMenuShareTimeline\', \'onMenuShareAppMessage\', \'chooseImage\',
                        \'uploadImage\', \'onMenuShareQQ\', \'onMenuShareQZone\'
                    ] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
            });
        },
        error: function() {
            alert("失败");
        }
    });
    wx.ready(function() {
        // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
        /*分享到朋友圈*/
        wx.onMenuShareTimeline({
            title: \'微信公众号\', // 分享标题
            link: \'http://wechat.daopeng365.com/weibo/page/index.html\', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: \'http://ot9xer3cv.bkt.clouddn.com/app_icon.png\', // 分享图标
            success: function(res) {
                // alert(\'已分享\');
            },
            cancel: function(res) {
                // alert(\'已取消\');
            },
            fail: function(res) {
                //alert(JSON.stringify(res));
            }
        });
        /*分享给朋友*/
        wx.onMenuShareAppMessage({
            title: \'\', // 分享标题
            desc: \'一点学车,学车不止快一点。欢迎关注“一点学车”微信公众号。\', // 分享描述
            link: \'\', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: \'http://ot9xer3cv.bkt.clouddn.com/app_icon.png\', // 分享图标
            type: \'\', // 分享类型,music、video或link,不填默认为link
            dataUrl: \'\', // 如果type是music或video,则要提供数据链接,默认为空
            success: function() {
                // 用户确认分享后执行的回调函数
            },
            cancel: function() {
                // 用户取消分享后执行的回调函数
            }
        });
        /*分享到qq*/
        wx.onMenuShareQQ({
            title: \'一点学车\', // 分享标题
            desc: \'一点学车,学车不止快一点。欢迎关注“一点学车”微信公众号。\', // 分享描述
            link: \'http://wechat.daopeng365.com/weibo/page/index.html\', // 分享链接
            imgUrl: \'http://ot9xer3cv.bkt.clouddn.com/app_icon.png\', // 分享图标
            success: function() {
                // 用户确认分享后执行的回调函数
            },
            cancel: function() {
                // 用户取消分享后执行的回调函数
            }
        });
        /*分享到空间*/
        wx.onMenuShareQZone({
            title: \'一点学车haha\', // 分享标题
            desc: \'一点学车,学车不止快一点。欢迎关注“一点学车”微信公众号。\', // 分享描述
            link: \'http://wechat.daopeng365.com/weibo/page/index.html\', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: \'http://ot9xer3cv.bkt.clouddn.com/app_icon.png\', // 分享图标
            success: function() {
                // 用户确认分享后执行的回调函数
            },
            cancel: function() {
                // 用户取消分享后执行的回调函数
            }
        });
        wx.error(function(res) {
            // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
            alert("errorMSG:" + JSON.stringify(res));
        });
    });
}