WeChat-Applet-Zahlungscountdown-Funktion in Android

Sehen Sie sich den Effekt an

Aufgrund meiner schwachen Web-Erfahrung - - Zuerst war meine Idee, Ereignisse zu finden, aber nachdem ich mich lange mit der API beschäftigt hatte , es war im Grunde ein Klicken und Berühren, ausgelöst durch die Physik. - -

Ich habe den Lebenszyklus + Threads völlig in Ordnung ~

Es stellt sich heraus, dass Threads immer noch König sind. Dies sollte von Anfang an erfolgen ~

Du Niang hat auch gelesen, dass viele davon in js geschrieben sind, aber vielleicht habe ich es erst vor ein paar Tagen gemacht und bin nicht kompetent genug in js und WeChat-Miniprogramme

Dinge:

onLoad:function(options) ruft die Countdown-Methodenfunktion auf

Thread für dynamische Datenrealisierung definieren

1. Konvertieren Sie das Datum in Millisekunden

2. Definieren Sie die dynamische Anzeige des Threads

3. Rendern des Zählzeitpunkts

1. In ein festes Format umwandeln

2. Behandlung halbe Sekunde Wenn nicht genügend Ziffern vorhanden sind, fügen Sie 0 hinzu

Sehen Sie sich den Code an

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
 }
})

Tipp:

Wenn die Ziffern werden nicht mit 0 aufgefüllt

es wird wie folgt angezeigt

Das Obige ist die vom Herausgeber eingeführte Zahlungscountdown-Funktion des WeChat-Applets in Android . Ich hoffe, es hilft Ihnen, wenn Sie Fragen haben, und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei Ihnen allen für Ihre Unterstützung der chinesischen PHP-Website bedanken!

Weitere Artikel zur Zahlungscountdown-Funktion des WeChat-Applets in Android finden Sie auf der chinesischen PHP-Website!