vue-router history模式下的微信分享小結(jié)
背景
舊項(xiàng)目改造,進(jìn)行前后端分離。做成了spa,為了保證后端路由時(shí)期鏈接可用性,使用了history模式。
因?yàn)椴煌捻?yè)面有不同的分享內(nèi)容,所以每次路由都要重新進(jìn)行wx.config/wx.ready調(diào)用
微信分享遇到的坑
微信官方文檔上有下面一段話(huà):
所有需要使用JS-SDK的頁(yè)面必須先注入配置信息,否則將無(wú)法調(diào)用(同一個(gè)url僅需調(diào)用一次,對(duì)于變化url的SPA的web app可在每次url變化時(shí)進(jìn)行調(diào)用,目前Android微信客戶(hù)端不支持pushState的H5新特性,所以使用pushState來(lái)實(shí)現(xiàn)web app的頁(yè)面會(huì)導(dǎo)致簽名失敗,此問(wèn)題會(huì)在Android6.2中修復(fù))
在實(shí)際測(cè)試和大量真實(shí)數(shù)據(jù)收集后發(fā)現(xiàn),Android4.4+都是支持pushState的。也就是說(shuō),沒(méi)有遇到官方文檔所述的問(wèn)題。(此番調(diào)研后才決定采用history模式進(jìn)行實(shí)施的,導(dǎo)致IOS下踩了坑)
IOS下遇到了問(wèn)題:
# 打開(kāi)頁(yè)面時(shí)分享沒(méi)有問(wèn)題,路由一次之后再分享簽名錯(cuò)誤(invalid signature)
這個(gè)問(wèn)題是由于IOS微信瀏覽器下,有著下面的“特性”:
把第一次打開(kāi)的頁(yè)面叫做進(jìn)入頁(yè);把前端路由若干次跳轉(zhuǎn)(通過(guò)pushState/replaceState改變url)之后,當(dāng)前打開(kāi)的頁(yè)面叫做當(dāng)前頁(yè)。
微信驗(yàn)簽使用的url(當(dāng)前網(wǎng)頁(yè)的URL,不包含#及其后面部分),在Android下取的是當(dāng)前頁(yè)url,在IOS下取的是進(jìn)入頁(yè)的url(支付目錄也是一樣)
知道了這個(gè),可以采取下面的辦法來(lái)解決:
使用vuex保存進(jìn)入頁(yè)的URL,每次wx.config需要的參數(shù),都使用進(jìn)入頁(yè)的URL來(lái)進(jìn)行簽名
至此,微信分享簽名錯(cuò)誤的問(wèn)題解決了,但分享還是不正常:# 自定義分享不生效
度娘谷歌了一番,大概有下面幾種辦法
- 使用hash模式
- 做成多頁(yè)應(yīng)用,每個(gè)頁(yè)面都是進(jìn)入頁(yè)
- 所有需要自定義分享的頁(yè)面使用<a>替換<router-link>,跟2類(lèi)似,使所有自定義分享頁(yè)面變成進(jìn)入頁(yè)
對(duì)于我們的業(yè)務(wù)場(chǎng)景來(lái)說(shuō),hash模式不能保證歷史鏈接的可用性,多頁(yè)/<a>跳轉(zhuǎn)都是以犧牲一定體驗(yàn)性為代價(jià)。
經(jīng)過(guò)多番嘗試,最后發(fā)現(xiàn)用下面的方法勉強(qiáng)解決了問(wèn)題:
// 進(jìn)入頁(yè)面,控制自定義分享前,把當(dāng)前頁(yè)URL替換成進(jìn)入頁(yè)的URL(保證自定義分享正常) this.setCurrentPage(location.href) window.history.replaceState({}, document.title, this.landingPage) wx.config() wx.ready() //... // 離開(kāi)當(dāng)前頁(yè)時(shí),還原當(dāng)前頁(yè)的URL(保證返回正常) beforeRouteLeave(to, from, next) { window.history.replaceState({}, '', this.currentPage) next() }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Vue-router 中hash模式和history模式的區(qū)別
- vue-router中的hash和history兩種模式的區(qū)別
- vue vue-Router默認(rèn)hash模式修改為history需要做的修改詳解
- vue-router啟用history模式下的開(kāi)發(fā)及非根目錄部署方法
- vue-router的HTML5 History 模式設(shè)置
- 淺談vue項(xiàng)目4rs vue-router上線(xiàn)后history模式遇到的坑
- 一文了解vue-router之hash模式和history模式
- Vue-router中hash模式與history模式的區(qū)別詳解
- 區(qū)分vue-router的hash和history模式
- vue-router history模式服務(wù)器端配置過(guò)程記錄
相關(guān)文章
Vue全局?jǐn)r截所有請(qǐng)求并在請(qǐng)求頭中添加token方式
這篇文章主要介紹了Vue全局?jǐn)r截所有請(qǐng)求并在請(qǐng)求頭中添加token方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08uniapp?vue3中使用webview在微信小程序?qū)崿F(xiàn)雙向通訊功能
微信小程序的存在許多功能上的限制和約束,有些情況不得不去使用webview進(jìn)行開(kāi)發(fā)實(shí)現(xiàn)需求,這篇文章主要給大家介紹了關(guān)于uniapp?vue3中使用webview在微信小程序?qū)崿F(xiàn)雙向通訊功能的相關(guān)資料,需要的朋友可以參考下2024-07-07Vue中安裝element-ui失敗問(wèn)題原因及解決
Vue中安裝element-ui失敗問(wèn)題原因及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01vue實(shí)現(xiàn)在線(xiàn)預(yù)覽pdf文件和下載(pdf.js)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)在線(xiàn)預(yù)覽pdf文件和下載,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-11-11vue設(shè)計(jì)與實(shí)現(xiàn)合理的觸發(fā)響應(yīng)
這篇文章主要為大家介紹了vue設(shè)計(jì)與實(shí)現(xiàn)合理的觸發(fā)響應(yīng)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08Vue實(shí)現(xiàn)刷新當(dāng)前頁(yè)面的三種方式總結(jié)
項(xiàng)目當(dāng)中如果做新增/修改/刪除等等操作通常情況下都需要刷新數(shù)據(jù)或者刷新當(dāng)前頁(yè)面。本文為大家整理了三種不同的實(shí)現(xiàn)方法,需要的可以參考一下2023-01-01vue.js通過(guò)自定義指令實(shí)現(xiàn)數(shù)據(jù)拉取更新的實(shí)現(xiàn)方法
數(shù)據(jù)拉取更新這個(gè)功能相信大家基本都見(jiàn)過(guò),但是如果要做起來(lái)卻不止如何做起,所以這篇文章給大家分享了vue.js通過(guò)自定義指令實(shí)現(xiàn)的方法,閱讀本文需要對(duì)vue有一定理解,有需要的朋友們下面來(lái)一起看看吧。2016-10-10