1. 程式人生 > 程式設計 >vue 微信分享回撥iOS和安卓回調出現錯誤的解決

vue 微信分享回撥iOS和安卓回調出現錯誤的解決

產品需求:在微信內分享需要手動配置的分享地址、分享圖片與內容描述,引導使用者分享,並在微信分享成功回撥內進行相應的操作。

首先需要在專案中引入微信jsSDk包,然後通過介面獲取後臺簽名。

vue 微信分享回撥iOS和安卓回調出現錯誤的解決

封裝函式獲取微信分享必填引數

vue 微信分享回撥iOS和安卓回調出現錯誤的解決

其中的jsApiList中填的是需要使用的微信分享js介面的列表,引數URL預設是location.href,即分享當前頁面的URL。

在需要分享的頁面引入封裝的函式

vue 微信分享回撥iOS和安卓回調出現錯誤的解決

然後通過wxShare方法將URL和配置的引數傳入,link引數是分享出去的連結,必須與當前頁面的對應js安全域名一致;

vue 微信分享回撥iOS和安卓回調出現錯誤的解決

...shareData就是在函式內傳物件,進行解構賦值es6寫法

vue 微信分享回撥iOS和安卓回調出現錯誤的解決

但是在測試過程中發現:

1.同一套程式,andriod分享正常,ios分享報簽名不正確,主要原因是微信的ios和安卓處理方式不一樣,ios不會重新整理當前的頁面地址,使用的是history的記錄地址,所以每次分享出來的連結,都是第一個進入系統頁面的連結,當跳轉到子頁面的時候,系統就會識別開啟的url和簽名的url不一致導致簽名不正確

2.由於單頁面的hash模式會自帶#號,但是分享的時候會將#號後面的引數變成無效,導致想傳引數都傳不過去,可以做一個頁面沒有#號的,然後統一帶引數分享到這個頁面然後再重定向到指定的vue頁面

解決方法:在向後臺傳送請求獲取微信簽名的時候將傳給後臺的URL的#後面的引數截去,後臺根據擷取完的URL生成簽名就能實現安卓和iOS分享回撥成功的問題。

vue 微信分享回撥iOS和安卓回調出現錯誤的解決

補充知識:使用Vue全家桶進行微信分享時出現的錯誤

使用vue.js進行微信H5頁面開發,開發過程中先進行oAuth身份驗證。後使用JSSDK,進行微信分享。分享時會出現不呼叫自定義分享介面的情況,但是在重新整理後可以正常顯示,

如下:

正常進入分享:

vue 微信分享回撥iOS和安卓回調出現錯誤的解決

重新整理後分享:

vue 微信分享回撥iOS和安卓回調出現錯誤的解決

由於Vue和微信除錯環境的問題,在經過幾次痛苦的嘗試後,我們發現了一個現象,那就是,如果此時點選使用Safari開啟,會出現:

vue 微信分享回撥iOS和安卓回調出現錯誤的解決

這是我們在使用oAuth認證時跳轉的中間介面(從oauth回撥的頁面),但是在使用微信除錯工具的時候,顯示的url為正確頁面,既為從回撥頁面跳轉的頁面。

我們知道,在使用JSSDK進行微信認證的時候,需要使用當前url呼叫wxcofig,那會不會有一種可能,當vue進行頁面跳轉的時候,微信瀏覽器仍然認為當前頁面在原頁面,所以導致傳遞的url和微信認為你的url不一致,所以導致認證錯誤。

於是在嘗試給wxconfig傳遞url的時候,使用了跳轉前中間結果的url(既,保持傳遞給認證的url和使用Safari開啟的url一致),結果居然就行了。。。

行吧,算是微信在相容vue的時候的一個坑,但願大家以後能儘早跳出來。。。

以上這篇vue 微信分享回撥iOS和安卓回調出現錯誤的解決就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。