本章用到……uni-app页面跳转uni.navigateTo方法、uni.navigateBack方法。uni-app简单实现邮箱验证码发送点击后读秒样式。登录账号、密码正则表达式验证等

适合刚入门的小伙伴，大佬就没必要看了

静态页面！静态页面！没有绑定后端数据接口

目录

一、HBuilderX下载

二、创建uni-app项目

pages.json配置文件

三、登录页面

login.vue页面

login.css文件

四、手机短信验证页面

phoneVerify.vue页面

phoneVerify.css文件

五、找回密码页面

findBack.vue页面

findBack.css文件

六、邮箱找回密码页面

mailFandBack.vue页面

mailFandBack.css文件

七、邮箱发送验证成功页面

emailFinish.vue页面

emailFinish.css文件

一、HBuilderX下载

https://dcloud.io/hbuilderx.html

官网直接下载解压即可

二、创建uni-app项目

文件-新建-项目

我这里直接选择默认模板，Vue版本、uniCloud自行选择即可

创建完成后自动生成文件夹

文件名这里自动生成原本是index，文件名自行定义即可

页面文件自己新建Vue文件即可

pages.json配置文件

注意！！这个文件后续如果需要新添加新页面时这个文件里一定要配置参数不然页面出不来，代码格式看下面代码↓↓↓↓↓↓↓↓↓

