uView1.0 中验证码倒计时组件keep-running设置无效解决方案
1.刷新后使KeepRunning生效
这是uView1.0 GitHub仓库中的某个人提供的。
虽然 uView1.0 没很多人去使用了。但是会为了维护旧项目产生这样的问题。官方对 uView1.0 维护持续到 “2023-03-27” 最后一次更新日志已经没有调整了。所以上述需要手动更改验证码组件源码内容。或者使用 uView2.0 全新版本。
2.其它问题
这个问题的产生是因为修改了上述源码后且将验证码组件放在二级或多级页面中(非首页)。频繁返回并进入旧极有可能导致。例如以下展示例子:
在并未点击 “获取验证码” 时,重新进入页面会自动进入验证码操作。对验证码组件源码重新审查后:
组件销毁后调用保存验证码当前时间到Storage中;但是this.timer为空;会直接return不走下面逻辑。
但是当改了第一个问题时(使keep-running生效),去掉了 “!this.timer”,所以 this.timer = null的时候也进入了下方逻辑保存了验证码组件时间。导致再次进入页面时获取到了缓存从而自动有了时间。
涉及到的还有其他方法的调用。这里并未过多详细讲解。
在组件销毁时对 timer 判断,不为空时再去触发保存缓存操作即可解决。
3.解决问题
复制下方代码粘贴到 验证码组件 源码中可以直接解决。
验证码组件源码位置位于 uView-ui/components/u-verification-code
<template>
<view class="u-code-wrap">
<!-- 此组件功能由js完成,无需写html逻辑 -->
</view>
</template>
<script>
/**
* verificationCode 验证码输入框
* @description 考虑到用户实际发送验证码的场景,可能是一个按钮,也可能是一段文字,提示语各有不同,所以本组件 不提供界面显示,只提供提示语,由用户将提示语嵌入到具体的场景
* @tutorial https://www.uviewui.com/components/verificationCode.html
* @property {Number String} seconds 倒计时所需的秒数(默认60)
* @property {String} start-text 开始前的提示语,见官网说明(默认获取验证码)
* @property {String} change-text 倒计时期间的提示语,必须带有字母"x",见官网说明(默认X秒重新获取)
* @property {String} end-text 倒计结束的提示语,见官网说明(默认重新获取)
* @property {Boolean} keep-running 是否在H5刷新或各端返回再进入时继续倒计时(默认false)
* @event {Function} change 倒计时期间,每秒触发一次
* @event {Function} start 开始倒计时触发
* @event {Function} end 结束倒计时触发
* @example <u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode"
*/
export default {
name: "u-verification-code",
props: {
// 倒计时总秒数
seconds: {
type: [String, Number],
default: 60
},
// 尚未开始时提示
startText: {
type: String,
default: '获取验证码'
},
// 正在倒计时中的提示
changeText: {
type