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