網頁中如何實現微信的朋友圈或者好友的分享功能,類似於網易新聞的內容分享


我們知道在如果是微信的開發,那么很容易就可以根據微信的開發者文檔可以實現微信的內部瀏覽器的分享,但是如果我們是網頁當中的內容需要分享到微信上,該如何如何實現呢

網頁中的內容分享到微信上,只能夠通過后台傳給我們一個分享該內容的二維碼,我們根據微信掃一掃,在手機上進入到要分享的頁面,然后跟平時微信開發一樣,寫入我們的微信的分享的功能,從而來實現

網頁當中來通過微信進行分享的功能。

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));
        });
    });
}

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM