微信內嵌H5網頁 解決js倒計時失效

2021-07-28 03:47:49 字數 1430 閱讀 4516

專案本身的開發跟移動端網頁並無太多差異,只是這昨天遇到乙個問題,說是棘手,到也簡單。

使用者下單後,在選擇支付方式頁面,有個倒計時的邏輯(從下單時開始計算,24小時後未支付,會有ws自動取消這個訂單),js**如下: 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

頁面效果如下:

這樣寫,本來沒有任何問題的,而且本地測試都ok。

後來,後來當然不能著急啊,各方求救,尋找方法,於是有了下面:

倒計時的實現,在第一次進入頁面時,請求伺服器獲取倒計時的剩餘時間,然後在頁面通過js等手段再倒計時;手機在鎖屏後再解鎖後倒計時還在進行但是倒計時的時間不準確,究其原因是在解鎖後沒有去請求伺服器的時間來重新倒計時而是還是按照上次鎖屏的基礎上進行倒計時的,這是因為瀏覽器有快取,在不重新整理頁面的情況下,瀏覽器會快取第一次請求的內容,服務端更新後瀏覽器仍然顯示第一次的內容

後來多方查證,可以在meta裡進行設定,設定頁面nocache,每次訪問次頁面,均需要從伺服器重新獲取,而不是使用快取中讀取

expires設定過期時間,一旦過期就必須請求伺服器,

expries出現在http-equiv屬性中,使用content屬性表示頁面快取的過期時間

expries=0,快取過期前的分鐘數。若使用者在頁面過期前返回該頁面,就會顯示快取的版本頁   

就這麼完美解決了 [勝利]

微信內嵌H5網頁 解決js倒計時失效

專案本身的開發跟移動端網頁並無太多差異,只是這昨天遇到乙個問題,說是棘手,到也簡單。使用者下單後,在選擇支付方式頁面,有個倒計時的邏輯 從下單時開始計算,24小時後未支付,會有ws自動取消這個訂單 js 如下 頁面效果如下 這樣寫,本來沒有任何問題的,而且本地測試都ok。後來,後來當然不能著急啊,各...

微信小程式內嵌網頁或H5頁面 zf

對小程式開發一點都不了解的小白鼠,經過昨天下午半天的研究,終於實現小程式內嵌h5頁面功能,下面把經驗和 分享給大家,請多多指教!其中https www.888.com就是所嵌入的h5頁面。下面進入正題 一 注意事項 1.1註冊小程式賬號必須為企業的。因為個人型別與海外型別的小程式暫不支援使用web ...

在微信H5網頁中獲取使用者基本資訊

注意事項 總結const redirecttoauthpage redirect uri response type code scope snsapi userinfo state wechat redirect window.location.href redirecturi state重定向後...