小編給大家分享一下怎么利用微信內(nèi)嵌H5網(wǎng)頁解決JS倒計(jì)時(shí)失效的問題,希望大家閱讀完這篇文章后大所收獲,下面讓我們一起去探討吧!
創(chuàng)新互聯(lián)建站總部坐落于成都市區(qū),致力網(wǎng)站建設(shè)服務(wù)有成都網(wǎng)站制作、成都做網(wǎng)站、網(wǎng)絡(luò)營銷策劃、網(wǎng)頁設(shè)計(jì)、網(wǎng)站維護(hù)、公眾號搭建、微信小程序開發(fā)、軟件開發(fā)等為企業(yè)提供一整套的信息化建設(shè)解決方案。創(chuàng)造真正意義上的網(wǎng)站建設(shè),為互聯(lián)網(wǎng)品牌在互動行銷領(lǐng)域創(chuàng)造價(jià)值而不懈努力!
項(xiàng)目要求:將H5商城頁面嵌套到公司微信公眾號里
項(xiàng)目本身的開發(fā)跟移動端網(wǎng)頁并無太多差異,只是這昨天遇到一個(gè)問題,說是棘手,到也簡單。
用戶下單后,在選擇支付方式頁面,有個(gè)倒計(jì)時(shí)的邏輯(從下單時(shí)開始計(jì)算,24小時(shí)后未支付,會有ws自動取消這個(gè)訂單),js代碼如下:
頁面效果如下:
這樣寫,本來沒有任何問題的,而且本地測試都o(jì)k。
可是,放到外側(cè)的時(shí)候,問題就來了。安卓版微信,會出現(xiàn)當(dāng)手機(jī)鎖屏?xí)r,出現(xiàn)倒計(jì)時(shí)沒有走,仍然是關(guān)閉屏幕前時(shí)間,也就是說息屏這段時(shí)間,時(shí)間靜止了...
后來,后來當(dāng)然不能著急啊,各方求救,尋找方法,于是有了下面:
倒計(jì)時(shí)的實(shí)現(xiàn),在第一次進(jìn)入頁面時(shí),請求服務(wù)器獲取倒計(jì)時(shí)的剩余時(shí)間,然后在頁面通過js等手段再倒計(jì)時(shí);手機(jī)在鎖屏后再解鎖后倒計(jì)時(shí)還在進(jìn)行但是倒計(jì)時(shí)的時(shí)間不準(zhǔn)確,究其原因是在解鎖后沒有去請求服務(wù)器的時(shí)間來重新倒計(jì)時(shí)而是還是按照上次鎖屏的基礎(chǔ)上進(jìn)行倒計(jì)時(shí)的,這是因?yàn)闉g覽器有緩存,在不刷新頁面的情況下,瀏覽器會緩存第一次請求的內(nèi)容,服務(wù)端更新后瀏覽器仍然顯示第一次的內(nèi)容
后來多方查證,可以在meta里進(jìn)行設(shè)置,設(shè)置頁面nocache,每次訪問次頁面,均需要從服務(wù)器重新獲取,而不是使用緩存中讀取
expires設(shè)定過期時(shí)間,一旦過期就必須請求服務(wù)器,
expries出現(xiàn)在http-equiv屬性中,使用content屬性表示頁面緩存的過期時(shí)間
expries=0,緩存過期前的分鐘數(shù)。若用戶在頁面過期前返回該頁面,就會顯示緩存的版本頁
看完了這篇文章,相信你對怎么利用微信內(nèi)嵌H5網(wǎng)頁解決JS倒計(jì)時(shí)失效的問題有了一定的了解,想了解更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!