Android의 WeChat 애플릿 결제 카운트다운 기능

효과를 보세요

저의 웹 경험이 약해서 - - 처음에는 이벤트를 찾아볼까 생각했는데 API를 한참 보다보니 , 기본적으로 물리에 의한 클릭 및 터치였습니다. - -

실제로 수명주기를 무시했습니다. 라이프 사이클 + 스레드는 완전히 괜찮습니다~

스레드가 여전히 왕이라는 것이 밝혀졌습니다. 이건 처음부터 해야지~

Du Niang도 js로 많이 쓴다고 읽었는데, 아마 제가 며칠 전에 해본 거라 js와 s에 능숙하지 않아서일지도 모르겠습니다. WeChat 미니 프로그램

내용:

onLoad:function(options)이 카운트다운 메소드 함수를 호출합니다

동적 데이터 구현을 위한 스레드 정의

1. 날짜를 밀리초로 변환

2. 스레드 동적 표시 정의

3. 계산 타이밍 렌더링

1. 고정된 형식으로 전환

2. 자릿수가 부족하면 0을 추가하세요

코드를 보세요

wxml:

<view class="pay_time">
 <image src="{{imgUrls_pay_time}}"></image>
 <text>支付剩余时间：</text>
 <text>{{clock}} </text>
</view>

wxjs:

// pages/order/take_order/pay/pay.js
var app = getApp()
Page({
 data: {
  imgUrls_pay_time: '/image/icon_orderstatus_countdown.png',
  "productName": "",
  "productPrice": "",
  "payDetail": [],
  "wxPayMoneyDesc": "",
  "expireTime": "",
  clock: ''
 },
 onLoad: function (options) {
  // 页面初始化 options为页面跳转所带来的参数
  new app.WeToast()
  var that = this;
  that.count_down();
 },
 onReady: function () {
  // 页面渲染完成
 },
 onShow: function () {
  // 页面显示
 },
 onHide: function () {
  // 页面隐藏
 },
 onUnload: function () {
  // 页面关闭
 },
 /* 毫秒级倒计时 */
 count_down: function () {
  var that = this
  //2016-12-27 12:47:08 转换日期格式
  var a = that.data.expireTime.split(/[^0-9]/);
  //截止日期：日期转毫秒
  var expireMs = new Date(a[0], a[1] - 1, a[2], a[3], a[4], a[5]);
  //倒计时毫秒
  var duringMs = expireMs.getTime() - (new Date()).getTime();
  // 渲染倒计时时钟
  that.setData({
   clock: that.date_format(duringMs)
  });
  if (duringMs <= 0) {
   that.setData({
    clock: "支付已截止，请重新下单"
   });
   // timeout则跳出递归
   return;
  }
  setTimeout(function () {
   // 放在最后--
   duringMs -= 10;
   that.count_down();
  }
   , 10)
 },
  /* 格式化倒计时 */
 date_format: function (micro_second) {
  var that = this
  // 秒数
  var second = Math.floor(micro_second / 1000);
  // 小时位
  var hr = Math.floor(second / 3600);
  // 分钟位
  var min = that.fill_zero_prefix(Math.floor((second - hr * 3600) / 60));
  // 秒位
  var sec = fill_zero_prefix(second % 60);// equal to => var sec = second % 60;
  return hr + ":" + min + ":" + sec + " ";
 },
 /* 分秒位数补0 */
 fill_zero_prefix: function (num) {
  return num < 10 ? "0" + num : num
 }
})

tip:

숫자가 0으로 채워지지 않은 경우

다음과 같이 표시됩니다.

위는 에디터가 소개한 안드로이드 위챗 애플릿의 결제 카운트다운 기능입니다. 질문이 있으시면 메시지를 남겨주시면 편집자가 시간 내에 답변해 드리겠습니다. 또한 PHP 중국어 웹사이트를 지원해 주신 모든 분들께 감사드립니다!

안드로이드 위챗 애플릿의 결제 카운트다운 기능에 대한 더 많은 글은 PHP 중국어 홈페이지를 참고해주세요!