WeChat에 내장된 H5 웹페이지를 사용하여 JS 카운트다운 실패 문제를 해결하는 방법

최근 프로젝트 개발을 언급하면서 회사의 WeChat 공식 계정에 H5 몰 페이지를 삽입해야 하는 상황에 직면했습니다. 개발 중에 js 카운트다운 실패 문제가 발생했습니다. 위챗에 h5를 넣어서 해결한 문제에 대해 이야기해보겠습니다. 필요한 친구들은 참고하면 됩니다

프로젝트 요구 사항: H5 몰 페이지를 회사 위챗 공식 계정에 중첩시키세요

프로젝트 자체의 개발에는 아무런 관련이 없습니다. 모바일 웹페이지 차이점이 너무 많은데 어제 문제가 발생했습니다. 말하기 어렵지만 간단합니다.

사용자가 주문한 후 결제 수단 선택 페이지에 카운트다운 로직이 있습니다(주문이 접수된 시점부터 계산되며, 24시간 후에도 주문이 결제되지 않으면 ws가 자동으로 주문을 취소합니다). 코드는 다음과 같습니다.

<script type="text/javascript"><br> var timespan = &#39;20160113&#39;; //后台程序生成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=&#39;time&#39;></i>" + word);
    timer = setTimeout("UpdateTime()", 1000);
   }
   else {
    $(&#39;.content&#39;).find(&#39;.w_op&#39;).hide();
    clearTimeout(timer);
    jQuery(".tc").html("<i class=&#39;time&#39;></i>" + "订单过期，已自动取消~");
    window.location.href=&#39;@Url.Action("orderDetail", "Order", new { OrderNumber = Model.No })&#39;;; //订单过期，跳转到订单详情页
   }
  }
  jQuery(document).ready(function () {
   UpdateTime();
  });<br></script>

　페이지 효과는 다음과 같습니다.

　 이렇게 작성하면 원래 문제도 없고 로컬 테스트도 괜찮습니다.

　그러나 외부에 놓으면 문제가 발생합니다. 안드로이드 버전의 위챗에서는 휴대폰이 화면을 잠그면 카운트다운이 실행되지 않습니다. 즉, 화면이 꺼지는 동안에는 시간이 멈춘 것입니다. ..

　 나중에는 물론 나중에 불안해지면 안 돼요. Fang은 모두에게 도움을 요청하고 방법을 찾았기 때문에 다음과 같이 생각해 냈습니다.

페이지에 들어갈 때 카운트다운 구현. 처음에는 서버에 남은 카운트다운 시간을 요청한 다음 페이지에서 js 및 기타 수단을 통해 다시 카운트다운합니다. 화면을 잠근 후 전화기가 잠금 해제됩니다. 카운트다운은 계속 진행 중이지만 카운트다운 시간이 정확하지 않습니다. 그 이유는 잠금 해제 후 다시 카운트다운하기 위해 서버 시간을 요청하지 않지만 여전히 화면이 잠긴 시간을 기준으로 카운트다운되기 때문입니다. 이는 브라우저에 페이지를 새로 고치지 않고 캐시가 있기 때문입니다. 처음으로 요청된 콘텐츠를 캐시합니다. 서버가 업데이트된 후에도 브라우저는 처음으로 콘텐츠를 표시합니다

나중에 여러 번 확인한 후 메타에서 설정하고 매번 페이지 nocache를 설정할 수 있습니다. 페이지를 방문하면 캐시에서 페이지를 읽는 대신 서버에서 해당 페이지를 다시 가져와야 합니다. 만료 시간이 만료되면 서버가 http-equiv 속성에 나타나도록 요청해야 합니다. 페이지 캐시의 만료 시간

expries=0, 캐시가 만료되기까지의 시간(분). 만료되기 전에 사용자가 페이지를 다시 방문하면 캐시된 버전 페이지가 표시됩니다

<meta http-equiv="pragma" content="no-cache"> 
<meta http-equiv="cache-control" content="no-cache"> 
<meta http-equiv="expires" content="0">

위 내용은 모두의 학습에 도움이 되기를 바랍니다. , PHP 중국어 웹사이트를 주목해주세요!

관련 권장 사항:

HTML5 사용 방법 파일 인터페이스는 웹 페이지에서 파일을 다운로드하는 데 사용됩니다

HTML5에서 postMessage API의 기본 사용

HTML5의 새로운 8가지 INPUT 입력 유형

위 내용은 WeChat에 내장된 H5 웹페이지를 사용하여 JS 카운트다운 실패 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!