微信小程序開發--倒計時60s獲取驗證碼

時間 2019-11-24

標籤微信程序開發倒計時 60s 獲取驗證碼简体版

原文原文鏈接

微信小程序開發--倒計時60s獲取驗證碼開發教程:小程序

一、工具類（引用微信小程序提供的工具類）微信小程序

countdown.js微信





 44.
 53.
 61.
 68.
 72.
 76.
 80.
 84.
 85.
 86.
 88.
 96.
 104.
 114.
 121.
 134.
 141.1.class Countdown {
 2.constructor(options = {}) {
 3.Object.assign(this, {
 4.options, 
 5.})
 6.this.__init()
 7.}
 8./**
 9.* 初始化
 10.*/
 11.__init() {
 12.this.page = getCurrentPages()[getCurrentPages().length - 1]
 13.this.setData = this.page.setData.bind(this.page)
 14.this.restart(this.options)
 15.} 16./**
 17.* 默認參數
 18.*/
 19.setDefaults() {
 20.return {
 21.date: `June 7, 2087 15:03:25`, 
 22.refresh: 1000, 
 23.offset: 0, 
 24.onEnd() {}, 
 25.render(date) {}, 
 26.}
 27.} 28./**
 29.* 合併參數
 30.*/
 31.mergeOptions(options) {
 32.const defaultOptions = this.setDefaults() 33.for (let i in defaultOptions) {
 34.if (defaultOptions.hasOwnProperty(i)) {
 35.this.options[i] = typeof options[i] !== `undefined` ? options[i] : defaultOptions[i]
 36.if (i === `date` && typeof this.options.date !== `object`) {
 37.this.options.date = new Date(this.options.date)
 38.} 39.if (typeof this.options[i] === `function`) {
 40.this.options[i] = this.options[i].bind(this)
 41.}
 42.}
 43.}if (typeof this.options.date !== `object`) {
 45.this.options.date = new Date(this.options.date)
 46.}
 47.}
 48./**
 49.* 計算日期差
 50.*/
 51.getDiffDate() {
 52.let diff = (this.options.date.getTime() - Date.now() + this.options.offset) / 1000let dateData = {
 54.years: 0,
 55.days: 0,
 56.hours: 0,
 57.min: 0,
 58.sec: 0,
 59.millisec: 0,
 60.}if (diff <= 0) {
 62.if (this.interval) {
 63.this.stop()
 64.this.options.onEnd()
 65.}
 66.return dateData
 67.}if (diff >= (365.25 * 86400)) {
 69.dateData.years = Math.floor(diff / (365.25 * 86400))
 70.diff -= dateData.years * 365.25 * 86400
 71.}if (diff >= 86400) {
 73.dateData.days = Math.floor(diff / 86400)
 74.diff -= dateData.days * 86400
 75.}if (diff >= 3600) {
 77.dateData.hours = Math.floor(diff / 3600)
 78.diff -= dateData.hours * 3600
 79.}if (diff >= 60) {
 81.dateData.min = Math.floor(diff / 60)
 82.diff -= dateData.min * 60
 83.}dateData.sec = Math.round(diff)dateData.millisec = diff % 1 * 1000return dateData
 87.}/**
 89.* 補零
 90.*/
 91.leadingZeros(num, length = 2) {
 92.num = String(num)
 93.if (num.length > length) return num
 94.return (Array(length + 1).join(`0`) + num).substr(-length)
 95.}/**
 97.* 更新組件
 98.*/
 99.update(newDate) {
 100.this.options.date = typeof newDate !== `object` ? new Date(newDate) : newDate
 101.this.render()
 102.return this
 103.}/**
 105.* 中止倒計時
 106.*/
 107.stop() {
 108.if (this.interval) {
 109.clearInterval(this.interval)
 110.this.interval = !1
 111.}
 112.return this
 113.}/**
 115.* 渲染組件
 116.*/
 117.render() {
 118.this.options.render(this.getDiffDate())
 119.return this
 120.}/**
 122.* 啓動倒計時
 123.*/
 124.start() {
 125.if (this.interval) return !1
 126.this.render()
 127.if (this.options.refresh) {
 128.this.interval = setInterval(() => {
 129.this.render()
 130}, this.options.refresh)
 131.}
 132.return this
 133.}/**
 135.* 更新offset
 136.*/
 137.updateOffset(offset) {
 138.this.options.offset = offset
 139.return this
 140.}/**
 142.* 重啓倒計時
 143.*/
 144.restart(options = {}) {
 145.this.mergeOptions(options)
 146.this.interval = !1
 147.this.start()
 148.return this
 149.}
 150.}

export default Countdownapp

2，WXML部分：ide

1.<view class="weui-cell__ft">
 2.<view class="weui-vcode-btn" bindtap="vcode">{{ c2 || '獲取驗證碼' }}</view>
 3.</view>

3，JS部分:工具


 6.1.import $wuxCountDown from 'countdown/countdown'
 2.export {
 3.$wuxCountDown, 
 4.}
 5.import { $wuxCountDown } from '../../components/wux'vcode: function () {
 7.if (this.c2 && this.c2.interval) return !1
 8.this.c2 = new $wuxCountDown({
 9.date: +(new Date) + 60000,
 10.onEnd() {
 11.this.setData({
 12.c2: '從新獲取驗證碼',
 13.})
 14.},
 15.render(date) {
 16.const sec = this.leadingZeros(date.sec, 2) + ' 秒後重發 '
 17.date.sec !== 0 && this.setData({
 18.c2: sec,
 19.})
 20.},
 21.})
 22.}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。