欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue-router history模式下的微信分享小結(jié)

 更新時間:2018年07月05日 15:53:14   作者:曼城藍月亮  
本篇文章主要介紹了vue-router history模式下的微信分享小結(jié),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

背景

舊項目改造,進行前后端分離。做成了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í)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue全局?jǐn)r截所有請求并在請求頭中添加token方式

    Vue全局?jǐn)r截所有請求并在請求頭中添加token方式

    這篇文章主要介紹了Vue全局?jǐn)r截所有請求并在請求頭中添加token方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-08-08
  • uniapp?vue3中使用webview在微信小程序?qū)崿F(xiàn)雙向通訊功能

    uniapp?vue3中使用webview在微信小程序?qū)崿F(xiàn)雙向通訊功能

    微信小程序的存在許多功能上的限制和約束,有些情況不得不去使用webview進行開發(fā)實現(xiàn)需求,這篇文章主要給大家介紹了關(guān)于uniapp?vue3中使用webview在微信小程序?qū)崿F(xiàn)雙向通訊功能的相關(guān)資料,需要的朋友可以參考下
    2024-07-07
  • Vue中安裝element-ui失敗問題原因及解決

    Vue中安裝element-ui失敗問題原因及解決

    Vue中安裝element-ui失敗問題原因及解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • vue實現(xiàn)在線預(yù)覽pdf文件和下載(pdf.js)

    vue實現(xiàn)在線預(yù)覽pdf文件和下載(pdf.js)

    這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)在線預(yù)覽pdf文件和下載,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-11-11
  • .vue文件 加scoped 樣式不起作用的解決方法

    .vue文件 加scoped 樣式不起作用的解決方法

    本篇文章主要介紹了.vue文件 加scoped 樣式不起作用的解決方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-05-05
  • vue設(shè)計與實現(xiàn)合理的觸發(fā)響應(yīng)

    vue設(shè)計與實現(xiàn)合理的觸發(fā)響應(yīng)

    這篇文章主要為大家介紹了vue設(shè)計與實現(xiàn)合理的觸發(fā)響應(yīng)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-08-08
  • vue移動端下拉刷新和上滑加載

    vue移動端下拉刷新和上滑加載

    這篇文章主要為大家詳細(xì)介紹了vue移動端下拉刷新和上滑加載,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-10-10
  • openlayers6之地圖覆蓋物overlay詳解

    openlayers6之地圖覆蓋物overlay詳解

    overlay就是在地圖上以另外一種形式浮現(xiàn)在地圖上,常見的地圖覆蓋物為這三種類型,如:popup 彈窗、label標(biāo)注信息、text文本信息等,接下來跟隨小編看下openlayers6之地圖覆蓋物overlay詳解,一起看看吧
    2021-09-09
  • Vue實現(xiàn)刷新當(dāng)前頁面的三種方式總結(jié)

    Vue實現(xiàn)刷新當(dāng)前頁面的三種方式總結(jié)

    項目當(dāng)中如果做新增/修改/刪除等等操作通常情況下都需要刷新數(shù)據(jù)或者刷新當(dāng)前頁面。本文為大家整理了三種不同的實現(xiàn)方法,需要的可以參考一下
    2023-01-01
  • vue.js通過自定義指令實現(xiàn)數(shù)據(jù)拉取更新的實現(xiàn)方法

    vue.js通過自定義指令實現(xiàn)數(shù)據(jù)拉取更新的實現(xiàn)方法

    數(shù)據(jù)拉取更新這個功能相信大家基本都見過,但是如果要做起來卻不止如何做起,所以這篇文章給大家分享了vue.js通過自定義指令實現(xiàn)的方法,閱讀本文需要對vue有一定理解,有需要的朋友們下面來一起看看吧。
    2016-10-10

最新評論