微信網頁自定義分享踩坑日誌

millan發表於2019-01-08
網頁

0、先上主要內容

入坑

在微信網頁開發中，使用JSSDK自定義分享內容。按官方文件去弄，然後出現的問題是：IOS手機自定義分享正常，而安卓手機自定義分享不生效，但是wx.config之類的配置都是ok。我使用的JSSDK版本是1.4.0。分享API是updateAppMessageShareData。

另外再提一下。使用最新的分享API時，微信會自動在我們的分享連結後面加引數，這會導致我們傳遞引數時，解析會出問題。比如我們配置的連結是：https://test.com?id=11。當分享後，連結變成了：https://test.com?from=singlemessage ?id=11。這就會導致我們從連結中拿引數時會出問題。但是它還是有規律的。它是在?號前面插入自己的引數的。所以我們的引數就是最後一個?號後面的引數（下面程式碼只是說明下思路，具體應用肯定是要判斷多種情況的，從URL地址獲取引數這些基本技能就不用說了）：

    let paramsArray = window.location.href.split("?");
    let myParams = paramsArray[paramsArray.length -1]; //我們的引數在這裡
複製程式碼

填坑

最後發現是由於使用了最新版本庫的新的分享API造成的，在微信社群中也有人提出，但現在還是未解決的。所以唯一方法就是不要使用的版本和新的分享API。建議使用1.3.3版本的onMenuShareAppMessage。官方文件提醒大家這幾個舊的API即將廢棄。但是由於新的API的不穩定，以及沒有說明具體時間，廢棄之前的API還是有段時間的。所以如此出現和我一樣的問題，安卓手機無法自定義分享，IOS手機可以，或者其他問題，大家試試是不是版本問題，給大家提供個思路，供參考

看到這裡，你就完全瞭解這篇文章的主要內容了。如果你時間寶貴，可以就此離開了。如果你有興趣，可以繼續聽聽我講故事。

下面正式開始講故事

一、入坑過程

在最近開發的專案中，有個微信自定義分享功能，因為之前也做過微信網頁開發，就覺得小case，引入JSSDK、後端提供配置介面、呼叫wx.config配置下SDK、在wx.ready中配置需要用到的API比如分享給微信好友，搞定。

開始幹活，畢竟上次開發微信網頁也隔了快一年的，JSSDK版本都不知道更新多少了，先去官網看看文件 微信JS-SDK說明文件 。乍一看，版本都到1.4.0。這次功能主要用到分享介面，跳到分享介面看看

請注意，原有的 wx.onMenuShareTimeline、wx.onMenuShareAppMessage、wx.onMenuShareQQ、wx.onMenuShareQZone 介面，即將廢棄。請儘快遷移使用客戶端6.7.2及JSSDK 1.4.0以上版本支援的 wx.updateAppMessageShareData、updateTimelineShareData 介面。

原有的wx.onMenuShareTimeline、wx.onMenuShareAppMessage、wx.onMenuShareQQ、wx.onMenuShareQZone分享介面即將被廢棄，取而代之是 wx.updateAppMessageShareData、updateTimelineShareData。同時進行了合併，分享給微信好友和分享到QQ好友合併成了一個介面、分享到朋友圈和分享到QQ空間合併成了一個介面。

這樣情況下，肯定是要用1.4.0版本，並且用最新的API。

按照官方文件，接下來就是一波猛如虎的操作，然後在自己的IOS手機上自測沒問題就提測了

tip: 這其中要求分享連結域名或路徑必須與當前頁面對應的公眾號JS安全域名一致。因為介面也可能是同個域名，為方便本地測試，使用了charles的map remote進行代理，方便本地開發

二、發現問題

我只在自己的IOS手機測試過沒問題，提測後，測試同學發現，IOS自定義分享沒問題，安卓手機自定義分享到微信好友、微信空間就有問題。而且安卓手機分享到QQ分享到QQ空間都沒問題。

總結坑就是： 安卓手機分享到微信好友、微信空間不行。其他分享都可以

三、填坑

一直對自己寫的程式碼自信滿滿，聽到測試同學提說有bug，還不信，自認為是環境問題。後來發現，我是小看了微信，微信開發自古坑多，還是得乖乖去找找是什麼問題造成的

首先開啟除錯模式

發現wx.config返回ok、相關API配置也是返回ok，這說明JSSDK以及相關介面的配置時沒問題的啊。

然後，從頭開始排查，配置先寫死，按文件寫個最標準的試試，還是還行。

接下來，就是各種google了，有人提過相應的問題，在微信開發社群也有同志反饋了(2018-09-29)，而且也有官方人員出來回答了，但最後還是沒有答案。

最後，就是取看那些自定義分享成功的demo。我一看，沒區別啊，再仔細看，突然發現那些成功的demo用的API和我用的不同，這下有點想法了，莫非是版本問題？好，接下來又是一波猛如虎的操作，降個版本用1.3.3。然後測試下，果然都可以，然後提測讓測試同學測也都通過了。果然是最新的API不穩定。

四、總結

1、微信JSSDK現在最新版本1.4.0。首先它對微信客戶要求是6.7.2。這個相對要求還是有點高

2、其次，最新的版本穩定性還是有待考察的

3、在使用到外面公共庫，得留意下相關版本問題，webpack/npm也經常由於版本而出問題

一言以蔽之，就是由於使用了最新版本JSSDK以及相關API導致安卓手機無法自定義分享，使用低版本庫以及API就可以了。

注意，寫這篇文章是2019-01-08，之後微信可能會修復這個問題，到時就可以考慮使用新的api，並且有些會被廢棄的，只是給大家提個解決問題的思路。有問題望指正。

相關文章