微信分享自定義樣式

微信分享到朋友圈&微信分享給朋友自定義圖文信息

---

原本效果:

預期效果:

---

參考:微信開發者文檔js-sdk

須要準備的:

**經過微信認證的公衆號**
 **有備案過的域名**

步驟:

後臺須要實現的事情:

1.登陸微信公衆平臺進入「公衆號設置」的「功能設置」裏填寫「JS接口安全域名」,(調用的url必須在js接口安全域名能夠 )

2.登陸後可在「開發者中心」查看對應的接口權限,認證過的公衆號均可以調大多數接口。

3.生成js-sdk的權限簽名:jsapi_ticket 參照js-sdk權限簽名文檔

前端須要乾的事情:
1.在須要調用JS接口的頁面引入以下JS文件，（支持https）：http://res.wx.qq.com/open/js/...
備註：支持使用 AMD/CMD 標準模塊加載方法加載

2.前端經過發送請求獲取簽名權限或者後臺語言嵌入html (題主公司直接用的內嵌php),由於簽名權限出於安全問題只能經過後臺實現

3.經過config接口注入權限驗證配置,參數由後臺提供,選項debug上線後記得設置成false

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

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

4.經過ready接口處理成功驗證,驗證失敗進入error回調函數

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

5.經過error接口處理失敗驗證
驗證失敗多是因爲簽名過時或者沒有接收到等緣由致使的

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

6.在ready函數裏寫分享的代碼
請注意不要有誘導分享等違規行爲，對於誘導分享行爲將永久回收公衆號接口權限
分享朋友圈代碼:

//獲取「分享到朋友圈」按鈕點擊狀態及自定義分享內容接口
wx.onMenuShareTimeline({
    title: '', // 分享標題
    link: '', // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
    imgUrl: '', // 分享圖標 這個圖片地址須要填寫絕對路徑 www.xxx.com/images/xxx.jpg
    success: function () {
    // 用戶確認分享後執行的回調函數
},
cancel: function () {
    // 用戶取消分享後執行的回調函數
    }
});

分享給朋友代碼

wx.onMenuShareAppMessage({
title: '', // 分享標題
desc: '', // 分享描述
link: '', // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
imgUrl: '', // 分享圖標  這個圖片地址須要填寫絕對路徑 www.xxx.com/images/xxx.jpg
type: '', // 分享類型,music、video或link，不填默認爲link
dataUrl: '', // 若是type是music或video，則要提供數據連接，默認爲空
success: function () {
// 用戶確認分享後執行的回調函數
},
cancel: function () {
// 用戶取消分享後執行的回調函數
}
});

本身寫的時候碰到的bug:
由於先後端沒有分離,在經過config接口注入權限驗證配置時須要把js代碼寫在html文件中才能獲取到參數,單獨寫成一個js文件讀取不到

以上就是所有代碼,有錯歡迎指出,看到就會改,但願能幫到你!