ホームページ > WeChat アプレット > ミニプログラム開発 > AndroidのWeChatアプレット決済カウントダウン機能

AndroidのWeChatアプレット決済カウントダウン機能

高洛峰
リリース: 2017-01-10 09:54:47
オリジナル
1954 人が閲覧しました

効果を見てください

AndroidのWeChatアプレット決済カウントダウン機能

私はウェブの経験が浅かったので - - 最初はイベントを見つけるというアイデアでしたが、API を長い間眺めた後、基本的には物理によってトリガーされるクリックとタッチでした - -

私は実際にライフサイクルを無視しました、ライフサイクル+スレッドは完全にOKではありません〜

スレッドはまだ王様であり、最初からこのようにする必要があることがわかりました〜

Du Niangもたくさん見ましたこれは js で書かれていますが、私がやったばかりかもしれません。クソ、私は js と WeChat アプレットに十分習熟していません

Thoughts:

onLoad:function(options) はカウントダウン メソッド function

を呼び出します。データの動的現実の場合

1. 日付をミリ秒に変換します

~ 1. ミリ秒を固定形式に変換します


xml:

<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: &#39;/image/icon_orderstatus_countdown.png&#39;,
  "productName": "",
  "productPrice": "",
  "payDetail": [],
  "wxPayMoneyDesc": "",
  "expireTime": "",
  clock: &#39;&#39;
 },
 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
 }
})
ログイン後にコピー

ヒント:

場合数字は0で埋められません

、次のように表示されます

上記は編集者が紹介したAndroid WeChatアプレットの支払いカウントダウン機能ですので、お持ちの方はぜひご活用ください。ご質問がございましたら、メッセージを残してください。編集者が時間内に返信させていただきます。また、PHP 中国語 Web サイトをサポートしていただきありがとうございます。

Android の WeChat アプレットの支払いカウントダウン機能に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート