uniapp实现注册发送获取验证码功能
说明
验证码服务可自行去申请,不过好像是要企业才能申请,这里
结合uview组件库+mockjs在本地实现发送并获取验证码
配置
验证码组件u-verification-code官网不再维护,但不影响使用可在uniapp直接配置。
在项目pages.json文件中配置好路径
"easycom": { "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue" },
mockjs使用
根目录创建mock文件夹,分别创建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:"获取验证码成功"})
code.json
[ "1234","4553","2346","9765","4567","4589","0087","4538","8796" ]
封装axios,创建请求api
根目录下创建utils
utils/mockRequest.js
import axios from '@/js_sdk/gangdiedao-uni-axios' //根据自身情况引入axios // 创建自定义接口服务实例 const http = axios.create({ baseURL: '/mock',//根据个人后端情况,修改此处baseURL timeout: 6000, // 不可超过 manifest.json 中配置 networkTimeout的超时时间 withCredentials: true, headers: { 'Content-Type': 'application/json', //'X-Requested-With': 'XMLHttpRequest', }, }) // 拦截器 在请求之前拦截 添加token http.interceptors.request.use(config => { //请求前有关处理逻辑 return config }) // 响应后的拦截 http.interceptors.response.use(response => { //响应拦截处理逻辑 return response; }, error => { return Promise.reject(error.message) }) export default http
根目录创建api文件夹
api/index.js
import mockRequest from '@/utils/mockRequest.js' //验证码 export const getCode = () => mockRequest.get('/code')
main.js注册全局api
import * as API from '@/api/index.js' Vue.prototype.$API = API
前端调用
template
<u-input style="width: 300rpx" v-model="code" placeholder="请输入验证码" /> <view class="bd-primary xs orange br60 flex row-center" @click="sendSmsFun" hover-class="none"> <!-- 获取验证码 --> <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('请填写手机号信息~'); 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(); //获取随机验证码 var random = Math.floor(Math.random() * 9) this.code = res.data[random] } }, codeChange(tip) { this.codeTips = tip },
效果
总结
到此这篇关于uniapp实现注册发送获取验证码功能的文章就介绍到这了,更多相关uniapp发送获取验证码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
function, new function, new Function之间的区别
function, new function, new Function之间的区别...2007-03-03javascript中定义变量const和var有什么区别详解
这篇文章主要给大家介绍了关于javascript中定义变量const和var有什么区别的相关资料,在JavaScript中var和const都是用于声明变量的关键字,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-03-03JavaScript中创建字典对象(dictionary)实例
这篇文章主要介绍了JavaScript中创建字典对象(dictionary)实例,本文直接给出了实现的源码,并给出了使用示例,需要的朋友可以参考下2015-03-03
最新评论