微信小程序實現注冊、登錄頁面的小功能整理，希望對大家有幫助。
1. 正則驗證手機號碼
var
mobile = that.data.phone;
var
myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
if
(!myreg.test(mobile)) {
wx.showToast({
title:
'手機號有誤！'
,
icon:
'success'
,
duration: 1500
})
return
;
}
wx.showToast({
title:
'手機號正確！'
,
icon:
'success'
,
duration: 1500
})
|
2. 60秒倒計時
發送短信驗證碼后會有60秒的倒計時功能。
網上有很多這種插件，很方便
比如: http://smsow.zhenzikj.com/doc/sdk.html
使用方法
1.引入插件countdown.js
var
CountDown = require(
'../../utils/countdown.js'
);
|
2.在 onLoad 周期初始化
onLoad:
function
() {
this
.countdown =
new
CountDown(
this
);
}
|
3. 在獲取驗證碼的按鈕上增加captchaDisabled、captchaTxt 分別用於控制倒計時過程中是否可以點擊、倒計時秒數提示
<button class=
'codeBtn'
bindtap=
'getSmsCaptcha'
disabled=
'{{captchaDisabled}}'
>{{captchaTxt}}</button>
|
4. 調用start方法觸發倒計時
getSmsCaptcha(e) {
this
.countdown.start();
}
|
3. 發送短信驗證碼
小編使用的是榛子雲短信(http://smsow.zhenzikj.com/doc/sdk.html)的發送驗證碼短信。
目前提供了普通版和雲函數版，建議下載雲函數版的。兩個版本中都提供了對驗證碼的支持，你無需生成驗證碼，SDK已經幫你都弄好了。
如何使用
1）配置域名
在微信公眾平台-小程序管理中配置域名https://smsdeveloper.zhenzikj.com,如下圖:
2) 引入sdk
var
zhenzisms = require(
'../../utils/zhenzisms.js'
);
|
3）初始化
zhenzisms.client.init(
'https://sms_developer.zhenzikj.com'
,
'你的榛子雲appId'
,
'你的榛子雲appSecret'
);
|
4) 發送驗證碼短信
zhenzisms.client.sendCode(
function
(res) {
wx.showToast({
title: res.data.data,
icon:
'none'
,
duration: 2000
})
}, that.data.phone,
'驗證碼為:{code}'
,
''
, 60 * 5, 4);
|
參數1:請求后的用於接收返回結果的回調函數
參數number:接收者手機號碼
參數3:短信模板，其中{code}為驗證碼占位符，會自動替換
參數messageId:該條信息的唯一標識，可用於查詢
參數seconds:驗證碼有效期，單位是秒
參數length:驗證碼長度，比如4位或6位
返回結果是json格式的字符串, code: 發送狀態，0為成功。非0為發送失敗，可從data中查看錯誤信息
當然，你也可以使用雲函數版的，請參考文檔: http://smsow.zhenzikj.com/doc/weixinmp_yun_sdk_doc2.html