微信分享填坑指南

準備工做

若是想要是使用微信的分享功能，須要使用微信JS-SDK來完成。且只能點擊微信右上角的...調起分享面板，不能直接由頁面行爲喚起！

微信JS-SDK是微信公衆平臺面向網頁開發者提供的基於微信內的網頁開發工具包。經過使用微信JS-SDK，網頁開發者可藉助微信高效地使用拍照、選圖、語音、位置等手機系統的能力，同時能夠直接使用微信分享、掃一掃、卡券、支付等微信特有的能力。

JS-SDK使用

一、綁定域名：

登陸微信公衆平臺 --> 公衆號設置 --> 功能設置 --> 填寫「JS接口安全域名」

二、在頁面引入JS文件：

http://res.wx.qq.com/open/js/jweixin-1.2.0.js

注：支持https；支持使用 AMD/CMD 標準模塊加載方法加載；應儘量早的加載，建議放置到頁面head里加載。

三、配置config：

全部須要使用JS-SDK的頁面必須先注入配置信息，不然將沒法調用。

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

注意：

• config是一個客戶端的異步操做
• 在JS-SDK後調用，也應該儘量早的調用
• 同一個url僅需調用一次
• 對於變化url的SPA的web app可在每次url變化時進行調用
• 低於Android6.2版本的微信客戶端，不支持pushState的H5新特性，使用pushState來實現web app的頁面會致使簽名失敗

四、配置成功回調：

wx.ready(function(){
   // ...
});

因爲config是一個異步操做，因此若是須要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則能夠直接調用，不須要放在ready函數中。

注：不管config成功或失敗，ready中的內容都會被執行！

五、配置失敗回調：

config信息驗證失敗會執行error函數。

wx.error(function(res){
    // ...
});

六、通用參數：

全部接口經過wx對象(也可以使用jWeixin對象)來調用，參數是一個對象，除了每一個接口自己須要傳的參數以外，還有如下通用函數參數：

• success 接口調用成功時執行的回調函數。
• fail 接口調用失敗時執行的回調函數。
• complete 接口調用完成時執行的回調函數，不管成功或失敗都會執行。
• cancel 用戶點擊取消時的回調函數，僅部分有用戶取消操做的api纔會用到。
• trigger 監聽Menu中的按鈕點擊時觸發的方法，該方法僅支持Menu中的相關接口。

回調參數：

{
    xxx: xxx,
    errMsg: '' // 接口調用成功/失敗信息
}

注：
不要嘗試在trigger中使用ajax異步請求修改本次分享的內容，由於客戶端分享操做是一個同步操做，這時候使用ajax的回包會尚未返回。

微信分享

用戶調用微信的分享功能，能夠自定義分享的title和描述，以及小圖標和連接。能夠分享到羣、好友、朋友圈、QQ、QQ空間等。

分享設計規範

• 分享標題：14字之內，建議使用朋友般親切的口吻
• 分享圖標：尺寸120*120，大小不超過10K，不支持GIF格式。必須採用https協議。
• 分享描述：20字之內，對標題的簡要解讀。
• 分享連接：外鏈頁面所在服務器至少能支持每秒1500次的訪問壓力，且每次訪問的響應時間200ms之內。必須採用https協議。
• 分享行爲：頁面上無分享按鈕，頁面上無誘導分享行爲，包含但不限於分享後才能看到特定的信息，分享後才能進行下一步流程，分享後能夠得到獎勵等
• 分享文案：分享時「文案」和「圖片」能夠正常顯示，分享後連接能夠訪問。

分享標題和描述不能出現敏感詞彙，不然會致使部分不可預知的問題。好比分享者能夠看到分享圖標，被分享者看不到圖標等。

敏感詞舉例：紅包、現金、到帳等

注：分享的圖標連接和分享連接儘可能保持爲同一域名下的資源。不然可能會出現分享不成功或分享圖標不顯示的狀況。

因爲不能由頁面直接喚起微信的分享面板，因此就須要一個彈窗浮層來引導用戶用戶去點擊...按鈕喚起分享面板。注意這個彈窗浮層不能出現誘導分享的內容。

分享或廣告文案禁止內容：

