移動H5頁面微信支付踩坑之旅(微信支付、單頁面路由模擬、按鈕加鎖、輪詢等常見功能)


開發背景:

  .net混合開發的vue模板語法的單頁面應用,所以不存在腳手架以及沒有路由可以跳轉。

項目描述:

  需要寫兩個頁面,在訂單詳情頁需要點擊“請輸入手機號”進入手機號綁定頁面,手機號綁定成功后自動跳轉到訂單詳情頁,如果該手機號已經綁定成功,則不顯示“請輸入手機號”(即不可點擊進入下一個頁面),只顯示該手機號。

項目思路:

  在單頁面中使用v-show控制兩個頁面的切換,所以需要模擬真實兩個頁面的跳轉,即改變hash值並且監聽歷史條目變化。

一、監聽並且覆蓋微信的回退事件

 當兩個頁面在同一路由下,從“手機號綁定”頁面點擊微信的返回時不會進入“確認訂單”頁面,會直接返回,所以通過在url尾部添加可以識別的hash值並且使用方法進行監聽,以此判斷回到哪個頁面。

知識點儲備:

關於window.onpopstate事件其實是popstate事件在 window對象上的事件處理程序。每當處於激活狀態的歷史記錄條目發生變化時,popstate事件就會在對應window對象上觸發.
因為給url加上了hash值雖然不會重新發出http請求但是會改變瀏覽器的訪問歷史。所以即使進入了“手機號綁定”頁面,popstate也能監聽到。



免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM