Example analysis of 60s countdown for obtaining verification code in WeChat mini program-Mini Program Development-php.cn

Home

WeChat Applet

Mini Program Development

Example analysis of 60s countdown for obtaining verification code in WeChat mini program

May 15, 2018 pm 03:39 PM

Countdown Case Analysis Applets

This article mainly introduces in detail the WeChat applet to implement a 60s countdown to obtain the verification code. It has a certain reference value. Interested friends can refer to it.

The example in this article is shared with everyone on WeChat. The specific code of the mini program countdown to obtain the verification code is for your reference. The specific content is as follows

1. Tool class (refer to the tool class provided by the WeChat mini program)

countdown.js

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

class Countdown {
constructor(options = {}) {
Object.assign(this, {
options, 
})
this.__init()
}
/**
* 初始化
*/
__init() {
this.page = getCurrentPages()[getCurrentPages().length - 1]
this.setData = this.page.setData.bind(this.page)
this.restart(this.options)
}
/**
* 默认参数
*/
setDefaults() {
return {
date: `June 7, 2087 15:03:25`, 
refresh: 1000, 
offset: 0, 
onEnd() {}, 
render(date) {}, 
}
}
/**
* 合并参数
*/
mergeOptions(options) {
const defaultOptions = this.setDefaults()
for (let i in defaultOptions) {
if (defaultOptions.hasOwnProperty(i)) {
this.options[i] = typeof options[i] !== `undefined` ? options[i] : defaultOptions[i]
if (i === `date` &amp;&amp; typeof this.options.date !== `object`) {
this.options.date = new Date(this.options.date)
}
if (typeof this.options[i] === `function`) {
this.options[i] = this.options[i].bind(this)
}
}
}
if (typeof this.options.date !== `object`) {
this.options.date = new Date(this.options.date)
}
}
/**
* 计算日期差
*/
getDiffDate() {
let diff = (this.options.date.getTime() - Date.now() + this.options.offset) / 1000
let dateData = {
years: 0,
days: 0,
hours: 0,
min: 0,
sec: 0,
millisec: 0,
}
if (diff &lt;= 0) {
if (this.interval) {
this.stop()
this.options.onEnd()
}
return dateData
}
if (diff &gt;= (365.25 * 86400)) {
dateData.years = Math.floor(diff / (365.25 * 86400))
diff -= dateData.years * 365.25 * 86400
}
if (diff &gt;= 86400) {
dateData.days = Math.floor(diff / 86400)
diff -= dateData.days * 86400
}
if (diff &gt;= 3600) {
dateData.hours = Math.floor(diff / 3600)
diff -= dateData.hours * 3600
}
if (diff &gt;= 60) {
dateData.min = Math.floor(diff / 60)
diff -= dateData.min * 60
}
dateData.sec = Math.round(diff)
dateData.millisec = diff % 1 * 1000
return dateData
}
/**
* 补零
*/
leadingZeros(num, length = 2) {
num = String(num)
if (num.length &gt; length) return num
return (Array(length + 1).join(`0`) + num).substr(-length)
}
/**
* 更新组件
*/
update(newDate) {
this.options.date = typeof newDate !== `object` ? new Date(newDate) : newDate
this.render()
return this
}
/**
* 停止倒计时
*/
stop() {
if (this.interval) {
clearInterval(this.interval)
this.interval = !1
}
return this
}
/**
* 渲染组件
*/
render() {
this.options.render(this.getDiffDate())
return this
}
/**
* 启动倒计时
*/
start() {
if (this.interval) return !1
this.render()
if (this.options.refresh) {
this.interval = setInterval(() =&gt; {
this.render()
}, this.options.refresh)
}
return this
}
/**
* 更新offset
*/
updateOffset(offset) {
this.options.offset = offset
return this
}
/**
* 重启倒计时
*/
restart(options = {}) {
this.mergeOptions(options)
this.interval = !1
this.start()
return this
}
}

Copy after login

export default Countdown

2. WXML part:

&lt;view class=&quot;weui-cell__ft&quot;&gt;
 &lt;view class=&quot;weui-vcode-btn&quot; bindtap=&quot;vcode&quot;&gt;{{ c2 || &#39;获取验证码&#39; }}&lt;/view&gt;
&lt;/view&gt;

Copy after login

3. JS part:

import $wuxCountDown from &#39;countdown/countdown&#39;
export {
 $wuxCountDown, 
}
import { $wuxCountDown } from &#39;../../components/wux&#39;
 vcode: function () {
 if (this.c2 &amp;&amp; this.c2.interval) return !1
 this.c2 = new $wuxCountDown({
 date: +(new Date) + 60000,
 onEnd() {
 this.setData({
  c2: &#39;重新获取验证码&#39;,
 })
 },
 render(date) {
 const sec = this.leadingZeros(date.sec, 2) + &#39; 秒后重发 &#39;
 date.sec !== 0 &amp;&amp; this.setData({
  c2: sec,
 })
 },
 })
 }

Copy after login

The above is the detailed content of Example analysis of 60s countdown for obtaining verification code in WeChat mini program. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn