天天看點

微信自定義分享功能;分享朋友,分享到朋友圈JSSDK使用步驟分享接口:頁面源碼:

要先在你們的微信公衆号開發平台上  配置引入東西

微信自定義分享功能;分享朋友,分享到朋友圈JSSDK使用步驟分享接口:頁面源碼:

經常在微信朋友圈分享一些好的文章或者讓人哭或笑的段子,就在手機右上角的三個豎點一鍵分享就ok了,那麼對于分享到朋友圈是怎麼實作的呢?對于那種活動分享送流量是怎麼定位分享者的呢?而想要将文章發送給朋友又是怎麼擷取到的朋友清單的呢?

         微信JS-SDK是微信公衆平台面向網頁開發者提供的基于微信内的網頁開發工具包。

JSSDK使用步驟

1、綁定域名

           先登入微信公衆平台進入“公衆号設定”的“功能設定”裡填寫“JS接口安全域名”。

說明:設定此安全域名目的是為了當發現此公衆平台發現誘導分享行為時,可以根據此域名追溯到所有分享出去的連結,以及通過這些連結增加的粉絲。

2、引入js檔案

          在需要調用JS接口的頁面引入如下JS檔案http://res.wx.qq.com/open/js/jweixin-1.0.0.js

說明:如果頁面啟用了https,務必要引入https://res.wx.qq.com/open/js/jweixin-1.0.0.js ,否則将無法在iOS9.0以上系統中成功使用JSSDK

3、通過config接口注入權限驗證配置

            在微信公衆平台JSSDK說明文檔是這樣解釋的:

wx.config({  
    debug: true, // 開啟調試模式,調用的所有api的傳回值會在用戶端alert出來,若要檢視傳入的參數,可以在pc端打開,參數資訊會通過log打出,僅在pc端時才會列印。  
    appId: '', // 必填,公衆号的唯一辨別  
    timestamp: , // 必填,生成簽名的時間戳  
    nonceStr: '', // 必填,生成簽名的随機串  
    signature: '',// 必填,簽名,見附錄1  
    jsApiList: [] // 必填,需要使用的JS接口清單,所有JS接口清單見附錄2  
})
           

4、通過ready接口處理成功驗證

wx.error(function(res){  
// config資訊驗證失敗會執行error函數,如簽名過期導緻驗證失敗,具體錯誤資訊可以打開config的debug模式檢視,也可以在傳回的res參數中檢視,對于SPA可以在這裡更新簽名。  
}); 
           

分享接口:

1、擷取“分享到朋友圈”按鈕點選狀态及自定義分享内容接口

wx.onMenuShareTimeline({  
    title: '', // 分享标題  
    link: '', // 分享連結  
    imgUrl: '', // 分享圖示  
    success: function () {   
        // 使用者确認分享後執行的回調函數  
    },  
    cancel: function () {   
        // 使用者取消分享後執行的回調函數  
    }  
});
           

2、擷取“分享給朋友”按鈕點選狀态及自定義分享内容接口

wx.onMenuShareAppMessage({  
    title: '', // 分享标題  
    desc: '', // 分享描述  
    link: '', // 分享連結  
    imgUrl: '', // 分享圖示  
    type: '', // 分享類型,music、video或link,不填預設為link  
    dataUrl: '', // 如果type是music或video,則要提供資料連結,預設為空  
    success: function () {   
        // 使用者确認分享後執行的回調函數  
    },  
    cancel: function () {   
        // 使用者取消分享後執行的回調函數  
    }  
}); 
           

之前做過一個微信搖一搖的頁面,當然這個頁面需要自定義分享功能,

頁面源碼:

<%--引入js檔案--%>  
 <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>  
<%--通過config接口注入權限驗證配置--%>  
     <script>  
        wx.config({  
            debug: false,  
            appId: '${shakeMap.appId}',  
            timestamp: '${shakeMap.timestamp}',  
            nonceStr: '${shakeMap.nonceStr}',  
            signature: '${shakeMap.signature}',  
            jsApiList: [  
                'checkJsApi',  
                'onMenuShareTimeline',  
                'onMenuShareAppMessage'  
            ]  
        });  
        wx.ready(function () {  
                <%--公共方法--%>  
            var shareData = {  
                title: '${title}',  
                desc: '${description}',  
                link: '${url}',  
                imgUrl: '${headImgUrl}',  
                success: function (res) {  
                    //alert('已分享');  
                },  
                cancel: function (res) {  
                }  
            };  
                <%--分享給朋友接口--%>  
            wx.onMenuShareAppMessage({  
                title: '${title}',  
                desc: '${description}',  
                link: '${url}',  
                imgUrl: '${headImgUrl}',  
                trigger: function (res) {  
                          //  alert('使用者點選發送給朋友');  
                },  
                success: function (res) {  
                    //alert('已分享');  
                },  
                cancel: function (res) {  
                    //alert('已取消');  
                },  
                fail: function (res) {  
                    alert(JSON.stringify(res));  
                }  
            });  
                <%--分享到朋友圈接口--%>  
            wx.onMenuShareTimeline(shareData);  
        });  
          <%--處理失敗驗證--%>  
        wx.error(function (res) {  
            alert("error: " + res.errMsg);  
        });  
    </script>  
           

一定要在公衆号進行安全 域名的配置,這樣,微信就可以 牢牢控制你的微信平台了,一旦發現 違規,讓分 享連結失敗,删 除掉誘導行為增加 的粉絲,是瞬間就可以 完成的。是以,微信平台 的開發者,一定要合理來使用 分享功能,不要因小失大。等到你的微信平台被 封,估計哭都 來不及了。 

繼續閱讀