1.在云之訊官網(wǎng)注冊(cè)并登錄?云通訊平臺(tái)_短信、語(yǔ)音驗(yàn)證碼_云呼叫中心等服務(wù)平臺(tái)【云之訊】

2.進(jìn)行企業(yè)認(rèn)證

?

?3.將紅框子里的東西發(fā)給后端讓他們?nèi)ヅ渲?#xff08;或者你們后端人好的話他直接登錄自己去復(fù)制）

?

?4.創(chuàng)建模板，將模板id發(fā)給后端（審核超快的，一定要對(duì)照好文檔里的param,如果后端配置的是兩項(xiàng)，模板就要有兩個(gè)變量，第一個(gè)是公司名稱(chēng)，第二個(gè)是失效時(shí)間）

?

5.直接接后端給的接口，前端的邏輯是點(diǎn)擊發(fā)送驗(yàn)證碼，然后開(kāi)始讀秒（60s）如果60沒(méi)結(jié)束那就不能再次點(diǎn)擊，直到倒計(jì)時(shí)結(jié)束后可以再次獲取，代碼在下面

html:

<template><view class="container"><view class="title">短信驗(yàn)證碼登錄</view><view class="login-form-container"><u-form labelPosition="left" :model="loginForm" ref="form1" labelWidth="60"><u-form-item label="手機(jī)號(hào)" prop="loginForm.phoneNum" borderBottom ><u-input v-model="loginForm.phoneNum" border="none" :placeholder="placeholder.tipsOne"> </u-input></u-form-item><u-form-item label="驗(yàn)證碼" prop="loginForm.verificationCode" borderBottom ><u-input v-model="loginForm.verificationCode" border="none" :placeholder="placeholder.tipsTwo"></u-input><u-button slot="right" type="success" class="custom-style" :color="(oneMin>0&&oneMin<59)?'#666666':'#8D4E22'" size="normal" @click="getCode">{{codeTips}}</u-button></u-form-item></u-form></view><view class="login" @click="submit">登錄</view><u-toast ref="loginToast"></u-toast></view> </template>

js:

//獲取驗(yàn)證碼getCode() {if (!this.loginForm.phoneNum) {this.$refs.loginToast.show({message: '請(qǐng)輸入手機(jī)號(hào)',type: 'warning',position: 'top'})return}let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);if (!checkPhone.test(this.loginForm.phoneNum)) {this.$refs.loginToast.show({message: '請(qǐng)輸入正確的手機(jī)號(hào)',type: 'warning',position:'top'});return}if(this.oneMin<60&&this.oneMin>0){uni.showToast({title:`請(qǐng)${this.oneMin}s后重新獲取`,icon:'none'})return}let data = {password: '',phone: this.loginForm.phoneNum,userName: ''}let clock = setInterval(() => {this.oneMin--this.codeTips = this.oneMinif(this.oneMin<1){clearInterval(clock)this.oneMin = "獲取驗(yàn)證碼"}}, 1000)loginReq.sendSms(data).then(res => {console.log("獲取到的驗(yàn)證碼", res)}).catch(err => {this.oneMin = "重新發(fā)送"uni.showToast({title: '發(fā)送驗(yàn)證碼失敗',icon: 'none'})})},

6.登錄的階段沒(méi)啥寫(xiě)的就是判斷驗(yàn)證碼和手機(jī)號(hào)不為空后去掉接口

7.界面圖

?

?

?

?

總結(jié)

以上是生活随笔為你收集整理的uni-app实现验证码登录-云之讯的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。