邢臺網站建設,邢臺系統開發
邢臺網站建設,邢臺網站制作,邢臺網絡公司,邢臺系統開發,邢臺網站設計,邢臺網頁制作
15081754822
網站首頁 網站建設 系統開發 系統開發知識 手機網站 外貿網站 網站維護 網站案例 選課系統 域名注冊 微信開發 行業交流 聯系我們
 
邢臺區縣網站建設
邢臺行業門戶網站建設
邢臺網站策劃
公司主營業務
  系統開發
網站建設
手機網站
網站案例
成品網站
網站維護
域名注冊
虛似主機
機房工程
弱電工程
視頻主持人
 
增值服務
 
SSL證書申請
微信小程序
 
關于我們
 
公司簡介
公司視頻
支付方式
人才招聘
企業文化
服務承諾
合作伙伴
下載中心
 
你所處的位置:首頁 - 微信小程序 - 微信小程序發送短信驗證碼完整實例
微信小程序發送短信驗證碼完整實例
發布日期:2020-3-8 20:31:15  瀏覽次數:72次

程序注冊完整實例,發送短信驗證碼,帶60秒倒計時功能,無需服務器端。效果圖:






代碼:


index.wxml


<!--index.wxml-->

<view class="container">

 <view class='row'>

    <input placeholder='請輸入姓名' bindinput='bindNameInput'/>

 </view>

 

 <view class='row'>

    <input placeholder='請輸入手機號' bindinput='bindPhoneInput'/>

 </view>

 <view class='row'>

    <input placeholder='請輸驗證碼' bindinput='bindCodeInput' style='width:70%;'/>

    <button class='codeBtn' bindtap='getCode' hidden='{{hidden}}' disabled='{{btnDisabled}}'>{{btnValue}}</button>

 </view>

 <view>

    <button class='save' 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('https://sms_developer.zhenzikj.com', 'appId', 'appSecret');

   zhenzisms.client.send(function (res) {

     if(res.data.code == 0){

       that.timer();

       return ;

     }

     wx.showToast({

       title: res.data.data,

       icon: 'none',

       duration: 2000

     })

   }, '15801636347', '驗證碼為:3322');

   

 },

 timer: function () {

   let promise = new Promise((resolve, reject) => {

     let setTimer = setInterval(

       () => {

         var second = this.data.second - 1;

         this.setData({

           second: second,

           btnValue: second+'秒',

           btnDisabled: true

         })

         if (this.data.second <= 0) {

           this.setData({

             second: 60,

             btnValue: '獲取驗證碼',

             btnDisabled: false

           })

           resolve(setTimer)

         }

       }

       , 1000)

   })

   promise.then((setTimer) => {

     clearInterval(setTimer)

   })

 },

 //保存

 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;

}




作者:未知 上一條: 微信小程序 頁面路由
來源:互聯網 下一條: 微信小程序和H5頁面間相互跳轉代碼實例
奧祥介紹 聯系我們
域名注冊 成品網站
成功案例 客戶服務
行業交流 支付方式
版權所有: © 2005-2015 邢臺奧祥網絡™
聯系電話:15081754822  15102693855
公司郵箱:[email protected] 《信息產業部備案 冀ICP備09043254號》
本站關鍵詞:邢臺網站建設 邢臺網站設計 河北邢臺網絡公司 邢臺網站制作公司 邢臺網站推廣邢臺網站制作
網站統計:
黑色沙漠造船赚钱 刘低温单双20码期期中特 苹果手机天津麻将下载安装 炒股学习平台 温州麻将怎么算分 怎么在线看股票 遇乐棋牌游戏大厅ios 猪肉股票走势 神来棋牌怎么样 奇瑞汽车股票代码 吉祥棋牌游戏下载? 广东11选5官网 湖南哈哈麻将辅助器 极速赛车图解预测 免费公开期期精准资料 时时乐儿童餐价目表 好运来彩票网址