uniapp實(shí)現(xiàn)注冊發(fā)送獲取驗(yàn)證碼功能

更新時間：2022年11月10日 09:59:54 作者：李現(xiàn)分現(xiàn)

隨著網(wǎng)絡(luò)的發(fā)達(dá),總會有人惡意注冊網(wǎng)站,而使用輸入驗(yàn)證碼功能可以有效的阻止這一類現(xiàn)象的發(fā)生,下面這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)注冊發(fā)送獲取驗(yàn)證碼功能的相關(guān)資料,需要的朋友可以參考下

說明

驗(yàn)證碼服務(wù)可自行去申請，不過好像是要企業(yè)才能申請，這里

結(jié)合uview組件庫+mockjs在本地實(shí)現(xiàn)發(fā)送并獲取驗(yàn)證碼

配置

驗(yàn)證碼組件u-verification-code官網(wǎng)不再維護(hù)，但不影響使用可在uniapp直接配置。

點(diǎn)擊這里下載

在項(xiàng)目pages.json文件中配置好路徑

"easycom": {
		"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
	},

mockjs使用

根目錄創(chuàng)建mock文件夾，分別創(chuàng)建mock/index.js,mock/code.json

index.js

import Mock from 'mockjs'
import code from './code.json'
Mock.mock('/mock/code',{code:200,data:code,msg:"獲取驗(yàn)證碼成功"})

code.json

[
  "1234","4553","2346","9765","4567","4589","0087","4538","8796"
]

封裝axios，創(chuàng)建請求api

根目錄下創(chuàng)建utils

utils/mockRequest.js

import axios from '@/js_sdk/gangdiedao-uni-axios'
//根據(jù)自身情況引入axios

// 創(chuàng)建自定義接口服務(wù)實(shí)例
const http = axios.create({
	baseURL: '/mock',//根據(jù)個人后端情況，修改此處baseURL
	timeout: 6000, // 不可超過 manifest.json 中配置 networkTimeout的超時時間
	withCredentials: true,
	headers: {
		'Content-Type': 'application/json',
		//'X-Requested-With': 'XMLHttpRequest',
	},
})

// 攔截器 在請求之前攔截   添加token
http.interceptors.request.use(config => {
	//請求前有關(guān)處理邏輯
	return config
})
// 響應(yīng)后的攔截
http.interceptors.response.use(response => {
    //響應(yīng)攔截處理邏輯
	return response;
}, error => {
	
	return Promise.reject(error.message)
})

export default http

根目錄創(chuàng)建api文件夾

api/index.js

import mockRequest from '@/utils/mockRequest.js'

//驗(yàn)證碼
export const getCode = () => mockRequest.get('/code')

main.js注冊全局api

import * as API from '@/api/index.js'
Vue.prototype.$API = API

前端調(diào)用

template

<u-input style="width: 300rpx" v-model="code" placeholder="請輸入驗(yàn)證碼" />
<view class="bd-primary xs orange br60 flex row-center" @click="sendSmsFun" hover-class="none">
  <!-- 獲取驗(yàn)證碼 -->
  <u-verification-code unique-key="register" ref="uCode" @change="codeChange">
  </u-verification-code>
  <view class="xs">{{codeTips}}</view>
</view>

script

async sendSmsFun() {
        // if (!this.$refs.uCode.canGetCode) return
        if (!this.registerForm.mobilePhoneNumber) {
          this.$common.errorToShow('請?zhí)顚懯謾C(jī)號信息～');
          return;
        }
        console.log("111");
        const {
          data: res
        } = await this.$API.getCode()
        console.log(res);
        if (res.code == 200) {
          this.$common.successToShow(res.msg)
          this.$refs.uCode.start();
          //獲取隨機(jī)驗(yàn)證碼
          var random = Math.floor(Math.random() * 9)
          this.code = res.data[random]
        }
      },

codeChange(tip) {
        this.codeTips = tip
      },