> 위챗 애플릿 > 미니 프로그램 개발 > Android의 WeChat 애플릿 결제 카운트다운 기능

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

高洛峰
풀어 주다: 2017-01-10 09:54:47
원래의
1955명이 탐색했습니다.

효과를 보세요

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: &#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
 }
})
로그인 후 복사

tip:

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

다음과 같이 표시됩니다.

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

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


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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