应用场景 需要倒计时的场景，如运动、烹饪、比赛等计时场景。 目标用户 学生、运动达人 实现思路 整体思路 通过TTS获取特定时间节点的语音，并转化为字符格式，存入云开发数据库。前端通过脚本计时器每秒执行canvas动画及判断是否需要播放语音，如需播放则将字符串格式音频文件转化为mp3文件，并放置在用户临时文件夹，最后播放音频即可。 界面思路 界面上分为三个状态色： 灰色：未启动 绿色：计时中 红色：计时完成 canvas部分： 圆圈部分：让用户直观的了解大致的时间情况。 时间字符部分：让用户准确了解当前剩余时间情况。 按钮部分： 重置按钮 开始/暂停按钮 设置按钮 效果截图 [图片] [图片] [图片] [图片] 功能代码展示 [代码]start:function(){ if( this.data.getAudioIsRunning ){ return; } if( this.data.timer ){ clearInterval( this.data.timer ) } var that = this; if( this.data.isFinish ){ this.drawText( this.data.time ); this.drawRound(1); } that.setData({ isFinish:false, isPlay:true }); wx.vibrateShort(); that.data.count = that.data.time that.data.timer = setInterval( function(){ if( !that.data.isPause ){ that.data.count--; that.drawText( that.data.count ); that.drawRound( that.data.count /that.data.time ); if(that.data.audioId > 0 && app.globalData.userData.audioData && app.globalData.userData.audioData._id == that.data.audioId && app.globalData.userData.audioData.data[that.data.count] ){ console.log("准备播放",that.data.audioId,that.data.count ) var filePath = wx.env.USER_DATA_PATH+"/currentAudio-"+that.data.count+".mp3"; fs.writeFile({ filePath:filePath, data:app.globalData.userData.audioData.data[that.data.count], encoding:"base64", success:function(res){ if( res.errMsg == "writeFile:ok" ){ innerAudioContext.src = filePath; }else{ console.error("fs返回验证失败",res) } }, fail:function( err ){ console.error("fs-write失败",err) } }) } if( that.data.count <= 0 ){ wx.vibrateLong(); that.setData({ isFinish:true, isPlay:false }) clearInterval( that.data.timer ) return; } } } , 1000 ) } [代码] 作品体验二维码 [图片] 团队介绍 团队名：跑得脱马脑壳 团队成员：Laidz

我推荐一个倒计时插件wxTimer，这个倒计时插件运用原生写法写了一个原型倒计时js，可拓展性十分的强大，但是网上资料甚少导致一些初学者看不懂文档，先放文档链接github： https://github.com/baqihg/wxTimer 文档里的内容还是要掰扯一下的，大家可能好奇，为什么我用了这一段倒计时不动了 var wxTimer = new timer({ beginTime:"00:00:10" }) wxTimer.start(this); wxTimer.stop(); wxTimer.stop();这个是停止的语法，在他的js文件原型里可以清楚的看到是包裹在外面的所以写在这里就是启动了一次又把他停止了，只需要去掉这个语法就可以读秒了。 还有就是写了一个button 绑定了bindtap事件去控制wxTimer.stop();可以发现并不生效，原因查看原型可知是wxTimer.stop();读不到停止的那个原型对象，如果你设定了倒计时为wxTimer，那你必须要要在page（{}）的外面事先声明这个量比如写var wxTimer 这样你就可以通过if（wxTimer ）{wxTimer.stop();}找到这个计时器去停止这个倒计时了 这个倒计时是很好用的，页面隐藏后倒计时还是会进行，对读秒跳转和计时的功能有一定的帮助，可以添加在小程序的各个生命周期里，不过要事先做好销毁停止的处理

