WPF MVVM下做发送短信小按钮
最近做一个项目,因为涉及到注册,因此需要发送短信,一般发送短信都有一个倒计时的小按钮,因此,就做了一个,在此做个记录。
一、发送消息
没有调用公司的短信平台,只是模拟前台生成一串数字,将此串数字输出一下。
在这个部分写了两个类文件:一个是生成随机数,一个是模拟发送此数字的。
1、因为生成几位随机数,是必须要到项目上线之前才能定的,因此,写了一个带参数的函数,如下
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/// <summary> /// 生成随机验证码 /// </summary> public static class RandomCode { /// <summary> /// 返回一个N位验证码 /// </summary> /// <param name="N">位数</param> /// <returns></returns> public static string RandomCodeCommand(int N) { string code = ""; Random random = new Random(); for (int i = 0; i < N; i++) { code += random.Next(9); } return code; } }
2、模拟发送此串数字。
这个类里面用了两个Timer函数,一个是用作Button的倒数显示的,另一个是用作保存这个验证码时长的。
在记录验证码的同时,还需要记录发送验证码的手机号,以防止,用户用第一个手机号点击了发送验证码后,把手机号部分修改为其他的手机号。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
public class SendRandomCode : ViewModelBase { private int _interval;//记录倒计时长 private string idCode;//在规定时间内保存验证码 private int idCodeTime;//设置验证码的有效时间(秒) private int idCodeNum = 6;//设置验证码的位数 public void GetCode(string phoneNum) { //获取验证码 timerSend = new Timer(1000); timerSend.AutoReset = true; timerSend.Elapsed += Timer_Elapsed; _interval = SecondNum; timerSend.Start(); //在验证码有效期内,再次请求验证码,需要先关闭上一次的 if (timerTime != null) { timerTime.Close(); timerTime.Dispose(); } //验证码的有效期 timerTime = new Timer(1000); timerTime.AutoReset = true; timerTime.Elapsed += TimerTime_Elapsed; timerTime.Start(); idCodeTime = SaveTime; IdCode = RandomCode.RandomCodeCommand(idCodeNum); PhoneNum = phoneNum; } #region 获取验证码倒计时 Timer timerSend; Timer timerTime; private void Timer_Elapsed(object sender, ElapsedEventArgs e) { BtnIsEnable = false; BtnContent = "(" + (_interval--) + ")秒后再次获取验证码"; if (_interval <= -1) { BtnIsEnable = true; BtnContent = "获取验证码"; timerSend.Stop(); timerSend.Dispose(); } //throw new NotImplementedException(); } private void TimerTime_Elapsed(object sender, ElapsedEventArgs e) { idCodeTime--; if (idCodeTime <= 0) { IdCode = ""; timerTime.Stop(); timerTime.Dispose(); } Console.WriteLine(IdCode); //throw new NotImplementedException(); } #endregion #region 字段 //*************************************************************************************************//上线时需要修改 private int secondNum = 30;//设置倒计时长 private int saveTime = 60;//设置保存验证码时长 //*************************************************************************************************// private string btnContent = "获取验证码";//设置获取验证码按钮显示的名称 private bool btnIsEnable = true;//设置获取验证码按钮是否可用 private string phoneNum;//记录是否是发送验证码的手机号 public int SecondNum { get { return secondNum; } set { secondNum = value; } } public int SaveTime { get { return saveTime; } set { saveTime = value; } } public string BtnContent { get { return btnContent; } set { btnContent = value; RaisePropertyChanged("BtnContent"); } } public bool BtnIsEnable { get { return btnIsEnable; } set { btnIsEnable = value; RaisePropertyChanged("BtnIsEnable"); } } public string IdCode { get { return idCode; } set { idCode = value; RaisePropertyChanged("IdCode"); } } public string PhoneNum { get { return phoneNum; } set { phoneNum = value; RaisePropertyChanged("PhoneNum"); } } #endregion }
二、XAML页面代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<Grid> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <StackPanel Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal"> <Label Content="手机号"/> <TextBox Text="{Binding PhoneNum}" Height="20" Width="100"/> <Button Content="{Binding Src.BtnContent}" IsEnabled="{Binding Src.BtnIsEnable}" Command="{Binding SendCode}" Height="20" Width="120"/> </StackPanel> <StackPanel Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal"> <Label Content="验证码"/> <TextBox Text="{Binding IdentifyCode}" Height="20" Width="100"/> <Button Content="提交" Command="{Binding Submit}" Height="20" Width="120"/> </StackPanel> </Grid>
三、VM页面代码
VM页面没有什么特别的,就是声明了一些字段,
特别注意的是,由于前台的XAML页面上的发送短信按钮是需要倒计时的,因此Button的Content和IsEnable需要绑定到SendRandomCode这个类上,所以需要在VM下声明一下这个类
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
public class BingVM: ViewModelBase { #region 界面字段 private string phoneNum;//手机号 private string identifyCode;//验证码 public string PhoneNum { get { return phoneNum; } set { phoneNum = value; RaisePropertyChanged("PhoneNum"); } } public string IdentifyCode { get { return identifyCode; } set { identifyCode = value; RaisePropertyChanged("IdentifyCode"); } } #endregion #region 为获取验证码按钮设置content和isEnable用的 SendRandomCode src = new SendRandomCode(); public SendRandomCode Src { get { return src; } set { src = value; } } #endregion private RelayCommand sendCode;//获取验证码 public RelayCommand SendCode { get { return sendCode ?? (sendCode = new RelayCommand( () => { if (!string.IsNullOrEmpty(PhoneNum)) { src.GetCode(PhoneNum); } else { MessageBox.Show("手机号不能为空!"); } })); } } private RelayCommand submit; public RelayCommand Submit { get { return submit ?? (submit = new RelayCommand( () => { if (IdentifyCode == src.IdCode && PhoneNum == src.PhoneNum) { MessageBox.Show("验证成功"); } else { MessageBox.Show("验证失败"); } })); } } }
四、效果展示
上面是成功的效果图
验证失败的情况如下:
1、如果在发送验证码的过程中,把手机号修改了,填入原有的验证码
2、如果输入的验证码不是程序输出的验证码
3、时间超过了验证码的保存时间
=============================================================================
BUG修复:
刚才在测试的过程中发现了一个问题,由于我们做的主程序是调用模块的DLL文件生成磁贴的,而主程序的返回按钮,不会关闭掉当前磁贴的所有线程,导致当返回再进入此磁贴时,再次点击发送按钮,则会再次出现一个验证码,解决方式很简单:修改SendRandomCode代码,在Timer timerTime;前加static,是其成为静态的。这样再次点击时,就是知道线程已存在,先关闭再发送。