產(chǎn)品需求：在微信內(nèi)分享需要手動(dòng)配置的分享地址、分享圖片與內(nèi)容描述，引導(dǎo)用戶分享，并在微信分享成功回調(diào)內(nèi)進(jìn)行相應(yīng)的操作。

首先需要在項(xiàng)目中引入微信jsSDk包，然后通過接口獲取后臺簽名。

封裝函數(shù)獲取微信分享必填參數(shù)

其中的jsApiList中填的是需要使用的微信分享js接口的列表，參數(shù)URL默認(rèn)是location.href，即分享當(dāng)前頁面的URL。

在需要分享的頁面引入封裝的函數(shù)

然后通過wxShare方法將URL和配置的參數(shù)傳入，link參數(shù)是分享出去的鏈接，必須與當(dāng)前頁面的對應(yīng)js安全域名一致；

...shareData就是在函數(shù)內(nèi)傳對象，進(jìn)行解構(gòu)賦值es6寫法

但是在測試過程中發(fā)現(xiàn)：

1.同一套程序，andriod分享正常，ios分享報(bào)簽名不正確，主要原因是微信的ios和安卓處理方式不一樣，ios不會刷新當(dāng)前的頁面地址，使用的是history的記錄地址，所以每次分享出來的鏈接，都是第一個(gè)進(jìn)入系統(tǒng)頁面的鏈接，當(dāng)跳轉(zhuǎn)到子頁面的時(shí)候，系統(tǒng)就會識別打開的url和簽名的url不一致導(dǎo)致簽名不正確

2.由于單頁面的hash模式會自帶#號，但是分享的時(shí)候會將#號后面的參數(shù)變成無效，導(dǎo)致想傳參數(shù)都傳不過去，可以做一個(gè)頁面沒有#號的，然后統(tǒng)一帶參數(shù)分享到這個(gè)頁面然后再重定向到指定的vue頁面

解決方法：在向后臺發(fā)送請求獲取微信簽名的時(shí)候?qū)鹘o后臺的URL的#后面的參數(shù)截去，后臺根據(jù)截取完的URL生成簽名就能實(shí)現(xiàn)安卓和iOS分享回調(diào)成功的問題。

補(bǔ)充知識：使用Vue全家桶進(jìn)行微信分享時(shí)出現(xiàn)的錯(cuò)誤

使用vue.js進(jìn)行微信H5頁面開發(fā)，開發(fā)過程中先進(jìn)行oAuth身份驗(yàn)證。后使用JSSDK，進(jìn)行微信分享。分享時(shí)會出現(xiàn)不調(diào)用自定義分享界面的情況，但是在刷新后可以正常顯示，

如下：

正常進(jìn)入分享：

刷新后分享：

由于Vue和微信調(diào)試環(huán)境的問題，在經(jīng)過幾次痛苦的嘗試后，我們發(fā)現(xiàn)了一個(gè)現(xiàn)象，那就是，如果此時(shí)點(diǎn)擊使用Safari打開，會出現(xiàn)：

這是我們在使用oAuth認(rèn)證時(shí)跳轉(zhuǎn)的中間界面（從oauth回調(diào)的頁面），但是在使用微信調(diào)試工具的時(shí)候，顯示的url為正確頁面，既為從回調(diào)頁面跳轉(zhuǎn)的頁面。

我們知道，在使用JSSDK進(jìn)行微信認(rèn)證的時(shí)候，需要使用當(dāng)前url調(diào)用wxcofig，那會不會有一種可能，當(dāng)vue進(jìn)行頁面跳轉(zhuǎn)的時(shí)候，微信瀏覽器仍然認(rèn)為當(dāng)前頁面在原頁面，所以導(dǎo)致傳遞的url和微信認(rèn)為你的url不一致，所以導(dǎo)致認(rèn)證錯(cuò)誤。

于是在嘗試給wxconfig傳遞url的時(shí)候，使用了跳轉(zhuǎn)前中間結(jié)果的url（既，保持傳遞給認(rèn)證的url和使用Safari打開的url一致），結(jié)果居然就行了。。。

行吧，算是微信在兼容vue的時(shí)候的一個(gè)坑，但愿大家以后能盡早跳出來。。。

以上這篇vue 微信分享回調(diào)iOS和安卓回調(diào)出現(xiàn)錯(cuò)誤的解決就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評論