vue 微信分享回調(diào)iOS和安卓回調(diào)出現(xiàn)錯(cuò)誤的解決
產(chǎn)品需求:在微信內(nèi)分享需要手動(dòng)配置的分享地址、分享圖片與內(nèi)容描述,引導(dǎo)用戶分享,并在微信分享成功回調(diào)內(nèi)進(jìn)行相應(yīng)的操作。
首先需要在項(xiàng)目中引入微信jsSDk包,然后通過(guò)接口獲取后臺(tái)簽名。
封裝函數(shù)獲取微信分享必填參數(shù)
其中的jsApiList中填的是需要使用的微信分享js接口的列表,參數(shù)URL默認(rèn)是location.href,即分享當(dāng)前頁(yè)面的URL。
在需要分享的頁(yè)面引入封裝的函數(shù)
然后通過(guò)wxShare方法將URL和配置的參數(shù)傳入,link參數(shù)是分享出去的鏈接,必須與當(dāng)前頁(yè)面的對(duì)應(yīng)js安全域名一致;
...shareData就是在函數(shù)內(nèi)傳對(duì)象,進(jìn)行解構(gòu)賦值es6寫法
但是在測(cè)試過(guò)程中發(fā)現(xiàn):
1.同一套程序,andriod分享正常,ios分享報(bào)簽名不正確,主要原因是微信的ios和安卓處理方式不一樣,ios不會(huì)刷新當(dāng)前的頁(yè)面地址,使用的是history的記錄地址,所以每次分享出來(lái)的鏈接,都是第一個(gè)進(jìn)入系統(tǒng)頁(yè)面的鏈接,當(dāng)跳轉(zhuǎn)到子頁(yè)面的時(shí)候,系統(tǒng)就會(huì)識(shí)別打開的url和簽名的url不一致導(dǎo)致簽名不正確
2.由于單頁(yè)面的hash模式會(huì)自帶#號(hào),但是分享的時(shí)候會(huì)將#號(hào)后面的參數(shù)變成無(wú)效,導(dǎo)致想傳參數(shù)都傳不過(guò)去,可以做一個(gè)頁(yè)面沒(méi)有#號(hào)的,然后統(tǒng)一帶參數(shù)分享到這個(gè)頁(yè)面然后再重定向到指定的vue頁(yè)面
解決方法:在向后臺(tái)發(fā)送請(qǐng)求獲取微信簽名的時(shí)候?qū)鹘o后臺(tái)的URL的#后面的參數(shù)截去,后臺(tái)根據(jù)截取完的URL生成簽名就能實(shí)現(xiàn)安卓和iOS分享回調(diào)成功的問(wèn)題。
補(bǔ)充知識(shí):使用Vue全家桶進(jìn)行微信分享時(shí)出現(xiàn)的錯(cuò)誤
使用vue.js進(jìn)行微信H5頁(yè)面開發(fā),開發(fā)過(guò)程中先進(jìn)行oAuth身份驗(yàn)證。后使用JSSDK,進(jìn)行微信分享。分享時(shí)會(huì)出現(xiàn)不調(diào)用自定義分享界面的情況,但是在刷新后可以正常顯示,
如下:
正常進(jìn)入分享:
刷新后分享:
由于Vue和微信調(diào)試環(huán)境的問(wèn)題,在經(jīng)過(guò)幾次痛苦的嘗試后,我們發(fā)現(xiàn)了一個(gè)現(xiàn)象,那就是,如果此時(shí)點(diǎn)擊使用Safari打開,會(huì)出現(xiàn):
這是我們?cè)谑褂胦Auth認(rèn)證時(shí)跳轉(zhuǎn)的中間界面(從oauth回調(diào)的頁(yè)面),但是在使用微信調(diào)試工具的時(shí)候,顯示的url為正確頁(yè)面,既為從回調(diào)頁(yè)面跳轉(zhuǎn)的頁(yè)面。
我們知道,在使用JSSDK進(jìn)行微信認(rèn)證的時(shí)候,需要使用當(dāng)前url調(diào)用wxcofig,那會(huì)不會(huì)有一種可能,當(dāng)vue進(jìn)行頁(yè)面跳轉(zhuǎn)的時(shí)候,微信瀏覽器仍然認(rèn)為當(dāng)前頁(yè)面在原頁(yè)面,所以導(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è)坑,但愿大家以后能盡早跳出來(lái)。。。
以上這篇vue 微信分享回調(diào)iOS和安卓回調(diào)出現(xiàn)錯(cuò)誤的解決就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue項(xiàng)目判斷開發(fā)、測(cè)試、正式環(huán)境過(guò)程
這篇文章主要介紹了Vue項(xiàng)目判斷開發(fā)、測(cè)試、正式環(huán)境過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04VUE +Element 實(shí)現(xiàn)多個(gè)字段值拼接功能
這篇文章主要介紹了VUE +Element 實(shí)現(xiàn)多個(gè)字段值拼接,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-04-04vue中render函數(shù)和h函數(shù)以及jsx的使用方式
這篇文章主要介紹了vue中render函數(shù)和h函數(shù)以及jsx的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08不依任何賴第三方,單純用vue實(shí)現(xiàn)Tree 樹形控件的案例
這篇文章主要介紹了不依任何賴第三方,單純用vue實(shí)現(xiàn)Tree 樹形控件的案例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09vue組件封裝實(shí)現(xiàn)抽獎(jiǎng)隨機(jī)數(shù)
這篇文章主要為大家詳細(xì)介紹了vue組件封裝實(shí)現(xiàn)抽獎(jiǎng)隨機(jī)數(shù),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03vue動(dòng)態(tài)設(shè)置img的src路徑實(shí)例
今天小編就為大家分享一篇vue動(dòng)態(tài)設(shè)置img的src路徑實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09淺談Vue使用Cascader級(jí)聯(lián)選擇器數(shù)據(jù)回顯中的坑
這篇文章主要介紹了淺談Vue使用Cascader級(jí)聯(lián)選擇器數(shù)據(jù)回顯中的坑,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10Vue3使用路由及配置vite.alias簡(jiǎn)化導(dǎo)入寫法的過(guò)程詳解
這篇文章主要介紹了Vue3使用路由及配置vite.alias簡(jiǎn)化導(dǎo)入寫法,本文通過(guò)實(shí)例代碼給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-11-11