使用微信內(nèi)嵌H5網(wǎng)頁解決JS倒計時失效問題
項目要求：將H5商城頁面嵌套到公司微信公眾號里
項目本身的開發(fā)跟移動端網(wǎng)頁并無太多差異，只是這昨天遇到一個問題，說是棘手，到也簡單。
用戶下單后，在選擇支付方式頁面，有個倒計時的邏輯（從下單時開始計算，24小時后未支付，會有ws自動取消這個訂單），js代碼如下：
<script type="text/javascript"><br> var timespan = '20160113'; //后臺程序生成24小時時間差值，這里隨便寫寫
var timer;
function UpdateTime() {
if (timespan > 0) {
var hour = Math.floor(timespan / (60 * 60));
var minute = Math.floor((timespan - (hour * 60 * 60)) / 60);
var second = (timespan - (hour * 60 * 60) - (minute * 60));
var word = "支付剩余時間" + (hour<10?("0"+hour):hour) + "：" + (minute<10?("0"+minute):minute) + "：" + (second<10?("0"+second):second) + "，逾期訂單將自動取消~";
timespan--;
jQuery(".tc").html("<i class='time'></i>" + word);
timer = setTimeout("UpdateTime()", 1000);
}
else {
$('.content').find('.w_op').hide();
clearTimeout(timer);
jQuery(".tc").html("<i class='time'></i>" + "訂單過期，已自動取消~");
window.location.href='@Url.Action("orderDetail", "Order", new { OrderNumber = Model.No })';; //訂單過期，跳轉(zhuǎn)到訂單詳情頁
}
}
jQuery(document).ready(function () {
UpdateTime();
});<br></script>
頁面效果如下：
這樣寫，本來沒有任何問題的，而且本地測試都o(jì)k。
可是，放到外側(cè)的時候，問題就來了。安卓版微信，會出現(xiàn)當(dāng)手機(jī)鎖屏?xí)r，出現(xiàn)倒計時沒有走，仍然是關(guān)閉屏幕前時間，也就是說息屏這段時間，時間靜止了...
后來，后來當(dāng)然不能著急啊，各方求救，尋找方法，于是有了下面：
倒計時的實現(xiàn)，在第一次進(jìn)入頁面時，請求服務(wù)器獲取倒計時的剩余時間，然后在頁面通過js等手段再倒計時；手機(jī)在鎖屏后再解鎖后倒計時還在進(jìn)行但是倒計時的時間不準(zhǔn)確，究其原因是在解鎖后沒有去請求服務(wù)器的時間來重新倒計時而是還是按照上次鎖屏的基礎(chǔ)上進(jìn)行倒計時的，這是因為瀏覽器有緩存，在不刷新頁面的情況下，瀏覽器會緩存第一次請求的內(nèi)容，服務(wù)端更新后瀏覽器仍然顯示第一次的內(nèi)容
后來多方查證，可以在meta里進(jìn)行設(shè)置，設(shè)置頁面nocache，每次訪問次頁面，均需要從服務(wù)器重新獲取，而不是使用緩存中讀取
expires設(shè)定過期時間，一旦過期就必須請求服務(wù)器，
expries出現(xiàn)在http-equiv屬性中，使用content屬性表示頁面緩存的過期時間
expries=0，緩存過期前的分鐘數(shù)。若用戶在頁面過期前返回該頁面，就會顯示緩存的版本頁
<meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0">
以上所述是小編給大家介紹的使用微信內(nèi)嵌H5網(wǎng)頁解決JS倒計時失效問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
組件是一個單獨(dú)且可復(fù)用的功能模塊的封裝,每個組件，包括如下幾個部分：以組件名稱為標(biāo)記的開始標(biāo)簽和結(jié)束標(biāo)簽、組件內(nèi)容、組件屬性、組件屬性值,這篇文章主要給大家介紹了關(guān)于uniapp封裝小程序雷達(dá)圖組件的相關(guān)資料,需要的朋友可以參考下2021-07-07
今天小編就為大家分享一篇基于Layui自定義模塊的使用方法詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了JS運(yùn)動框架之分享側(cè)邊欄動畫,實例分析了javascript操作div及css的技巧,需要的朋友可以參考下2015-03-03
uniapp中使用render.js進(jìn)行openlayers、arcgis等地圖操作實戰(zhàn)指南
renderjs是一個運(yùn)行在視圖層的js,它比WXS更加強(qiáng)大,它只支持app-vue和h5,下面這篇文章主要給大家介紹了關(guān)于uniapp中使用render.js進(jìn)行openlayers、arcgis等地圖操作的相關(guān)資料,需要的朋友可以參考下2024-01-01
ES6學(xué)習(xí)筆記之正則表達(dá)式和字符串正則方法分析
這篇文章主要介紹了ES6學(xué)習(xí)筆記之正則表達(dá)式和字符串正則方法,結(jié)合實例形式對比分析了ES5與ES6正則操作的常用函數(shù)功能與用法區(qū)別,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了JS函數(shù)進(jìn)階之繼承用法,結(jié)合實例形式分析了JavaScript函數(shù)繼承相關(guān)定義與使用操作技巧,需要的朋友可以參考下2020-01-01
按指定格式顯示日期時間在開發(fā)與時間相關(guān)的應(yīng)用時非常有用，接下來與大家分享下格式化顯示日期時間的方法，感興趣的朋友可以參考下哈2013-04-04
最近做個項目，需要實現(xiàn)移動端左滑刪除功能，當(dāng)時js代碼將網(wǎng)上找的進(jìn)行刪減優(yōu)化，下面通過本文給大家分享基于JS實現(xiàn)移動端左滑刪除功能，感興趣的朋友一起看看2017-07-07
今天無事逛網(wǎng)，突然發(fā)現(xiàn)了一個很有趣的事情，（也許只有我覺得有趣）.我看到一圖片竟然在我拖動滾動條的時候沒有動，也許你會說我少見多怪，不信你去找個這樣的我看看，很少有的，一般的都是一拖動圖片就在那跳得厲害。2010-01-01
微信小程序中做用戶登錄與登錄態(tài)維護(hù)的實現(xiàn)詳解
微信小程序的運(yùn)行環(huán)境不是在瀏覽器下運(yùn)行的。所以不能以cookie來維護(hù)登錄態(tài)。下面這篇文章主要給大家介紹了微信小程序中如何做用戶登錄與登錄態(tài)維護(hù)的相關(guān)資料，文中介紹的非常詳細(xì)，需要的朋友可以參考學(xué)習(xí)。2017-05-05