微信小程式 簡訊驗證 功能的實現(附案例程式碼/前後端/直接用)
模組效果展示(小程式介面)
實現的功能
小程式端:
- 請求獲取簡訊驗證碼
- 兩次請求之間間隔至少一分鐘
- 填寫必填內容後,才能提交表單
- 手機號合法性檢驗
後臺:
- 接前臺請求後,通過阿里雲傳送簡訊
- 生成隨機數字驗證碼(預設6位)
- 收到提交的表單後,對驗證碼欄位進行判斷
- 驗證碼是否過期
- 驗證碼是否正確
- 通過驗證後,方能進行下一步操作
- 如儲存表單資訊至資料庫等
- 結果反饋
說明
- 專案包含前後端程式碼,可以直接用,並新增自己想要的功能
- 使用阿里雲的簡訊服務,具體配置見倉庫說明
- 手機號合法性驗證部分,為了讓程式碼長期可用,沒有針對現行號段進行詳細檢測,而是隻進行了粗略的檢測
- 其實就是,不參照現有號段資訊,對第二位以後進行詳細判斷,防止新號段出現後誤報錯
- 主要通過input來限制填入型別(number),以及檢測第一位號碼數字
專案程式碼
相關推薦
微信小程式 簡訊驗證 功能的實現(附案例程式碼/前後端/直接用)
模組效果展示(小程式介面) 實現的功能 小程式端: 請求獲取簡訊驗證碼 兩次請求之間間隔至少一分鐘 填寫必填內容後,才能提交表單 手機號合法性檢驗 後臺: 接前臺請求後,
微信小程式 蒐藏功能實現(八)
搜尋功能用到了小程式的快取功能:wx.setStorage 如果沒有向用戶提供removeStorageSync或clearStorageSync,小程式的快取永久存在,沒有失效期,快取的最大不超過10MB 四類操作,八種方法: setStorage,getStorage
微信小程式發紅包功能實現,附效果圖加講解。
有問題可以掃碼加我微信,有償解決問題。承接小程式開發。 微信小程式開發交流qq群 173683895 、 526474645 ; 正文: 目前此功能尚在內測,無法申請。此博文僅示例。 流
微信小程式之下拉列表實現(附完整原始碼)
目錄 一、效果圖 二、實現原理 三、原始碼 四、專案下載 同類文章推薦: 更多幹貨關注公眾號: 一、效果圖 二、實現原理 跟網頁的下拉列表實現是一樣的,剛剛開始預設下拉的內容的是不顯示的(display:none),然後通過點選的時
微信小程式簡訊驗證碼,小程式怎麼開通簡訊驗證碼
微信小程式可以通過 , 獲取使用者繫結手機號時, 傳送一條簡訊驗證碼。 但是在實際業務中, 你的小程式會有更多地方使用到簡訊驗證碼功能… 一、 小程式簡訊驗證碼作用 下面的場景, 會經常用到手機
微信小程式----簡訊驗證碼倒計時外掛
效果圖 JS // 倒計時外掛 class CountTime { constructor(page) { this.page = page; this.time =
微信小程式 評論留言功能實現 仿知乎
最近沉迷學習無法自拔,太久沒有碼字,碼一個小程式留言功能實現。先上一波最後效果圖: (刪除按鈕,是使用者自己的留言時才會顯示該按鈕) 實現技術 後臺:SSM框架 資料庫:MySQL資料庫 資料庫設計 評論功能的實現主要涉及三個表 comment:
微信小程式-簡訊驗證碼
// pages/info-two/info-two.jsPage({ /** * 頁面的初始資料 */ data: { send: false, alreadySend: false, second: 60, disabled: true, buttonType:
微信小程式五星評價功能實現
實現五星評價功能,效果圖如下: .wxml檔案: <view class="star-title">1、品質效果</view> <view class="star
微信小程式自定義元件TabLayout(類似於今日頭條的滑動選單)
有了安卓開發經驗,自定義微信小程式元件簡直易如反掌。 自定義微信小程式的步驟如下: 建立四個檔案 分別是邏輯控制js,配置檔案json,佈局檔案wxml,樣式檔案wxss。 配置檔案.json的編寫 component引數:說明這個資料
微信小程式之傳送模板訊息(通過openid推送訊息給使用者)
一、獲取access_token access_token是介面呼叫的憑證,目前有效期為兩個小時,需要定時重新整理,重複獲取將導致上次獲取的access_token失效。(注:不建議每次呼叫需要acc
微信小程式+WEB使用JS實現註冊【60s】倒計時功能
微信小程式+WEB使用JS實現註冊【60s】倒計時功能開發步驟: 1、效果圖: 2、頁面僅僅利用了JS的相關功能,包含:wxml、js、wxss 2.1wxml頁面程式碼: <text
微信小程式 右上角分享功能的實現
微信小程式前段時間開放了小程式右上角的分享功能, 可以分享任意一個頁面到好友或者群聊, 但是目前小程式不可以分享到朋友圈onShareAppMessage(options)在 Page 中定義 onShareAppMessage 函式,設定該頁面的轉發資訊。只有定
微信小程式開發之radio實現顯示和隱藏功能
我們在開發微信小程式的時候,經常會用到顯示和隱藏,但是我們知道在微信小程式裡面是不是能 使用dom操作的,話不多說,直接上程式碼 第一步.直接在wxml,首先在要選擇的按鈕上註冊一個bindtap事件如下圖 第二步.在js中的pages下的data中新增 showView
使用微信小程式自定義元件實現的tabs選項卡功能
一個自定義元件由 json wxml wxss js 4個檔案組成。要編寫一個自定義元件,首先需要在 json 檔案中進行自定義元件宣告(將 component 欄位設為 true 可這一組檔案設為自定義元件) components/navigator/i
微信小程式-template使用:實現購物車商品數量加減功能
前言上一篇我們實現了購物車功能,裡面有用到template模板功能來實現購物車商品數量加減和價格計算功能,可能篇幅過長介紹的並不清楚,本篇將詳細介紹一下template模板來減少冗餘程式碼。模板WXML提供模板(template),可以在模板中定義程式碼片段,然後在不同的地方
微信小程式(看文件寫例項十)微信小程式課堂寶APP實現我的模組相關介面及邏輯
繼上篇博文,這篇完成最後一個模組,即我的模組。 一、頁面效果 這個模組是和使用者型別相關的,因此老師賬號和學生賬號能看的功能不一樣,老師端效果如下: 點選頭像到達個人資訊如下: 點選後可以做相應的修改。學生端的介面如下: 修改密碼的頁面如下: &nbs
微信小程式(看文件寫例項八)微信小程式課堂寶APP實現練習模組前臺
接上篇博文,這篇主要描述練習模組的前臺顯示,其中包括test頁面,答題detail頁面以及提交答題後答卷answer頁面。 一、練習模組test頁面 練習頁面主要展示的是當前使用者的頭像,暱稱以及學校資訊,另外還有答題資訊,以及每個章節的練習資訊,先來看看效果: grid用的是樣式
微信小程式(看文件寫例項七)微信小程式課堂寶APP實現線上課堂測試
接著上篇博文已經完成簽到功能,這篇來完成課堂測試功能。 一、需求描述 1、在後臺選擇題、主觀題表中上傳測試題 2、客戶端獲取題目資訊 3、把題目資訊格式化載入顯示 4、客戶端答題,主觀題每題能上傳一張答題圖片 5、客戶端答題結束提交到伺服器 二、前臺頁面 提交大量資料
微信小程式(看文件寫例項六)微信小程式課堂寶APP實現簽到邏輯
繼上篇博文,這篇寫下籤到實現的邏輯。 一、實現邏輯 發起簽到 1、先上傳當前自己的定位經緯度 2、學生查詢老師的最後一次簽到記錄,如果發現簽到記錄signComplete為false說明有新的簽到 3、得到簽到的第幾次課 4、系統獲得學生的定位經緯度 5、判斷兩點經緯度轉