{// 设置单页面"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages{"path": "pages/login/login","style": {// 设置顶部导航栏"navigationBarTitleText": "","navigationBarBackgroundColor": "#FFFFFF"}},{"path": "pages/login/findBack","style": {"navigationBarTitleText": "找回密码"}},{"path": "pages/login/mailFindBack","style": {"navigationBarTitleText": "邮箱找回密码"}},{"path": "pages/login/phoneVerify","style": {"navigationBarTitleText": "","navigationBarBackgroundColor": "#FFFFFF"}},{"path": "pages/login/emailFinish","style": {"navigationBarTitleText": ""}}{//新添加的Vue页面配置！！！"path": "","style": {"navigationBarTitleText": ""}}],// 设置全部页面"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"},"uniIdRouter": {},// 设置底部导航栏"tabBar": {}}

类似navigationBarTitleText（导航栏text）、navigationBarBackgroundColor（导航栏背景色）等等属性可以查看相关资料自行配置即可

pages里设置单页面参数，每个页面配置对应path路径参数

globalStyle里设置全局页面参数

js、josn、scss文件等等其他配置文件这里就不多说了自行研究吧！！！因为我也还没搞清楚到底怎么用哈哈哈

进入正题↓↓↓↓↓↓↓↓↓↓↓↓↓代码看着有些乱……..凑合看慢慢理解吧

代码里的src图片链接自行修改！！！！（还有css里的URL）

三、登录页面

先看一下效果图

login.vue页面

手机号登录账号登录 <!-- 获取验证码 --> 获取验证码 重新发送({{count}}s) 下一步下一步export default {components: {},data() {return {email:'',//邮箱btnShow:false,//判断登录按钮显示隐藏timeOut:null,//添加定时器};},methods: {// 判断显示下一步按钮onInput() {this.timeOut && clearTimeout(this.timeOut)this.timeOut = setTimeout(() => {if (this.email) {this.btnShow = true;} else {this.btnShow = false;}}, 100);},// 点击下一步onSubmit(){if(!this.email){uni.showToast({title: '请输入邮箱',icon: 'none',});return;}const email= /^\w{3,}@\w{2,}\.(com|cn|net|com\.cn)$/;if(!email.test(this.email)){uni.showToast({title: '邮箱输入不正确',icon: 'none',});return;}uni.showToast({title: '请稍后...',icon: 'loading',});// 添加定时器延时跳转页面setTimeout(function(){uni.navigateTo({url: '/pages/login/emailFinish'});},2000) }},};@import"../../style/css/mailFindBack.css";

mailFandBack.css文件

/************************************************************** 全局样式 **************************************************************/html {font-size: 16px;}body {margin: 0;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans','Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}view,image,text {box-sizing: border-box;flex-shrink: 0;}#app {width: 100vw;height: 100vh;}.flex-row {display: flex;flex-direction: row;}.flex-col {display: flex;flex-direction: column;}.justify-start {justify-content: flex-start;}.justify-end {justify-content: flex-end;}.justify-center {justify-content: center;}.justify-between {justify-content: space-between;}.justify-around {justify-content: space-around;}.justify-evenly {justify-content: space-evenly;}.items-start {align-items: flex-start;}.items-end {align-items: flex-end;}.items-center {align-items: center;}.items-baseline {align-items: baseline;}.items-stretch {align-items: stretch;}.self-start {align-self: flex-start;}.self-end {align-self: flex-end;}.self-center {align-self: center;}.self-baseline {align-self: baseline;}.self-stretch {align-self: stretch;}.flex-1 {flex: 1 1 0%;}.flex-auto {flex: 1 1 auto;}.grow {flex-grow: 1;}.grow-0 {flex-grow: 0;}.shrink {flex-shrink: 1;}.shrink-0 {flex-shrink: 0;}.relative {position: relative;}/* ------------------------------------------------------------------------------ */.group {padding: 25px 40px 127px;overflow-y: auto;}.text_2 {color: #020202;font-size: 20px;font-family: 'PingFang SC';line-height: 28px;}.font_1 {font-size: 15px;font-family: 'PingFang SC';line-height: 21px;}.text_3 {margin-top: 42px;margin-bottom: 12px;color: #999999;}/* .section {margin-top: 12px;background-color: #888888;height: 1px;} */.button {margin-top: 324px;padding: 8px 0 11px;/* background-color: #166bf880; */background-image: url('。。。。。。。。。。。。');background-size: 100% 100%;background-repeat: no-repeat;border-radius: 5px;}.text_4 {color: #ffffff;}/*下一步按钮2*/.button2 button{width: 100%;margin-top: 324px;padding: 8px 0 11px;background-color: #166bf880;border-radius: 5px;line-height: 21px;font-size: 15px;}.text_66 {color: #ffffff;}

七、邮箱发送验证成功页面

效果图：

emailFinish.vue页面

请访问邮件中给出的网页链接地址，根据页面提示完成密码重设。确定export default {components: {},data() {return {};},methods: {// 点击确定返回上一页Back(){ // 返回到上一个页面uni.navigateBack({delta:1,//返回层数，2则上上页，默认delta:1})},},};@import"../../style/css/emailFinish.css";

点击返回上一页面可以用uni.navigateBack方法

点击跳转到指定页面可以用uni.navigateTo方法（因为都属于跳转页面也可以用这个方法返回上一页自行理解吧）

大概长这样：

emailFinish.css文件

/************************************************************** 全局样式 **************************************************************/html {font-size: 16px;}body {margin: 0;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans','Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}view,image,text {box-sizing: border-box;flex-shrink: 0;}#app {width: 100vw;height: 100vh;}.flex-row {display: flex;flex-direction: row;}.flex-col {display: flex;flex-direction: column;}.justify-start {justify-content: flex-start;}.justify-end {justify-content: flex-end;}.justify-center {justify-content: center;}.justify-between {justify-content: space-between;}.justify-around {justify-content: space-around;}.justify-evenly {justify-content: space-evenly;}.items-start {align-items: flex-start;}.items-end {align-items: flex-end;}.items-center {align-items: center;}.items-baseline {align-items: baseline;}.items-stretch {align-items: stretch;}.self-start {align-self: flex-start;}.self-end {align-self: flex-end;}.self-center {align-self: center;}.self-baseline {align-self: baseline;}.self-stretch {align-self: stretch;}.flex-1 {flex: 1 1 0%;}.flex-auto {flex: 1 1 auto;}.grow {flex-grow: 1;}.grow-0 {flex-grow: 0;}.shrink {flex-shrink: 1;}.shrink-0 {flex-shrink: 0;}.relative {position: relative;}/* ------------------------------------------------------------------------------ */.group {padding: 25px 40px 127px;overflow-y: auto;}.text_2 {color: #020202;font-size: 20px;font-family: 'PingFang SC';line-height: 28px;}.font_1 {font-size: 15px;font-family: 'PingFang SC';line-height: 21px;}.text_3 {margin-top: 42px;margin-bottom: 12px;color: #999999;}/* .section {margin-top: 12px;background-color: #888888;height: 1px;} */.button {margin-top: 324px;padding: 8px 0 11px;/* background-color: #166bf880; */background-image: url('。。。。。。。。。。。。。。。');background-size: 100% 100%;background-repeat: no-repeat;border-radius: 5px;}.text_4 {color: #ffffff;}/*下一步按钮2*/.button2 button{width: 100%;margin-top: 324px;padding: 8px 0 11px;background-color: #166bf880;border-radius: 5px;line-height: 21px;font-size: 15px;}.text_66 {color: #ffffff;}

本章也是自己参考相关资料和各位大佬的文章自行整理仅供参考，希望可以帮助到和我一样菜鸡的小伙伴

参考资料：

https://blog.csdn.net/weixin_40614372/article/details/101537653

uni-app官网：

https://uniapp.dcloud.net.cn/component/

登录页面完成后我用的是Strophe.js对接Openfire的接口，然后把Strophe.js的用法加到↑本文的登录页里使用

链接：

基于XMPP服务的Strophe.js用法_和风微凉的博客-CSDN博客