JSSDK微信自定義分享朋友圈

背景：15年以前的微信分享只須要加入一段js就能夠實現。後來微信官方所有禁止了。如今的微信分享所有得使用jssdk。

1、分享功能：

在微信內（必須在微信裏）打開網站頁面，分享給朋友或者分享到朋友圈時，本身能夠指定分享的標題、縮略圖、描述文字。（還能夠把這個分享功能進一步擴展，好比分享後發紅包、加積分、統計分享次數，誰分享了之類的功能，這個看我的需求而定。）

2、使用條件:

一、認證公衆號（就是交了300塊給騰訊認證的），不管是認證訂閱號仍是認證服務號均可以。

二、有一個備案域名

3、開發：使用微信JSSDKAPI

JSSDK使用步驟

步驟一：綁定域名

先登陸微信公衆平臺進入「公衆號設置」的「功能設置」裏填寫「JS接口安全域名」。若是你使用了支付類接口，請確保支付目錄在該安全域名下，不然將沒法完成支付。

備註：登陸後可在「開發者中心」查看對應的接口權限。

步驟二：引入JS文件

在須要調用JS接口的頁面引入以下JS文件，（支持https）：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

 

步驟三：經過config接口注入權限驗證配置

 

全部須要使用JS-SDK的頁面必須先注入配置信息，不然將沒法調用（同一個url僅需調用一次，對於變化url的SPA的web app可在每次url變化時進行調用,目前Android微信客戶端不支持pushState的H5新特性，因此使用pushState來實現web app的頁面會致使簽名失敗，此問題會在Android6.2中修復）。

 

 

 

wx.config({
    debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
    appId: '', // 必填，公衆號的惟一標識
    timestamp: , // 必填，生成簽名的時間戳
    nonceStr: '', // 必填，生成簽名的隨機串
    signature: '',// 必填，簽名，見附錄1
    jsApiList: [] // 必填，須要使用的JS接口列表，全部JS接口列表見附錄2
});

 

步驟四：經過ready接口處理成功驗證

 

wx.ready(function(){

    // config信息驗證後會執行ready方法，全部接口調用都必須在config接口得到結果以後，config是一個客戶端的異步操做，因此若是須要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則能夠直接調用，不須要放在ready函數中。
});

 

步驟五：經過error接口處理失敗驗證

 

wx.error(function(res){

    // config信息驗證失敗會執行error函數，如簽名過時致使驗證失敗，具體錯誤信息能夠打開config的debug模式查看，也能夠在返回的res參數中查看，對於SPA能夠在這裏更新簽名。

});

分享接口

請注意不要有誘導分享等違規行爲，對於誘導分享行爲將永久回收公衆號接口權限，詳細規則請查看：朋友圈管理常見問題 。

獲取「分享到朋友圈」按鈕點擊狀態及自定義分享內容接口

wx.onMenuShareTimeline({
    title: '', // 分享標題
    link: '', // 分享連接
    imgUrl: '', // 分享圖標
    success: function () { 
        // 用戶確認分享後執行的回調函數
    },
    cancel: function () { 
        // 用戶取消分享後執行的回調函數
    }
});

獲取「分享給朋友」按鈕點擊狀態及自定義分享內容接口

wx.onMenuShareAppMessage({
    title: '', // 分享標題
    desc: '', // 分享描述
    link: '', // 分享連接
    imgUrl: '', // 分享圖標
    type: '', // 分享類型,music、video或link，不填默認爲link
    dataUrl: '', // 若是type是music或video，則要提供數據連接，默認爲空
    success: function () { 
        // 用戶確認分享後執行的回調函數
    },
    cancel: function () { 
        // 用戶取消分享後執行的回調函數
    }
});

獲取「分享到QQ」按鈕點擊狀態及自定義分享內容接口

wx.onMenuShareQQ({
    title: '', // 分享標題
    desc: '', // 分享描述
    link: '', // 分享連接
    imgUrl: '', // 分享圖標
    success: function () { 
       // 用戶確認分享後執行的回調函數
    },
    cancel: function () { 
       // 用戶取消分享後執行的回調函數
    }
});

4、效果演示：

爲了方便使用，我已經把分享功能的代碼封裝，配置兩個參數就可使用。

若有須要，請聯繫 851 488 243 ，備註：微信分享