Компонент обратного отсчета апплета WeChat

Апплет WeChat

Примечание. Содержание этой статьи устарело, пожалуйста, переместите[Рефакторинг] Компонент обратного отсчета апплета WeChatПрочтите эту новую статью.
Примечание. Содержание этой статьи устарело, пожалуйста, переместите[Рефакторинг] Компонент обратного отсчета апплета WeChatПрочтите эту новую статью.
Примечание. Содержание этой статьи устарело, пожалуйста, переместите[Рефакторинг] Компонент обратного отсчета апплета WeChatПрочтите эту новую статью.

Когда я недавно писал страницу активности, начальник сказал мне: «Сяо Го, напиши компонент обратного отсчета!» Будучи стажером, я сразу же добавил это задание в ToDo, а потом серьезно над этим задумался. В то время моя идея заключалась в том, чтобы отправить целевое время из серверной части, а затем из внешнего интерфейса, чтобы вычислить разницу во времени между текущим временем и целевым временем. Но старший брат сказал: «Ты не можешь этого сделать».

Так почему бы не? Мой старший брат сказал мне: «Потому что пользователь может изменить время мобильного телефона, чтобы напрямую добраться до времени обратного отсчета. Следовательно, серверная часть должна напрямую возвращать разницу во времени между текущим временем и целевым временем».

Затем я изменил системное время, попробовал и обнаружил, что это правда! В этом случае мы должны напрямую использовать разницу во времени, предоставленную серверной частью. После определения входящих свойств подумаем о конкретной реализации компонента.

Определить входящие свойства

Для всего компонента обратного отсчета требуется только одно входящее свойство — разница во времени. следующим образом:

  properties: {
    initDuration: {
      type: Number,
      value: 0,
      observer: function (newVal, oldVal) {
        // ToDo 初始化倒计时
      }
    }
  }

обработка времени

Весь процесс делится на три функции, которые заключаются в следующем:

  methods: {
    /**
     * 计算倒计时
     * @param {Number} duration [秒数时间差，必填]
     * @return {String} [倒计时字符串]
     */
    _countDown: function (duration) {
      if (duration <= 0) {
        this.setData({
          flag: true
        })
        return undefined
      }
      
      // 计算出传入秒数是几小时几分钟几秒
      var seconds = this._format(duration % 60)
      var minutes = Math.floor(duration / 60)
      var hours = this._format(Math.floor(duration / 3600))
      if (minutes >= 60) {
        minutes = minutes % 60
      }
      minutes = this._format(minutes)
      
      var result = `${hours}:${minutes}:${seconds}`
      return result
    },
    
    /**
     * 格式化小于10的时间
     * @param {Number} time [必填]
     * @return {String} [返回时间字符串]
     */
    _format: function (time) {
      if (time >= 10) {
        return time
      } else {
        return `0${time}`
      }
    },
    
    /**
     * 执行倒计时
     * @param {Number} initDuration [传入时间，必填]
     */
    _runCountDown: function (initDuration) {
      // 首次展示倒计时
      var countDownTime = this._countDown(initDuration)

      // 每1s执行一次的倒计时计算
      var timer = setInterval(() => {
        // flag为true也就是传入_countDown的值小于等于零时
        if (this.data.flag === true) {
          clearInterval(timer)
          return undefined
        }
        var duration = this.data.duration - 1
        var countDownTime = this._countDown(duration)
        this.setData({ duration, countDownTime })
      }, 1000)

      this.setData({ countDownTime, timer })
    },
  }

Инициализировать обратный отсчет

Если вы передаете новую inition на компонент, будет вызываться обратный вызов наследства свойств. Поэтому нам нужна функция для обработки выполнения инициализации отсчета.

  _initCountDown: function (newVal) {
    if (this.data.timer > 0) {
      clearInterval(this.data.timer)
    }
    this.setData({
      flag: false,
      duration: this.data.initDuration
    })
    this._runCountDown(newVal)
  }

В то же время он вызывается в callback-функции наблюдателя свойства initDuration:

  observer: function (newVal) {
    this._initCountDown(newVal)
  }

Это в основном завершает компонент обратного отсчета в апплете WeChat. Установите в "Page".json при использовании

  {
    "usingComponents": {
      "count-down": "../components/count-down"
    }
  }

Затем используйте его непосредственно на странице и передайте начальное значение.

конец

Это первое компонентное задание первой стажировки, и оно задокументировано здесь. Если письмо плохое или логика сбивает с толку, пожалуйста, читатели укажите в комментариях. Я не боюсь, что вы будете ругать меня, но я боюсь, что вы меня проигнорируете. Спасибо.

Категории