公众号小程序怎么做_微信小程序发送短信验证码

摘要: 手机微信微信小程序推送短消息认证码详细案例 本文关键详细介绍了手机微信微信小程序推送短消息认证码详细案例,完成推送短消息认证码,带60秒倒数计时作用,不用网络服务...

微信小程序发送短信验证码完整实例       这篇文章主要介绍了微信小程序发送短信验证码完整实例,实现发送短信验证码,带60秒倒计时功能,无需服务器端,非常具有实用价值,需要的朋友可以参考下

微信小程序注册完整实例,发送短信验证码,带60秒倒计时功能,无需服务器端。效果图:

代码:

index.wxml

 !--index.wxml-- 
 view 
 view 
 input placeholder='请输入姓名' bindinput='bindNameInput'/ 
 /view 
 view 
 input placeholder='请输入手机号' bindinput='bindPhoneInput'/ 
 /view 
 view 
 input placeholder='请输验证码' bindinput='bindCodeInput' / 
 button bindtap='getCode' hidden='{{hidden}}' disabled='{{btnDisabled}}' {{btnValue}} /button 
 /view 
 view 
 button bindtap='save' 保存 /button 
 /view 
 /view 

index.js

//index.js
var zhenzisms = require('../../utils/zhenzisms.js');
//获取应用实例
const app = getApp();
Page({
 data: {
 hidden: true,
 btnValue:'',
 btnDisabled:false,
 name: '',
 phone: '',
 code: '',
 second: 60
 onLoad: function () {
 //姓名输入
 bindNameInput(e) {
 this.setData({
 name: e.detail.value
 //手机号输入
 bindPhoneInput(e) {
 console.log(e.detail.value);
 var val = e.detail.value;
 this.setData({
 phone: val
 if(val != ''){
 this.setData({
 hidden: false,
 btnValue: '获取验证码'
 }else{
 this.setData({
 hidden: true
 //验证码输入
 bindCodeInput(e) {
 this.setData({
 code: e.detail.value
 //获取短信验证码
 getCode(e) {
 console.log('获取验证码');
 var that = this;
 zhenzisms.client.init('/保存
 save(e) {
 console.log('姓名: ' + this.data.name);
 console.log('手机号: ' + this.data.phone);
 console.log('验证码: ' + this.data.code);
 //省略提交过程

index.wxss

/**index.wxss**/
page{
 height: 100%;
 width: 100%;
 background: linear-gradient(#5681d7, #486ec3);
 display: flex;
 flex-direction: column;
.container{
 display: flex;
 flex-direction: column;
 justify-content: space-around;
 width: 90%;
 margin: 50rpx auto;
.row{
 position: relative;
 height: 80rpx;
 width: 100%;
 border-radius: 10rpx;
 background: #fff;
 margin-bottom: 20rpx;
 padding-left: 20rpx;
 box-sizing: border-box;
.row input{
 width: 100%;
 height:100%;
.codeBtn{
 position: absolute;
 right: 0;
 top: 0;
 color: #bbb;
 width: 30%;
 font-size: 26rpx;
 height: 80rpx;
 line-height: 80rpx;
.subBtn{
 width: 200rpx;
 height: 80rpx;
 background: #fff;
 color: #000;
 border-radius: 50rpx;
 line-height: 80rpx;
}

完整下载:

详情参考:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 400-000-8888