WeChatアプレットのカウントダウン機能の説明例

WeChat の開発は現在、ますます人気が高まっています。たとえば、ユーザーは確認コードを取得するためにカウントダウン機能を使用する必要があります。カウントダウン関数はプロジェクト開発でよく使用されます。今日は WeChat アプレットのカウントダウン関数の実装コードを紹介します。必要な方は参考にしていただければ幸いです。

コードを直接見てみましょう

//倒计时60秒
function countDown(that,count) {
 if (count == 0) {
 that.setData({
  timeCountDownTop: '获取验证码',
  counting:false
 })
 return;
 }
 that.setData({
 counting:true,
 timeCountDownTop: count + '秒后重新获取',
 })
 setTimeout(function(){
 count--;
 countDown(that, count);
 }, 1000);
}

カウントダウンが必要な場所で呼び出してください

Page({
 data:{
  counting:false
 },
 //生成验证码
 generateVerifyCode:function() {
  var that = this;
  if (!that.data.counting) {
   wx.showToast({
   title: '验证码已发送',
   })
   //开始倒计时60秒
   countDown(that, 60);
  } 
 },
})

以下は関数の実装の簡単な紹介です

まず、カウントダウンメソッドはPageの外に書かれています。ここを間違えてください

カウントダウンを実現する鍵となるのは、次のコードであるsetTimeoutメソッドです。 setTimeout メソッドは、指定した時間間隔で実行される関数を設定できます。適用される形式は setTimeout(function(), time) です。function は実行される対応するメソッド、time は時間間隔です。ここでの 1000 は 1000 ミリ秒を意味します。つまり、countDown メソッドは 1 秒ごとに実行されます。

setTimeout(function(){
 count--;
 countDown(that, count);
 }, 1000);

• count フィールドは、countDown メソッドでカウントダウン時間を設定するために使用されます。たとえば、ここでは 60 秒です

• countDown メソッドは、カウントダウン時に setData メソッドを使用してページを更新するためにそれを渡します。ステータスの変更

• countDown メソッドは、カウントダウンが繰り返し開始されることを避けるために、カウント フィールドを使用してすでにカウントダウンしているかどうかを判断し、return を通じて直接終了します。

  携帯登録時に認証コードをカウントダウン送信する機能

JavaScriptのカウントダウンタイマー実装方法

vueベースのカウントダウンデモを作成する

以上がWeChatアプレットのカウントダウン機能の説明例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。