實現微信分享功能

kristy1993發表於2018-11-05

實現微信分享功能整理
1、引入js檔案

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

2、通過config介面注入許可權驗證配置

 var wxConfig = {
        debug: false,  //開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。
        appId: ``, // 必填，公眾號的唯一標識
        timestamp: , // 必填，生成簽名的時間戳
        nonceStr: ``, // 必填，生成簽名的隨機串
        signature: ``,// 必填，簽名
        jsApiList: [  // 必填，需要使用的JS介面列表
            `onMenuShareTimeline`,
            `onMenuShareAppMessage`,
            `hideAllNonBaseMenuItem`,
            `chooseImage`,
            `showMenuItems`,
            `hideMenuItems`,
            `translateVoice`
        ]
    };
    wx.config(wxConfig);

3、config資訊驗證後會執行ready方法，所有介面呼叫都必須在config介面獲得結果之後，config是一個客戶端的非同步操作，所以如果需要在頁面載入時就呼叫相關介面，則須把相關介面放在ready函式中呼叫來確保正確執行。對於使用者觸發時才呼叫的介面，則可以直接呼叫，不需要放在ready函式中。

  wx.ready(function() {
        setTimeout(function() {
            wx.onMenuShareAppMessage({  //分享給好友
                title:title, // 分享標題
                desc: desc, // 分享描述
                link:location.href.split(`#`)[0], // 分享連結，該連結域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
                imgUrl:location.origin + `/sc-ccal/`+ imgurl, // 分享圖示
                type: `link`, // 分享型別,music、video或link，不填預設為link
                dataUrl: ``, // 如果type是music或video，則要提供資料連結，預設為空
                success: function () {
                    console.log(`分享成功`); // 使用者點選了分享後執行的回撥函式
                },
                fail:function(){
                    console.log(`分享失敗`);
                }
            });
        }, 500);
    });

相關文章