微信分享(移動web端)

create-at 2019-02-16

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

js 相關代碼 (移動端實測, 需作老版本兼容)

function weChatShare(title,desc) {
    var link = window.location.href;// 這裏若是採用的並不是當前頁可能會出錯，具體緣由有待查找
    var serverUrl = encodeURIComponent(link);
    var imgUrl = '分享顯示的小圖'; //80*80 實測能夠使用其它比列，最好使用小尺寸正方形,域名也要在安全域名之下

    // 數據請求，根據項目需求更改
    function ajaxFn() {
        var xhr = new XMLHttpRequest()

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

    function wxConfig(res) {
        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 () {
            var shareConfig = {
                title: title,
                desc: desc,
                link: link,
                imgUrl: imgUrl
            };

            // 目前新版方法存在問題，因此若是有老方法，優先選擇老方法
            if(wx.onMenuShareAppMessage){
                wx.onMenuShareAppMessage(shareConfig);
                wx.onMenuShareTimeline(shareConfig);
            } else {
                // 自定義「分享給朋友」及「分享到QQ」按鈕的分享內容
                wx.updateAppMessageShareData(shareConfig);
                // 朋友圈
                wx.updateTimelineShareData(shareConfig);
            }
        });

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

    ajaxFn()
}

weChatShare('tit', 'des')

本篇文章只是作了方法整合，詳見 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1445241432

交流 Github blog issues