当前位置: 首页 > news >正文

微信小程序(四十六)登入界面-进阶版

注释很详细,直接上代码

上一篇

此文使用了vant组件库,没有安装配置的可以参考此篇vant组件的安装与配置

新增内容:
1.手机号与验证码格式验证
2.验证码的网络申请和校验

wechat-http模块在好几篇以前已经讲了咋安装的,不记得的友友自己从我的专栏里找一下


这里相较于上一篇需要安装模块wechat-validate
终端输入npm install wechat-validate

在这里插入图片描述
安装成功以后不要忘记构建npm

在这里插入图片描述

出现xxx不在以下 request 合法域名列表中报错的看这篇
微信小程序:xxx不在以下 request 合法域名列表中

源码:

app.json

{"usingComponents": {"van-field": "@vant/weapp/field/index","van-count-down": "@vant/weapp/count-down/index","van-button": "@vant/weapp/button/index"},"pages": ["pages/index/index","pages/logs/logs"],"window": {"navigationBarTextStyle": "black","navigationBarTitleText": "Weixin","navigationBarBackgroundColor": "#ffffff"},"componentFramework": "glass-easel","sitemapLocation": "sitemap.json","lazyCodeLoading": "requiredComponents"
}

app.js

App({globalData:{//定义全局变量token:wx.getStorageSync('token')//如此实现token初始化从内存中读取,也可以用下面注释的内容进行初始化},
//  onLaunch: function () {
//   // 在 onLaunch 生命周期回调函数中获取本地存储中的 token 值
//   const token = wx.getStorageSync('token');//   if (token) {
//     this.globalData.token = token;
//     console.log("0."+this.globalData.token)
//   } else {//     // 如果本地存储中不存在 token 的值,可以设置一个默认值或采取其他处理方式
//     this.globalData.token = '';
//   }
// }
})

index.wxml

<view class="login-header"><view class="label">用户登入</view>
</view>
<view class="login-form"><van-cell-group><!--  1.type 控制弹出手机键盘的类型2.maxlength 控制最大长度3.use-slot 使用插槽4.placeholder-style 占位内容样式5.model:value 双向绑定--><van-field model:value="{{mobile}}" placeholder="请输入手机号码" type="number" maxlength="{{11}}" use-slot placeholder-style="color: #999999;"><!-- slot在官方文档里面有几个特定的类型,可以自己找来康康 --><view wx:if="{{!countDownVisble}}" slot="button"><van-button size="small" type="primary" bind:tap="sendCode">发送验证码</van-button></view><!-- 稍微调整一下文字位置 --><view slot="right-icon" wx:else style="margin-top: -20rpx;"><!-- 倒计时组件 --><!-- 1. time计时时常单位毫秒2.bind:change时间变化触发--><van-count-down use-slot time="{{60*1000}}" bind:change="countDownChange"><text style="color: #999999; ">{{timeData.seconds}}秒后重新获取</text></van-count-down></view></van-field><van-field model:value="{{code}}" placeholder="请输入6位数验证码" maxlength="{{6}}" placeholder-style="color:#999999" /></van-cell-group><view class="login-tip">未注册的手机号验证后将自动注册</view>
</view><!-- 在行内写样式,如果在css文件里要提高权值才行 -->
<button size="mini" style="margin:30rpx 0 0 300rpx; background-color: palegreen; padding: 0 50rpx;" bind:tap="onSubmit">登入</button>

index.wxss

.label{font: 1em SimHei;font-size: 50rpx;margin: 60rpx 0 50rpx 30rpx;
}.login-tip{margin: 20rpx 0 90rpx 30rpx;color: #dadada;font-size: 27rpx;
}

index.js

//导入http包
const { default: http } = require("wechat-http")// 在页面或组件中导入表单验证
import validate from 'wechat-validate'//设置基本网站地址
http.baseURL='https://live-api.itheima.net'Page({// 通过 behaviors 注入 validate 方法behaviors: [validate],data:{countDownVisble:false,//是否显示倒计时timeData: {},//时间数据mobile:'',//用于输入框手机号双向绑定code:''//用于输入框验证码双向绑定},// 定义表单数据的验证规则rules: {mobile: [// required 是否要求必填,message 未填提醒{ required: true, message: '请填写手机号码!' },//pattern 正则校验,message 格式不符提醒{ pattern: /^1[3-9]\d{9}$/, message: '请检查手机号码是否正确!' },],code: [{ required: true, message: '请填写短信验证码!' },{ pattern: /^\d{6}$/, message: '请检查短信验证码是否正确!' }]},//发送验证码(自带一个加载提示框)async sendCode(){//校验电话号码const {valid,message}=this.validate('mobile')//校验成功if(valid){this.setData({countDownVisble:true//出现倒计时})//发出post网络请求(上传手机号)const res=await http.get('/code',{mobile:this.data.mobile})//在控制台打印返回的验证码(因为这只是虚拟的验证码所以并不是通过短信返回)console.log("验证码为:"+res.data.data.code)}else{//电话号码验证失败wx.showToast({title:message,//按之前设定的规则出现提示icon:'none'})}},//验证验证码async onSubmit(){//校验短信验证码格式const {valid,message}=this.validate('code')//校验成功if(valid){//解析获取数据const  {mobile,code}=this.data//上传手机号和验证码进行验证const res= await http.post('/login',{mobile,code})//console.log(res.data.code)//验证成功if(res.data.code===10000){const app=getApp()//console.log('1.'+app.globalData.token)app.globalData.token=res.data.data.token//console.log('2.'+app.globalData.token)wx.setStorageSync('token', app.globalData.token)wx.showToast({title: '登入成功!',icon:"none"})//跳转到log页面(模拟一下登入成功后的跳转)wx.redirectTo({url:'/pages/logs/logs'})}else{//这里其实也可以用拦截器,拦截器之前示范过了,这里为方便手动判断一下wx.showToast({title: '验证码错误!',icon:"none"})}}else{wx.showToast({title:message,icon:'none'})}},//倒计时变化countDownChange(ev){//console.log(ev)this.setData({//倒计时组件数据timeData:ev.detail,//倒计时是否显示判断countDownVisble:ev.detail.minutes===1||ev.detail.seconds>0})}
})

效果演示:(这里会有意演示一下格式不标准会导致的情况)

在这里插入图片描述

相关文章:

微信小程序(四十六)登入界面-进阶版

注释很详细&#xff0c;直接上代码 上一篇 此文使用了vant组件库&#xff0c;没有安装配置的可以参考此篇vant组件的安装与配置 新增内容&#xff1a; 1.手机号与验证码格式验证 2.验证码的网络申请和校验 wechat-http模块在好几篇以前已经讲了咋安装的&#xff0c;不记得的友…...

CSP-201712-2-游戏

CSP-201712-2-游戏 解题思路 初始化变量&#xff1a;定义整数变量n和k&#xff0c;分别用来存储小朋友的总数和淘汰的特定数字。然后定义了num&#xff08;用来记录当前报的数&#xff09;和peopleIndex&#xff08;用来记录当前报数的小朋友的索引&#xff09;。 初始化小朋…...

记录SSM项目集成Spring Security 4.X版本 之 加密验证和记住我功能

目录 前言 一、用户登录密码加密认证 二、记住我功能 前言 本次笔记的记录是接SSM项目集成Spring Security 4.X版本 之 加入DWZ,J-UI框架实现登录和主页菜单显示-CSDN博客https://blog.csdn.net/u011529483/article/details/136255768?spm1001.2014.3001.5502 文章之后补…...

[AutoSar]BSW_Com09 CAN driver 模块FULL(BASIC)CAN、FIFO选择

目录 关键词平台说明一、FULL CAN 和Basic CAN 关键词 嵌入式、C语言、autosar、OS、BSW 平台说明 项目ValueOSautosar OSautosar厂商vector &#xff0c;芯片厂商TI 英飞凌编程语言C&#xff0c;C编译器HighTec (GCC)autosar版本4.3.1 >>>>>回到总目录<&…...

WPF真入门教程30--顺风物流单据管理系统

1、教程回顾 到现在为止&#xff0c;真入门系列教程已完成了29刺由浅入深地讲解&#xff0c;当然不可能讲到了WPF的所有技能点&#xff0c;但读者看到了wpf的内部各种功能及之间的联系&#xff0c;在此基础上&#xff0c;提供一个完整有效的综合项目&#xff0c;本项目采用的是…...

Elasticsearch:向量相似度计算 - 可笑的速度

作者&#xff1a;Chris Hegarty 任何向量数据库的核心都是距离函数&#xff0c;它确定两个向量的接近程度。 这些距离函数在索引和搜索期间执行多次。 当合并段或在图表中导航最近邻居时&#xff0c;大部分执行时间都花在比较向量的相似性上。 对这些距离函数进行微观优化是值…...

两数相加的问题

题目是&#xff1a;给两个非空的链表&#xff0c;表示两个非负整数。它们每位数都是按照逆序的方式存储&#xff0c;并且每一个节点只能存储一位数字。现在两个数相加&#xff0c;并且以相同的形式返回一个表示和的链表。 首先回顾一下&#xff0c;什么是链表&#xff1f;链表…...

微信小程序的单位

在小程序开发中&#xff0c;rpx是一种相对长度单位&#xff0c;用于在不同设备上实现自适应布局。它是微信小程序特有的单位&#xff0c;表示屏幕宽度的 1/750。 rpx单位的好处在于可以根据设备的屏幕宽度进行自动换算&#xff0c;使得页面在不同设备上保持一致的显示效果。例…...

软考通过率真的低吗?

软考通过率有多少&#xff1f;高项有必要找培训机构吗&#xff1f; 相对来说软考的通过率的确比其他考试要低&#xff0c;因为它的知识点有点杂&#xff0c;专业知识、政策、计算机系统各个方面的知识都需要去掌握。根据以往的数据来说高项&#xff08;信息系统项目管理师&…...

国际视频编解码标准提案下载地址

H.266 相关提案下载地址&#xff1a;http://phenix.it-sudparis.eu/jvet/ 更新的地址&#xff1a;https://jvet-experts.org/ H.265 提案下载地址&#xff1a;http://phenix.int-evry.fr/jct/ 标准文档下载地址&#xff1a;http://www.itu.int/rec/T-REC-H.265 H.264 提案下载…...

程序员是如何看待“祖传代码”的?

文章目录 每日一句正能量前言祖传代码的历史与文化价值祖传代码的技术挑战与机遇祖传代码与现代开发实践的融合祖传代码的管理与维护策略后记 每日一句正能量 黎明时怀着飞扬的心醒来&#xff0c;致谢爱的又一天&#xff0c;正午时沉醉于爱的狂喜中休憩&#xff0c;黄昏时带着感…...

Python爬虫之爬取并下载哔哩哔哩视频

亲自使用过&#xff0c;太好用了 # 导入requests模块&#xff0c;模拟发送请求 import requests # 导入json import json # 导入re import re# 定义请求头 headers {Accept: */*,Accept-Language: en-US,en;q0.5,User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6…...

python 脚本设置输出颜色

在Python脚本中设置输出颜色&#xff0c;通常可以使用colorama库&#xff0c;它可以在Windows、Linux和macOS等平台上工作。colorama库扩展了Python的标准库&#xff0c;使得在控制台输出彩色文本更加简单。 首先&#xff0c;你需要安装colorama库。如果你还没有安装&#xff…...

安卓websocket(客服端和服务端写在app端) 案例

废话不多说直接上代码 首选导入 implementation "org.java-websocket:Java-WebSocket:1.4.0" package com.zx.qnncpds.androidwbsocket;import android.content.Intent; import android.os.Bundle; import android.view.View; import android.widget.Button;import a…...

C++面试宝典第34题:整数反序

题目 给出一个不多于5位的整数, 进行反序处理。要求: 1、求出它是几位数。 2、分别输出每一位数字。仅数字间以空格间隔, 负号与数字之间不需要间隔。如果是负数,负号加在第一个数字之前, 与数字没有空格间隔。注意:最后一个数字后没有空格。 3、按逆序输出各位数字。逆序后…...

微信商城小程序设计

简介 完整实现了集下单、支付、物流、评价、退款等功能的微信商城版小程序以及商城的管理后台&#xff0c;涉及商品的分类、规格的配置&#xff0c;商品上架等等。 产品效果图 项目链接 java后台&#xff1a;mall微信商城: 微信商城小程序。完整实现了集下单、支付、物流、评…...

如何合理布局子图--确定MATLAB的subplot子图位置参数

确定MATLAB的subplot子图位置参数 目录 确定MATLAB的subplot子图位置参数摘要1. 问题描述2. 计算过程2.1 确定子图的大小和间距2.2 计算合适的figure大小2.3 计算每个子图的position数据 3. MATLAB代码实现3.1 MATLAB代码3.2 绘图结果 4. 总结 摘要 在MATLAB中&#xff0c;使用…...

【MySQL】基于Docker搭建MySQL一主二从集群

本文记录了搭建mysql一主二从集群&#xff0c;这样的一个集群master为可读写&#xff0c;slave为只读。过程中使用了docker&#xff0c;便于快速搭建单体mysql。 1&#xff0c;准备docker docker的安装可以参考之前基于yum安装docker的文章[1]。 容器相关命令[2]。 查看正在…...

k8s 集群调度,标签,亲和性和反亲和性,污点和容忍,pod启动状态 排错详解

目录 pod启动创建过程 kubelet持续监听的原因 调度概念 调度约束 调度过程 优点 原理 优先级选项 示例 指定调度节点 标签基本操作 获取标签帮助 添加标签&#xff08;Add Labels&#xff09;&#xff1a; 更新标签&#xff08;Update Labels&#xff09; 删除标…...

Idea 启动报错 failed to create jvm:jvm path url

1、情况 针对于在 idea 中&#xff0c;通过界面的形式改了 -Xmx 等类似的参数&#xff0c;并且设置的值过大&#xff0c;导致下次启动 idea 报错 2、解决 找到如图所示的文件 打开编辑该文件&#xff0c;把类似 -Xmx 等参数的值调小&#xff0c;保存文件并关闭&#xff0…...

观成科技:隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

业务系统对接大模型的基础方案:架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

Linux 文件类型,目录与路径,文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...