• 特殊字符：不容許使用特殊字符與符號 ，例如：「：）」 「-。-」等； 不容許使用 emoji 表情
• 誘導或引導操做： 不容許出現誘導或引導用戶操做的描述。包含但不限於如下文案：「請點擊查看詳情」、 「趕快戳開看一看」、「點一下下面你就知道是什麼」、「點擊下方瞭解公衆號」
• 微信產品功能詞彙：未經微信官方受權，禁止使用如下產品功能詞彙及其諧音詞彙。包含但不限於如下內容：「朋友圈」 、「點贊」 、「評論」 、「公衆號」、 「微信」、 「紅包」
• URL：不容許直接放URL連接內容
• 電話號碼：不容許出現電話號碼
• 破折號：不容許出現破折號，破折號在移動端顯示容易產生歧義
• 空行&空格：不容許使用空行或空格
• 不規範折行：不容許出現單個詞語或文字折行
• 股票代碼：不容許出現公司股票代碼
• 非簡體中文文字&方言&小語種：不容許使用非簡體中文文字（單字、詞語、成語）。暫不支持使用方言和小語種做爲文案。
• 產品銷量數據：不容許使用任何維度的產品銷量數據。

分享接口

分享到朋友圈、好友、QQ、QQ空間對應的接口爲'onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareQZone'

分享到朋友圈

wx.onMenuShareTimeline({
    title: '', // 分享標題
    link: '', // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
    imgUrl: '', // 分享圖標
    success: function () {
        // 用戶確認分享後執行的回調函數
    },
    cancel: function () {
        // 用戶取消分享後執行的回調函數
    }
});

注：分享到朋友圈，只有title分享標題，沒有desc描述。

分享到好友或羣

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

分享到QQ和QQ空間

分享接口：onMenuShareQQ, onMenuShareQZone

分享參數：

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

分享開發調試時注意事項

一、分享出去的外鏈的域名必須和公衆號後臺配置的JS安全域名一致，不然會致使分享的失敗

二、分享出去的外鏈，會自動給加上微信標識，致使二次分享失敗。

如打開頁面：

https://www.xxx.com/m/#/activity/invite/friends

分享出去連接：

https://www.xxx.com/m/?from=groupmessage&isappinstalled=0#/activity/invite/friends

微信自動在分享後邊加上了query字符串：

from=groupmessage   分享到羣
from=timeline  分享到朋友圈
from=singlemessage  分享到好友
isappinstalled=0    0或1，表示是否安裝了app

注：安卓手機分享到朋友圈的連接，只會帶from=timeline。

因爲微信的簽名生成時，須要傳一個url參數，而這個url則是經過：

location.href.split('#')[0]

獲取的url，取的是url的#前邊的部分來生成簽名，第一次分享成功，生成簽名的url不帶query字段。經過一次分享出去的連接，帶上了query後，生成的簽名就無效了，致使二次分享失敗。

解決辦法：

R一、替換路徑，簡單粗暴（query字段只對微信有用，對咱們沒用）

let href = window.location.href;
if(href.indexOf('groupmessage') > -1 || href.indexOf('singlemessage') > -1 || href.indexOf('timeline') > -1){
    href = href.replace(/\?from=(groupmessage|singlemessage|timeline)(\S*)#/, '#');
    window.location.href = href;
}

不過這樣，會致使頁面請求兩次，細心的用戶可能會感知到。或者用戶網絡不穩定時，可能他會感受到兩次頁面的刷新。

R二、生成簽名的時候，動態的獲取url，傳給生成簽名的接口。

每次打開頁面時，都獲取到url的#前邊部分傳給簽名生成接口，保證每次的簽名都是有效的。

三、微信分享時invalid signature錯誤解決和查找順序

1. 確認簽名算法正確，可用http://mp.weixin.qq.com/debug... 頁面工具進行校驗。
2. 確認config中nonceStr（js中駝峯標準大寫S）, timestamp與用以簽名中的對應noncestr, timestamp一致。
3. 確認url是頁面完整的url(請在當前頁面alert(location.href.split('#')[0])確認)，包括'http(s)://'部分，以及'？'後面的GET參數部分,但不包括'#'hash後面的部分。
4. 確認 config 中的 appid 與用來獲取 jsapi_ticket 的 appid 一致。
5. 確保必定緩存access_token和jsapi_ticket。
6. 確保你獲取用來簽名的url是動態獲取的，動態頁面可參見實例代碼中php的實現方式。若是是html的靜態頁面在前端經過ajax將url傳到後臺簽名，前端須要用js獲取當前頁面除去'#'hash部分的連接（可用location.href.split('#')[0]獲取,並且須要encodeURIComponent），由於頁面一旦分享，微信客戶端會在你的連接末尾加入其它參數，若是不是動態獲取當前連接，將致使分享後的頁面簽名失敗。

四、注意分享外鏈和圖標連接的拼寫，若是拼寫錯誤，微信分享雖然不報錯，但卻會致使分享失敗