微信網頁開發踩坑記

最近參與了公司的微信公衆號商城站點的開發與上線過程，遇到一些印象比較深入的坑，通過多方查找，最後終於一一解決了，寫個文章總結下。主要有三個坑：

1. 微信公衆號網頁二次分享問題
2. 複製粘貼板安卓和ios兼容性問題
3. 調用window.history.go(-1)時回退頁面刷新問題

不想聽我講廢話的以及探究過程的，提早寫明症狀及處理方法，不浪費你們的時間。

1. 對於第一個二次分享問題，通過多方查找，發現通過微信公衆號網頁分享出去的頁面，微信會自動加上from=xx&isappinstalled=0參數，點擊分享連接進來，調用wx.config進行配置時，即便有正確的配置參數signature，微信也會報 invalid signature。起初懷疑是url多了分享的參數致使的問題，後來翻了下微信jssdk的開發文檔，對於錯誤緣由，能夠查看微信公衆平臺開發文檔附錄五，有這樣一段話：

   確保你獲取用來簽名的url是動態獲取的，動態頁面可參見實例代碼中php的實現方式。若是是html的靜態頁面在前端經過ajax將url傳到後臺簽名，前端須要用js獲取當前頁面除去'#'hash部分的連接（可用location.href.split('#')[0]獲取,並且須要encodeURIComponent），由於頁面一旦分享，微信客戶端會在你的連接末尾加入其它參數，若是不是動態獲取當前連接，將致使分享後的頁面簽名失敗。

   在獲取js簽名的時候須要把當前的url中除hash外的部分作encodeURIComponent後傳給微信的api。

2. 複製粘貼功能。安卓和ios支持的選中複製元素的api不一樣，因此須要根據平臺作兼容處理。

   function setClipboardData(params) {
   const { data } = params;
   const isiOS = !!window.navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
   
   if (data && document.execCommand) {
   let textarea = document.getElementById('J_clipboard_textarea');
   
   if (!textarea) {
     textarea = document.createElement('input');
     textarea.id = 'J_clipboard_textarea';
     textarea.style.opacity = 0;
     textarea.setAttribute('value', data);
     document.body.appendChild(textarea);
   }
   
   if (isiOS) {
     const range = document.createRange();
   
     textarea.contentEditable = true;
     textarea.readOnly = true;
   
     range.selectNodeContents(textarea);
     window.getSelection().addRange(range);
     textarea.setSelectionRange(0, 100);
   } else {
     textarea.select();
   }
   
   if (document.execCommand('copy')) {
     if (isiOS) {
       window.getSelection().removeAllRanges();
     }
     document.body.removeChild(textarea);
     return true;
   }
   
   document.body.removeChild(textarea);
   return false;
   複製代碼

} return Promise.reject(); } ```

3. 調用window.location.go(-1)時，返回時頁面沒有刷新（因爲咱們使用的是vue，能夠很清楚的看到created沒有執行）。所使用的測試機是一臺iphone 6s plus，在別的機型上也有發現，致使在確認訂單更換收貨地址以及添加收貨地址後返回地址列表時都未能及時更新。

   監聽window下的pageshow方法，在pageshow方法中對頁面進行reload。

   window.addEventListener('pageshow', (e) => {
       // 當網頁來自緩存時，從新reload
       if (e.persisted) {
           window.location.reload();
       }
   });
   複製代碼

以上就是這三個問題的處理辦法了。探究過程仍是經歷了一番曲折的。

下面聽我細細道來......

公衆號二次分享

公衆號網頁二次分享的問題，經過charls抓包而且把線上代碼複製到本地，而後用charls作MAP LOCAL, 定位到了分享不成功是由於wx.config有問題了，經過設置wx.error看到報出了 invalid signature的錯誤。當時懷疑是signature不正確，就對比兩個獲取jsSignature的請求，發現二次分享的頁面上多了from=xxx&isappinstalled=0的參數，而後嘗試在發請求前把這兩個參數去掉，結果仍然報invalid signature錯誤。

而後就去找到後端的同事，讓他把調用參數給我，而後我本身在微信js接口簽名校驗工具裏測試，測試的結果和接口返回的結果是同樣的，因而排除了簽名自己的問題。後來就擱置了一段。

後來仍是有點不甘心，就接着在網上找答案。通過屢次關鍵詞搜索，終於找到了線索。問題就出如今from=xxx&isappinstalled=0這兩個參數上。正是由於這兩個參數致使了微信sdk配置signature錯誤。而後試着在vue的created裏對href作檢測並替換掉from=xxx&isappinstalled參數，而後從新複製href。

問題到這裏就結束了。

複製粘貼板安卓和ios兼容性問題

以前有同事寫了複製粘貼板的代碼，我只是調用。後來測試的同事發現絲毫沒效果。而後我就對複製粘貼板的代碼進行了一番改造。剛開始沒什麼頭緒，就去網上找一些成型的代碼。後來在stackoverflow發現了一段代碼，對原來的代碼稍做改造，能夠了。而後就興奮的發上線。然而，事情並無那麼簡單...

在安卓和網頁上是好的，可是在ios上document.execCommand('copy')直接返回了false。讓我有點鬱悶。而後幾經查找，發現el.select在ios下是不能運行的，這段代碼存在兼容性問題。後來又針對ios寫了另一段複製的代碼。最終解決了這一問題。

window.location.go(-1)刷新問題

這個問題發生在一個iphone6sp的測試機上，我本人用的iphone8，並不存在這個問題，頁面正常地從新執行了。起初覺得只是那臺機器有問題，就找了一臺iphone6p作測試，發如今6p下是好的。加之還有別的事情要忙，就先放一邊了。

過了一下子測試同事說又有一臺iphone6也有這個問題，而後以爲這個問題也許並非某個機型的問題，而是一類機型都存在這個問題，因而就着手處理這個問題。經過map local調試，發現vue的created沒有執行，並且vue的組件並無用keep-alive包裹，因而把問題定位在了頁面刷新的問題上，進而定位到了頁面返回時調用的window.history.go這個api上。在網上找了一些這個api的信息，而後說的是返回並刷新，可是貌似並無刷新啊...

後來通過一番查找和屢次試驗，終於找到了一個救命稻草————pageshow, 經過監聽pageshow，當頁面返回調用window.location.go時，會出發pageshow，而後順利地解決了這個問題。

大概就是這三個問題了，不過遇到問題也是一種收穫，但願天天的工做都能有所得吧。