微信分享(移動web端)

Hewitt發表於2019-02-17
Web

create-at 2019-02-16

引入微信JS-SDK http://res.wx.qq.com/open/js/… (當前最新版本)

js 相關程式碼 (移動端實測, 需做老版本相容)

function weChatShare() {
    // 資料請求，根據專案需求更改
    function ajaxFn() {
        var xhr = new XMLHttpRequest()

        xhr.open(`get`, `這是請求配置項的介面?url=` + location.href, true)
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) {
                wxConfig(JSON.parse(xhr.responseText))
            }
        }
        xhr.send()
    }

    function wxConfig(res) {
        var title = `標題`;
        var desc = `描述`;
        var link = location.href;
        var imgUrl = "分享顯示的小圖"; //80*80 實測可以使用其它比列，最好上使用小尺寸正方形

        wx.config({
            // 是否開啟除錯（會返回一些錯誤原因）
            debug: true,
            // 公眾號的唯一標識
            appId: res.appId,
            // 簽名的時間戳
            timestamp: res.timestamp,
            // 簽名的隨機串
            nonceStr: res.nonceStr,
            // 簽名
            signature: res.signature,
            // 需要呼叫的JS介面
            jsApiList: [
                `updateAppMessageShareData`,
                `updateTimelineShareData`,
                `onMenuShareAppMessage`,
                `onMenuShareTimeline`
            ]
        });

        // config 驗證後會執行ready方法
        wx.ready(function () { });

        wx.error(function (res) {
            // config資訊驗證失敗
            console.log(res);
        });

        // 分享到朋友和QQ好友
        wx.updateAppMessageShareData({
            // 分享標題
            title: title,
            // 分享描述
            desc: desc,
            // 分享連結，該連結域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
            link: link,
            // 分享圖示
            imgUrl: imgUrl,
            success: function () {
                // 設定成功
            }
        })

        // 分享到朋友圈，QQ空間
        wx.updateTimelineShareData({
            title: title,
            link: link,
            imgUrl: imgUrl,
            success: function () {
                // 設定成功
            }
        });

        //  老版本 分享給朋友 即將廢棄
        wx.onMenuShareAppMessage({
            title: title,
            desc: desc,
            imgUrl: imgUrl,
            link: link,
            type: `link`, // 分享型別,music、video 或 link，不填預設為link
            dataUrl: ``, // 如果 type 是 music 或 video，則要提供資料連結，預設為空
            trigger: function (res) {
            },
            success: function (res) {
                console.log(`分享朋友`)
            },
            cancel: function (res) {
            },
            fail: function (res) {
            }
        });

        // 老版本 分享到朋友圈 即將廢棄
        wx.onMenuShareTimeline({
            title: title, // 分享標題
            link: link, // 分享連結，該連結域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
            imgUrl: ``, // 分享圖示
            success: function () {
                // 使用者點選了分享後執行的回撥函式
            }
        })
    }
    ajaxFn()
}

本篇文章只是做了方法整合，詳見 https://mp.weixin.qq.com/wiki…

交流 Github blog issues

相關文章