思路：

先寫wxml頁面，有兩個輸入，分別為phone和code；有兩個按鈕，分別為獲取驗證碼和驗證登錄。對用戶輸入的phone進行驗證，格式正確則調用云函數發送驗證碼給手機號；用戶輸入code和testcode進行比較，全等則登錄成功，跳轉頁面。

testcode通過隨機數函數生成，保存在testcode全局變量里。phone和testcode傳給云函數，實現發送短信。code為用戶輸入驗證碼，code===testcode則登錄成功，跳轉頁面。

具體代碼：

<view class="loginForm"><text>請輸入手機號</text><input type="text" bindinput="getPhoneNumber"></input><text>請輸入驗證碼</text><input type="text" bindinput="getCode"></input><button type="primary" bindtap="sendCode">發送短信驗證碼</button><button type="warn" bindtap="loginTest">驗證登錄</button> </view> // 定義手機號 let phone = '' // 定義用戶輸入驗證碼 let code = '' // 定義系統生成驗證碼 let testcode = '' Page({data: {},onLoad() {},// 獲取用戶輸入手機號getPhoneNumber(event) {phone = event.detail.value},// 獲取用戶輸入驗證碼getCode(event) {code = event.detail.value},sendCode() {// testcode為生成的驗證碼，調用generateMixed函數，獲取驗證碼保存到testcode中testcode = this.generateMixed(6);console.log('生成隨機驗證碼為：', testcode)console.log('用戶手機號為：', phone)// 對phone進行驗證if (!(/^1[34578]\d{9}$/.test(phone))) {wx.showToast({icon: 'none',title: '請輸入正確的11位手機號',})return}//phone符合格式，調用云函數wx.cloud.callFunction({name: "sendSms",data: {phone: phone,code: code}}).then(res => {//未開通靜態網站功能，短信暫時無法發送console.log('success', res)}).catch(err => {console.log('error', err)})},loginTest() {if (code === testcode) {wx.showToast({title: '登錄成功',})wx.navigateTo({url: '../index/index',})} else {wx.showToast({icon: 'none',title: '驗證碼有誤',})}},//生成隨機驗證碼并返回resgenerateMixed(n) {let chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'L', 'I','J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];let res = '';for (var i = 0; i < n; i++) {var id = Math.ceil(Math.random() * 35);res += chars[id];}return res;}})

云函數：

const cloud = require('wx-server-sdk') cloud.init({env: cloud.DYNAMIC_CURRENT_ENV, }) exports.main = async (event, context) => {try {const result = await cloud.openapi.cloudbase.sendSms({"env": '輸入自己的環境ID',content: '驗證碼為：' + event.testcode,"phoneNumberList": ["+86" + event.phone],})return result} catch (err) {return err} }

效果：

總結

以上是生活随笔為你收集整理的微信小程序实现短信登录-云开发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。