- 发送短信验证码后60秒倒计时
微信小程序发送短信验证码后60秒倒计时功能,效果图: [图片] 完整代码 index.wxml [代码]<!--index.wxml-->[代码][代码]<view class=[代码][代码]"container"[代码][代码]>[代码][代码] [代码][代码]<view class=[代码][代码]"section"[代码][代码]>[代码][代码] [代码][代码]<text>手机号码:</text>[代码][代码] [代码][代码]<input placeholder=[代码][代码]"请输入手机号码"[代码] [代码]type=[代码][代码]"number"[代码] [代码]maxlength=[代码][代码]"11"[代码] [代码]bindinput=[代码][代码]"inputPhoneNum"[代码] [代码]auto-focus />[代码][代码] [代码][代码]<text wx:if=[代码][代码]"{{send}}"[代码] [代码]class=[代码][代码]"sendMsg"[代码] [代码]bindtap=[代码][代码]"sendMsg"[代码][代码]>发送</text>[代码][代码] [代码][代码]<text wx:if=[代码][代码]"{{alreadySend}}"[代码] [代码]class=[代码][代码]"sendMsg"[代码] [代码]>{{second+[代码][代码]"s"[代码][代码]}}</text>[代码][代码] [代码][代码]</view>[代码][代码]</view>[代码] index.wxss [代码]/**index.wxss**/[代码][代码].userinfo {[代码][代码] [代码][代码]display[代码][代码]: flex;[代码][代码] [代码][代码]flex-[代码][代码]direction[代码][代码]: column;[代码][代码] [代码][代码]align-items: [代码][代码]center[代码][代码];[代码][代码]}[代码][代码].section {[代码][代码]display[代码][代码]: flex;[代码][代码]margin[代码][代码]: [代码][代码]16[代码][代码]rpx;[代码][代码]padding[代码][代码]: [代码][代码]16[代码][代码]rpx;[代码][代码]border-bottom[代码][代码]: [代码][代码]1[代码][代码]rpx [代码][代码]solid[代码] [代码]#CFD8DC[代码][代码];[代码][代码]}[代码][代码] [代码] [代码]text {[代码][代码] [代码][代码]width[代码][代码]: [代码][代码]200[代码][代码]rpx;[代码][代码]}[代码][代码] [代码] [代码]button {[代码][代码] [代码][代码]margin[代码][代码]: [代码][代码]16[代码][代码]rpx;[代码][代码]}[代码][代码] [代码] [代码].sendMsg {[代码][代码] [代码][代码]font-size[代码][代码]: [代码][代码]12[代码][代码];[代码][代码] [代码][代码]margin-right[代码][代码]: [代码][代码]0[代码][代码];[代码][代码] [代码][代码]padding[代码][代码]: [代码][代码]0[代码][代码];[代码][代码] [代码][代码]height[代码][代码]: inherit;[代码][代码] [代码][代码]width[代码][代码]: [代码][代码]80[代码][代码]rpx;[代码][代码]}[代码]index.js [代码]//index.js[代码][代码]//获取应用实例[代码][代码]const app = getApp()[代码][代码] [代码] [代码]Page({[代码][代码] [代码][代码]data: {[代码][代码] [代码][代码]send: true,[代码][代码] [代码][代码]alreadySend: false,[代码][代码] [代码][代码]second: [代码][代码]60[代码][代码],[代码][代码] [代码][代码]disabled: true,[代码][代码] [代码][代码]phoneNum: [代码][代码]''[代码][代码] [代码][代码]},[代码][代码] [代码][代码]// 手机号部分[代码][代码] [代码][代码]inputPhoneNum: function (e) {[代码][代码] [代码][代码]let phoneNum = e.detail.value[代码][代码] [代码][代码]this.setData({[代码][代码] [代码][代码]phoneNum: phoneNum[代码][代码] [代码][代码]})[代码][代码] [代码][代码]},[代码][代码] [代码][代码]sendMsg: function () {[代码][代码] [代码][代码]var phoneNum = this.data.phoneNum;[代码][代码] [代码][代码]if(phoneNum == [代码][代码]''[代码][代码]){[代码][代码] [代码][代码]wx.showToast({[代码][代码] [代码][代码]title: [代码][代码]'请输入手机号码'[代码][代码],[代码][代码] [代码][代码]icon: [代码][代码]'none'[代码][代码],[代码][代码] [代码][代码]duration: [代码][代码]2000[代码][代码] [代码][代码]})[代码][代码] [代码][代码]return ;[代码][代码] [代码][代码]}[代码][代码] [代码][代码]//此处省略发送短信验证码功能[代码][代码] [代码][代码]this.setData({[代码][代码] [代码][代码]alreadySend: true,[代码][代码] [代码][代码]send: false[代码][代码] [代码][代码]})[代码][代码] [代码][代码]this.timer()[代码][代码] [代码][代码]},[代码][代码] [代码][代码]showSendMsg: function () {[代码][代码] [代码][代码]if (!this.data.alreadySend) {[代码][代码] [代码][代码]this.setData({[代码][代码] [代码][代码]send: true[代码][代码] [代码][代码]})[代码][代码] [代码][代码]}[代码][代码] [代码][代码]},[代码][代码] [代码][代码]hideSendMsg: function () {[代码][代码] [代码][代码]this.setData({[代码][代码] [代码][代码]send: false,[代码][代码] [代码][代码]disabled: true,[代码][代码] [代码][代码]buttonType: [代码][代码]'default'[代码][代码] [代码][代码]})[代码][代码] [代码][代码]},[代码][代码] [代码][代码]timer: function () {[代码][代码] [代码][代码]let promise = new Promise((resolve, reject) => {[代码][代码] [代码][代码]let setTimer = setInterval([代码][代码] [代码][代码]() => {[代码][代码] [代码][代码]this.setData({[代码][代码] [代码][代码]second: this.data.second - [代码][代码]1[代码][代码] [代码][代码]})[代码][代码] [代码][代码]if (this.data.second <= [代码][代码]0[代码][代码]) {[代码][代码] [代码][代码]this.setData({[代码][代码] [代码][代码]second: [代码][代码]60[代码][代码],[代码][代码] [代码][代码]alreadySend: false,[代码][代码] [代码][代码]send: true[代码][代码] [代码][代码]})[代码][代码] [代码][代码]resolve(setTimer)[代码][代码] [代码][代码]}[代码][代码] [代码][代码]}[代码][代码] [代码][代码], [代码][代码]1000[代码][代码])[代码][代码] [代码][代码]})[代码][代码] [代码][代码]promise.then((setTimer) => {[代码][代码] [代码][代码]clearInterval(setTimer)[代码][代码] [代码][代码]})[代码][代码] [代码][代码]},[代码][代码]})[代码]完整的短信验证码登录实例参考: https://blog.csdn.net/zuoliangzhu/article/details/81219900
2019-04-17 - 5行代码实现微信模版消息推送,springboot实现微信推送,java微信推送
视频讲解:https://edu.csdn.net/course/detail/23750 今天来带大家学习下微信模版消息推送。 先看效果图: [图片] 核心代码只有下面几行,即可轻松实现微信模版消息推送 [代码] //1,配置 WxMpInMemoryConfigStorage wxStorage = new WxMpInMemoryConfigStorage(); wxStorage.setAppId("wx77bb69292323a000"); wxStorage.setSecret("29bd368145806115ad6820133e62806e"); WxMpService wxMpService = new WxMpServiceImpl(); wxMpService.setWxMpConfigStorage(wxStorage); //2,推送消息 WxMpTemplateMessage templateMessage = WxMpTemplateMessage.builder() .toUser("o5kho6DgC7SDry8zCmXuvHJGvrgI")//要推送的用户openid .templateId("Tpln-Eue2obJ0B-8JNkgkiRJaDMPgVeIgGxna982xrg")//模版id .url("https://30paotui.com/")//点击模版消息要访问的网址 .build(); try { wxMpService.getTemplateMsgService().sendTemplateMsg(templateMessage); } catch (Exception e) { System.out.println("推送失败:" + e.getMessage()); } [代码] 所用知识点 1, springboot实现java后台 2,微信测试账号的申请 3,微信模版推送的配置 接下来就带领大家来一步步实现微信模版消息推送。 一,springboot创建java后台 至于springboot怎么创建java后台,我这里就不再唠叨了,大家百度一下,一大堆的文章。这里只需要重点讲解下以下几点。 1,在pom.xml文件里引入下面类库 [代码] <!--微信模版消息推送三方sdk--> <dependency> <groupId>com.github.binarywang</groupId> <artifactId>weixin-java-mp</artifactId> <version>3.3.0</version> </dependency> [代码] 2,写一个推送的controller [代码]package com.qiushi.wxpush; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RestController; import me.chanjar.weixin.mp.api.WxMpInMemoryConfigStorage; import me.chanjar.weixin.mp.api.WxMpService; import me.chanjar.weixin.mp.api.impl.WxMpServiceImpl; import me.chanjar.weixin.mp.bean.template.WxMpTemplateMessage; /** * Created by qcl on 2019-03-28 * 微信:2501902696 * desc: 模版消息推送模拟 */ @RestController public class PushController { /* * 微信测试账号推送 * */ @GetMapping("/push") public void push() { //1,配置 WxMpInMemoryConfigStorage wxStorage = new WxMpInMemoryConfigStorage(); wxStorage.setAppId("wx77bb69292323a000"); wxStorage.setSecret("29bd368145806115ad6820133e62806e"); WxMpService wxMpService = new WxMpServiceImpl(); wxMpService.setWxMpConfigStorage(wxStorage); //2,推送消息 WxMpTemplateMessage templateMessage = WxMpTemplateMessage.builder() .toUser("o5kho6DgC7SDry8zCmXuvHJGvrgI")//要推送的用户openid .templateId("Tpln-Eue2obJ0B-8JNkgkiRJaDMPgVeIgGxna982xrg")//模版id .url("https://30paotui.com/")//点击模版消息要访问的网址 .build(); //3,如果是正式版发送模版消息,这里需要配置你的信息 // templateMessage.addData(new WxMpTemplateData("name", "value", "#FF00FF")); // templateMessage.addData(new WxMpTemplateData(name2, value2, color2)); try { wxMpService.getTemplateMsgService().sendTemplateMsg(templateMessage); } catch (Exception e) { System.out.println("推送失败:" + e.getMessage()); e.printStackTrace(); } } } [代码] 二,接下来就来重点讲讲我们如何注册微信测试账号,并实现推送功能。 正常我们企业开发,实现微信模版消息推送,必须要有微信公众号,备案的网址,并且最麻烦的一点是要获取到用户的openid,作为个人,这些条件基本上都不具备。所以今天就来带大家注册微信开发测试账号,来轻松实现微信模版消息推送。 1,微信扫码登录下面网址 https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login 扫码登录成功后,就会给我们生成微信公号的appid和appsecret [图片] 2,微信扫码关注 测试号二维码,微信给我们返回我们的openid,这个openid在推送时特别重要。因为你推送肯定要知道推送给 谁啊,就比如你打电话,肯定要知道用户的电话号码吧。这个openid就是我们要推送给那个用户的唯一标示。 [图片] 3,拿到这些以后,我们就可以去实现微信推送了。推送的代码就只有下面这么点。 [代码] //1,配置 WxMpInMemoryConfigStorage wxStorage = new WxMpInMemoryConfigStorage(); wxStorage.setAppId("wx77bb69292323a000");//appid wxStorage.setSecret("29bd368145806115ad6820133e62806e");//appsecret WxMpService wxMpService = new WxMpServiceImpl(); wxMpService.setWxMpConfigStorage(wxStorage); //2,推送消息 WxMpTemplateMessage templateMessage = WxMpTemplateMessage.builder() .toUser("o5kho6DgC7SDry8zCmXuvHJGvrgI")//要推送的用户openid .templateId("Tpln-Eue2obJ0B-8JNkgkiRJaDMPgVeIgGxna982xrg")//模版id .url("https://30paotui.com/")//点击模版消息要访问的网址 .build(); //3,如果是正式版发送模版消息,这里需要配置你的信息 // templateMessage.addData(new WxMpTemplateData("name", "value", "#FF00FF")); // templateMessage.addData(new WxMpTemplateData(name2, value2, color2)); //发起推送 try { String msg = wxMpService.getTemplateMsgService().sendTemplateMsg(templateMessage); System.out.println("推送成功:" + msg); } catch (Exception e) { System.out.println("推送失败:" + e.getMessage()); e.printStackTrace(); } [代码] 三,推送测试 代码都完成后,我们就可以来测试推送了。测试我们这个分两种 1,java的单元测试 2,运行springboot,通过get请求来触发推送 单元测试 [代码]package com.qiushi.wxpush; import org.junit.Test; import org.junit.runner.RunWith; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.boot.test.context.SpringBootTest; import org.springframework.test.context.junit4.SpringRunner; import static org.junit.Assert.*; /** * Created by qcl on 2019-03-28 * 微信:2501902696 * desc:测试用例 */ @RunWith(SpringRunner.class) @SpringBootTest public class PushControllerTest { @Autowired PushController pushController; @Test public void push() { pushController.push(); } } [代码] 单元测试其实很简单,我们只需要点击箭头所指的绿色按钮,即可运行单元测试,运行通过后就可以看到发送消息成功了。 [图片] log里可以看出我们是10:46发起推送的,看下图我们微信接受到的推送消息也是10:46 [图片] 运行springboot,通过get请求来触发推送 这个就更简单了,我们启动springboot项目,然后调用get请求: [图片] [图片] 可以看到我们也推送成功了。 到这里我们就轻松通过简单几行代码实现了微信模版消息推送的功能了。 我们在企业生产环境时,实现这个功能,步骤和这里是一样的。代码也和这里差不多,只不过多了一个获取用户openid的步骤,这个步骤微信要求比较严格,必须要有备案的网址作为回调,今天就不给大家深入讲解了,后期我会专门写一篇获取微信用户openid的文章出来。 如果你有微信或者java开发方面的问题,可以加我微信交流学习:2501902696。也可以加我微信获取完整源码。 视频讲解:https://edu.csdn.net/course/detail/23750
2019-11-04