微信小程序-全局倒计时+全局弹窗提示

需求描述

1、在计时页面中点击【开始】按钮开始倒计时，当退出该页面时计时仍然继续
2、计时结束后，弹出提示（无论当前处于哪个页面）

最终效果

代码

一、全局定义
1、app.json：加上下面这个

 "usingComponents": {"dialog":"/components/dialog/dialog"}

2、app.wxss：需要导入dialog.wxss，否则自定义的弹窗样式失效

@import "components/dialog/dislog.wxss";

3、app.js：实现倒计时+设置变量监听器

App({globalData:{//倒计时相关的全局变量hour: 1,firstMinute: 0,lastMinute: 0,firstSecond: 0,lastSecond: 0,timer:null,isstart_flag: false, },isShow:false,/*** 设置globalData中变量的监听器*/setWatcher(watch) {let obj = this.globalData;Object.keys(obj).forEach(v => {this.observe(obj,v,watch); })},/*** 设置isShow变量的监听器*/setWatcher1(watch) {var val = this.isShow; // 给该属性设默认值Object.defineProperty(this, "isShow", {configurable: true,enumerable: true,set: function(value) {val = value;watch(val); // 赋值(set)时，调用对应函数},get: function() {return val;}})},/*** 监听属性 并执行监听函数*/observe(obj, key,watchFun) {var val = obj[key]; // 给该属性设默认值Object.defineProperty(obj, key, {configurable: true,enumerable: true,set: function(value) {val = value;watchFun(key,val); // 赋值(set)时，调用对应函数},get: function() {return val;}})},//倒计时-具体实现由其他同事编写countDown() {var obj = this.globalData;var self = this;clearInterval(obj.timer)var h = 0;var m = 59,var s = 60;var timer = setInterval(function () {--s;if (s < 0) {--m;s = 59;}if (m < 0) {--h;m = 59}if (h < 0) {s = 0;m = 0;}if (h == 0 && m == 0 && s == 0) {self.isShow = true;clearInterval(obj.timer);}function checkTime(i) {if (i < 10) {i = '0' + i}return i;}s = checkTime(s);let n = checkTime(m)if (n.length >= 2) {m = n.slice(-2);}let strMinute = m.toString();let splMinute = strMinute.split("");let firstMinute = splMinute[0];let lastMinute = splMinute[1];let strSecond = s.toString();let splSecond = strSecond.split("");let firstSecond = splSecond[0];let lastSecond = splSecond[1];obj.hour = h;obj.firstMinute = firstMinute;obj.lastMinute = lastMinute;obj.firstSecond = firstSecond;obj.lastSecond = lastSecond;}, 1000);obj.timer = timer;},
})

二、组装弹窗组件

注意：class名称尽量不要与其他页面重复

1、dialog.wxml

<view class='wx_dialog_container' hidden="{{!isShow}}"><view class='wx-mask'></view><view class="alert1"><view class="white1"><view class="title1">提示</view><view class="text2">计时结束</view><view class="btn1" bindtap="_confirmEvent">我知道了</view></view></view>
</view>

2、dialog.wxss

.wx-mask{
position: fixed;
z-index: 9998;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
}
.wx-dialog{
position: fixed;
z-index: 9999;
width: 80%;
max-width: 600rpx;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #FFFFFF;
text-align: center;
border-radius: 3px;
overflow: hidden;
}
.wx-dialog-title{
font-size: 18px;
padding: 15px 15px 5px;
}
.wx-dialog-content{
padding: 15px 15px 5px;
min-height: 40px;
font-size: 16px;
line-height: 1.3;
word-wrap: break-word;
word-break: break-all;
color: #999999;
}
.wx-dialog-footer{
display: flex;
align-items: center;
position: relative;
line-height: 45px;
font-size: 17px;
}
.wx-dialog-footer::before{
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
height: 1px;
border-top: 1px solid #D5D5D6;
color: #D5D5D6;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.wx-dialog-btn{
display: block;
-webkit-flex: 1;
flex: 1;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
position: relative;
}
.wx-dialog-footer .wx-dialog-btn:nth-of-type(1){
color: #353535;
}
.wx-dialog-footer .wx-dialog-btn:nth-of-type(2){
color: #3CC51F;
}
.wx-dialog-footer .wx-dialog-btn:nth-of-type(2):after{
content: " ";
position: absolute;
left: 0;
top: 0;
width: 1px;
bottom: 0;
border-left: 1px solid #D5D5D6;
color: #D5D5D6;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleX(0.5);
transform: scaleX(0.5);
}
.alert1{width:100%;height:100%;background:rgba(41,36,33,0.5);position:fixed;top:0;left:0;z-index:99999;display:flex;justify-content:center;align-items:center;
}
.white1{width:608rpx;height:362rpx;background-color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:space-between;font-size:28rpx;border-radius:20rpx;padding:5% 3%;
}
.white1 .title1{font-size: 40rpx;
}
.white1 .text2{font-size: 30rpx;color: #a1a3a6;margin-bottom: 60rpx;
}
.btn1{width: 100%;height: 60rpx;border-top: 2rpx solid #eee;text-align: center;line-height: 60rpx;color: #45b97c;font-size: 30rpx;
}

3、dialog.json

{"component": true,       "usingComponents": {}
}

4、dialog.js

const app = getApp();
Component({options: {multipleSlots: true, // 在组件定义时的选项中启用多slot支持addGlobalClass: true},/*** 组件的属性列表* 用于组件自定义设置*/properties: {},/*** 私有数据,组件的初始数据* 可用于模版渲染*/data: {// 弹窗显示控制isShow:false},lifetimes:{attached: function () {const self = this;self.setData({isShow: app.isShow,})},},pageLifetimes:{show(){const self = this;app.setWatcher1(self.watchBack2.bind(self))}},/*** 组件的方法列表* 更新属性和数据的方法与更新页面数据的方法类似*/methods: {watchBack2(value){this.setData({isShow:value,})},/** 内部私有方法建议以下划线开头* triggerEvent 用于触发事件*/_confirmEvent(){app.isShow = false;this.setData({isShow: false})}}
})

三、倒计时页面实现

1、startCountDown.wxml

<view class="Container"><view class="nz_container"><view class="time"><view class="time_item">{{hour}}</view><view class="time_items">:</view><view class="time_item">{{firstMinute}}</view><view class="time_item">{{lastMinute}}</view><view class="time_items">:</view><view class="time_item">{{firstSecond}}</view><view class="time_item">{{lastSecond}}</view></view></view><view class="start_btn" wx:if="{{isstart_flag}}" bindtap="reSet">重置</view><view class="start_btn" wx:else bindtap="startCountDown">开始</view><!-- 弹窗 --><view class="dialog"> <dialog id='dialog'></dialog></view>
</view>

2、startCountDown.wxss

page{width:100%;height:100%;background-color:#eee;overflow:hidden;
}
.nz_container{width:100%;height:394rpx;background: #FFFFFF;border-radius: 6rpx;margin-top:1.2%;display: flex;flex-direction: column;justify-content: center;align-items: center;
}
.time{width:422rpx;height:88rpx;
}
.time_item{width: 70rpx;height: 88rpx;background: #F0FAF8;border: 2rpx solid #149C89;border-radius: 6rpx;font-family: PingFangSC-Medium;font-size: 56rpx;color: #333333;letter-spacing: 3.5rpx;text-align: center;font-weight: 500;margin-left:2%;margin-right:2%;
}
.time_items{font-size:60rpx;
}
.changetime_btn{width:422rpx;height:68rpx;border: 1px solid #149C89;border-radius: 34rpx;margin-top: 5%;display: flex;justify-content: center;align-items: center;
}
.changetime_btn image{width:32rpx;height:28rpx;
}
.start_btn{width: 690rpx;height: 104rpx;background: #149C89;border-radius: 55rpx;text-align: center;line-height: 104rpx;font-family: PingFangSC-Semibold;font-size: 40rpx;color: #FFFFFF;letter-spacing: 0;font-weight: 600;margin: 6% auto;
}
.dialog{position: fixed;top:40%;left: 40%;z-index: 9999;
}

3、startCountDown.js

var app = getApp();
Page({data: {hour: 1,firstMinute: 0,lastMinute: 0,firstSecond: 0,lastSecond: 0,timer:null,isstart_flag: false,},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {const that = this;//设置全局变量监听器app.setWatcher(this.watchBack);that.setData({hour: app.globalData.hour,firstMinute: app.globalData.firstMinute,lastMinute: app.globalData.lastMinute,firstSecond: app.globalData.firstSecond,lastSecond: app.globalData.lastSecond,timer: app.globalData.timer,isstart_flag:app.globalData.isstart_flag,})},watchBack(variable,value){const that = this;that.setData({[variable]:value,})},//开始倒计时startCountDown() {app.globalData.isstart_flag = true;app.countDown();},//重置倒计时reSet() {const that = this;clearInterval(app.globalData.timer);app.globalData.hour = 1;app.globalData.firstMinute = 0;app.globalData.lastMinute = 0;app.globalData.firstSecond = 0;app.globalData.lastSecond = 0;app.globalData.isstart_flag = false;},onUnload() {const that = this;// clearInterval(app.globalData.timer);}
})

四、在每一个页面都可以弹出弹窗提示

暂时未找到更简单的方法。。。

1、在每个页面的wxml中加上

<view class="dialog"> <dialog id='dialog'></dialog></view>

2、在每个页面的wxss中加上:

.dialog{position: fixed;top:40%;left: 40%;z-index: 9999;
}

微信小程序-全局倒计时+全局弹窗提示相关推荐

微信小程序几种常用弹窗提示方法
1.提示文字可以设置显示时间(仅提示时使用)duration设置时间不显示icon,此时 title文字最多可显示两行也可以显示icon,显示icon文字最多显示 7 个汉字长度 icon常用的 ...
微信小程序几种常用弹窗提示
第一种:弹出提示框,可以选择确定或者取消. 代码:wx.showModal({title: '提示',content: '这是一个模态弹窗',success: function (res) {if ( ...
微信小程序app.json全局配置项
微信小程序app.json全局配置小程序根目录下的 app.json 文件用来对微信小程序进行全局配置.文件内容为一个 JSON 对象,有以下属性: app.json配置项(该配置项由微信小程序开发 ...
黯然微信小程序杂记（三）：微信小程序实现倒计时功能附讲解教学附源码
黯然微信小程序杂记(三):微信小程序实现倒计时功能附超详细注释附源码一.功能描述二.界面展示三.test.wxml代码四.test.js代码(注释很详细很易懂) CSDN私信我,有关微信 ...
微信小程序动态倒计时
微信小程序之倒计时插件 wxTimer 1.在全局app.js引入下载: wxTimer 然后把wxTimer文件放在js中 for (let i = 0; i < addEvaluate.l ...
微信小程序自动检测版本并提示更新新版本
微信小程序自动检测版本并提示更新新版本微信小程序开发过程中,我们在版本更新迭代后,微信小程序客户端并不能触发自动更新,需要用户手动清理小程序后重新搜索进入后才能获取到最新的小程序版本,但是这个是用户 ...
微信小程序之自定义模态弹窗（带动画）实例
代码地址如下: http://www.demodashi.com/demo/13991.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序原生开发实现弹窗遮罩层并且在遮罩层内使用scroll-view实现滚动内容（包括图片）
微信小程序原生开发实现弹窗遮罩层并且在遮罩层内可以滚动内容(包括图片) 效果图这里的遮罩层内容由两张图片构成底图+内部内容实现代码 wxml 使用云开发的存储,自己开发的时候换掉src即可 ...
python控制相机自动拍照_微信小程序实现倒计时调用相机自动拍照功能
这篇文章主要为大家详细介绍了微信小程序实现倒计时调用相机自动拍照功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了微信小程序定时拍照的具体代码,供大家参考,具体内容如下在某 ...
微信小程序设置倒计时效果
效果微信小程序设置倒计时步骤 1.设置一个定时器,然后将时间设为一秒 2.在这个函数里将当前时间距终止的时间,的时间戳的差值减一 3.计算剩余的时间,还剩的时分秒等 4.将计算的时间保存到data中 ...

微信小程序-全局倒计时+全局弹窗提示

需求描述

最终效果

代码

微信小程序-全局倒计时+全局弹窗提示相关推荐

最新文章

热门文章