本文针对不会配置HTTPS或者小白开发着，请开发者社区的大佬们自动忽略。非广告，心得分享，勿喷，谢谢。 👇 推荐一个小程序商城，全开源，码云GVP项目，有兴趣的可以了解一下：【点击下载】 👇 👇 正文开始 01、关于 FreeSSL.cn FreeSSL.cn 是一个免费提供 HTTPS 证书申请、HTTPS 证书管理和 HTTPS 证书到期提醒服务的网站，旨在推进 HTTPS 证书的普及与应用，简化证书申请的流程。 当然了，我看重的不是免费（微笑~），而是 FreeSSL 使用起来非常人性化。我是一个计算机常识非常薄弱的程序员（羞愧一下），但通过 FreeSSL，我竟然可以独自完成 Tomcat 的 HTTPS 配置！ 很多年以前，公司要做华夏银行的接口对接，需要 HTTPS 访问，大概花了 3000 块买的证书，最后证书还有问题，HTTPS 也没搞定。总之，坑的很！ FreeSSL.cn 有很大的不同，申请非常便捷，优点很多，值得推荐一波。毕竟再也不用邮件、电话各种联系了（也许时代进步了）。 100% 永久免费；这要感谢 Let’s Encrypt 与 TrustAsia 提供的免费 SSL 证书。 在 HTTPS 证书到期前，FreeSSL.cn 会及时地提醒更换证书，免费的服务。 私钥不在网络中传播，确保 HTTPS 证书的安全。 02、使用 FreeSSL 申请证书 第一步，填写域名，点击「创建免费的 SSL 证书」 [图片] 第二步，填写邮箱，点击「创建」 [图片] 1）证书类型默认为 RSA RSA 和 ECC 有什么区别呢？可以通过下面几段文字了解一下。 HTTPS 通过 TLS 层和证书机制提供了内容加密、身份认证和数据完整性三大功能，可以有效防止数据被监听或篡改，还能抵御 MITM（中间人）攻击。TLS 在实施加密过程中，需要用到非对称密钥交换和对称内容加密两大算法。 对称内容加密强度非常高，加解密速度也很快，只是无法安全地生成和保管密钥。在 TLS 协议中，应用数据都是经过对称加密后传输的，传输中所使用的对称密钥，则是在握手阶段通过非对称密钥交换而来。常见的 AES-GCM、ChaCha20-Poly1305，都是对称加密算法。 非对称密钥交换能在不安全的数据通道中，产生只有通信双方才知道的对称加密密钥。目前最常用的密钥交换算法有 RSA 和 ECDHE：RSA 历史悠久，支持度好，但不支持 PFS（Perfect Forward Secrecy）；而 ECDHE 是使用了 ECC（椭圆曲线）的 DH（Diffie-Hellman）算法，计算速度快，支持 PFS。 2）验证类型默认为 DNS DNS 和文件验证有什么区别呢？我们再来一起了解下。 首先，我们需要明白一点，CA（Certificate Authority，证书颁发机构） 需要验证我们是否拥有该域名，这样才给我们颁发证书。 文件验证（HTTP）：CA 将通过访问特定 URL 地址来验证我们是否拥有域名的所有权。因此，我们需要下载给定的验证文件，并上传到您的服务器。 DNS 验证：CA 将通过查询 DNS 的 TXT 记录来确定我们对该域名的所有权。我们只需要在域名管理平台将生成的 TXT 记录名与记录值添加到该域名下，等待大约 1 分钟即可验证成功。 所以，如果对服务器操作方便的话，可以选择文件验证；如果对域名的服务器操作比较方便的话，可以选择 DNS 验证。如果两个都方便的话，请随意选啦。 3）CSR生成默认为离线生成 离线生成、浏览器生成 和 我有 CSR 又有什么区别呢？来，我们继续了解一下。 离线生成 推荐!!!：私钥在本地加密存储，更安全；公钥自动合成，支持常见证书格式转换，方便部署；支持部分 WebServer 的一键部署，非常便捷。 离线生成的时候，需要先安装 KeyManager，可以提供安全便捷的 SSL 证书申请和管理。下载地址如下： https://keymanager.org/ Windows 的话，安装的时候要选择“以管理员身份运行”。 浏览器生成：在浏览器支持 Web Cryptography 的情况下，会使用浏览器根据用户的信息生成 CSR 文件。 Web Cryptography，网络密码学，用于在 Web 应用程序中执行基本加密操作的 JavaScript API。很多浏览器并不支持 我有 CSR：可以粘贴自己的 CSR，然后创建。 第三步，选择离线生成，打开 KeyManager 填写密码后点击「开始」，稍等片刻。 第四步，返回浏览器，点击「下一步」，出现如下界面。 [图片] 第五步，下载文件，并上传至服务器指定目录下。 第六步，点击「验证」，通过后，出现以下界面。 [图片] 第七步，点击「保存到KeyManager」，可以看到证书状态变成了已颁发。 03、为 Tomcat 配置 jks 格式证书 第一步，导出证书。假如服务器选择的 Tomcat，需要导出 Java keystone （简拼为 jks）格式的证书。 [图片] 注意：私钥的密码在配置 Tomcat 的时候用到。 [图片] 第二步，上传证书至服务器。 第三步，配置 Tomcat 的 server.xml。 [代码] <Connector port="81" protocol="HTTP/1.1" maxThreads="250" maxHttpHeaderSize="8192" acceptCount="100" connectionTimeout="60000" keepAliveTimeout="200000" redirectPort="8443" useBodyEncodingForURI="true" URIEncoding="UTF-8" compression="on" compressionMinSize="2048" noCompressionUserAgents="gozilla, traviata" compressableMimeType="text/html,text/xml,application/xml,application/json,text/javascript,application/javascript,text/css,text/plain,text/json,image/png,image/gif"/> <Connector protocol="org.apache.coyote.http11.Http11NioProtocol" port="443" maxThreads="200" scheme="https" secure="true" SSLEnabled="true" keystoreFile="/home/backup/qingmiaokeji.cn.jks" keystorePass="Chenmo" clientAuth="false" sslProtocol="TLS" useBodyEncodingForURI="true" URIEncoding="UTF-8" compression="on" compressionMinSize="2048" noCompressionUserAgents="gozilla, traviata" compressableMimeType="text/html,text/xml,application/xml,application/json,text/javascript,application/javascript,text/css,text/plain,text/json,image/png,image/gif" /> [代码] 其中 keystorePass 为导出证书时私钥的加密密码。 第四步，重启 Tomcat，并在浏览器地址栏中输入 https://你的域名/ 进行测试。 注意到没，浏览器地址栏前面有一个绿色的安全锁，这说明 HTTPS 配置成功了！好了，为自己鼓个掌！ 04、最后 你有没有订个五分钟的时间沙漏？如果超过五分钟 HTTPS 还没有配置成功，你过来揍我！反正你又打不来我！我在CRMEB等你！ 👇 👇 👇 最后亿遍，再次发一下我的项目：全开源啊！公众号+小程序啊！商城系统啊！免费啊！了解一下啊→→→点我点我！