一个好看的小程序登录页面

article/2025/10/8 8:41:49

文章目录

  • 前言
  • 一、效果图
  • 二、实现代码

前言

写一个挺好看的小程序页面，发出来记录一下

一、效果图

登录页面：
在这里插入图片描述
注册页面：
在这里插入图片描述
通过点击注册和登录按钮切换两个页面淡入淡出效果
在这里插入图片描述

二、实现代码

wxml:

<!--pages/login/login.wxml-->
<view class="card"><view class="doublecard {{loginanimation}}" wx:if="{{logincard}}"><view class="titleView"><view class="text-shadow-drop-right">Login</view></view><view class="inputViews"><view class="inputView"><label class="labeltext">账号</label><input placeholder="username" bindinput="getUsername" model:value="{{username}}" type="text"/></view><view class="inputView"><label class="labeltext">密码</label><input placeholder="password" bindinput="getPassword" model:value="{{password}}" type="password"/></view></view><view class="btns"><view class="functionbtn" bindtap="login"><view>登录</view></view><view class="switchView"><text class="switchcard" bindtap="switchCard">注册<text style="text-decoration: underline;">register</text></text></view></view></view><view class="doublecard {{registeranimation}}" wx:if="{{registercard}}"><view class="titleView"><view class="text-shadow-drop-right">Register</view></view><view class="inputViews"><view class="inputView"><label class="labeltext">新账号</label><input placeholder="username" bindinput="getNewName" model:value="{{newname}}" /></view><view class="inputView"><label class="labeltext">密码</label><input placeholder="password" bindinput="getNewPassword" model:value="{{newpassword}}" /></view></view><view class="btns"><view class="functionbtn" bindtap="register"><view>注册</view></view><view class="switchView"><text class="switchcard" bindtap="switchCard">登录<text style="text-decoration: underline;">login</text></text></view></view></view>
</view>

wxss:

/* pages/login/login.wxss */
page {height: 100vh;width: 100vw;display: flex;justify-content: center;align-items: center;
}.card {overflow: hidden;width: 80%;height: 70%;border-radius: 30px;background: #e0e0e0;box-shadow: 15px 15px 30px #bebebe,-15px -15px 30px #ffffff;
}.doublecard {width: 100%;height: 100%;
}.titleView {font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;color: rgb(83, 83, 83);display: flex;justify-content: center;align-items: center;font-size: 50px;margin: 0 auto;width: 100%;height: 30%;
}.text-shadow-drop-right {-webkit-animation: text-shadow-drop-right 0.6s both;animation: text-shadow-drop-right 0.6s both;
}@-webkit-keyframes text-shadow-drop-right {0% {text-shadow: 0 0 0 rgba(0, 0, 0, 0);}100% {text-shadow: 6px 0 18px rgba(0, 0, 0, 0.35);}
}@keyframes text-shadow-drop-right {0% {text-shadow: 0 0 0 rgba(0, 0, 0, 0);}100% {text-shadow: 6px 0 18px rgba(0, 0, 0, 0.35);}
}.inputViews {overflow: hidden;flex-wrap: wrap;display: flex;justify-content: center;align-items: center;width: 100%;height: 40%;background-color: #7FFF00;
}.inputView {position: relative;top: 0px;left: 0px;border: #808080 2px solid;border-radius: 15rpx;width: 90%;height: 35%;
}.labeltext {color: rgb(83, 83, 83);position: absolute;top: -25%;left: 8%;padding-left: 3%;padding-right: 3%;height: 50px;background-color: #7FFF00;
}input {border-bottom: rgb(83, 83, 83) 1rpx solid;position: absolute;top: 14%;left: 3%;height: 75%;width: 94%;
}.btns {height: 30%;width: 100%;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;
}.functionbtn {color: #7FFF00;font-size: 45rpx;display: flex;justify-content: center;align-items: center;border-radius: 25rpx;width: 75%;height: 40%;background-color: rgb(83, 83, 83);
}.switchView {position: relative;top: 0px;left: 0px;display: flex;justify-content: center;align-items: center;width: 75%;height: 30%;
}.switchcard {font-family: sans-serif;color: rgb(59, 59, 230);position: absolute;top: -2%;
}.fade-out-bck {-webkit-animation: fade-out-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;animation: fade-out-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;z-index: -10;
}@-webkit-keyframes fade-out-bck {0% {-webkit-transform: translateZ(0);transform: translateZ(0);opacity: 1;}50% {-webkit-transform: translateZ(-80px);transform: translateZ(-80px);opacity: 0;}
}@keyframes fade-out-bck {0% {-webkit-transform: translateZ(0);transform: translateZ(0);opacity: 1;}50% {-webkit-transform: translateZ(-80px);transform: translateZ(-80px);opacity: 0;}
}.fade-in-bck {-webkit-animation: fade-in-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;animation: fade-in-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}@-webkit-keyframes fade-in-bck {0% {-webkit-transform: translateZ(-80px);transform: translateZ(-80px);opacity: 0;}50% {-webkit-transform: translateZ(0);transform: translateZ(0);opacity: 1;}
}@keyframes fade-in-bck {0% {-webkit-transform: translateZ(-80px);transform: translateZ(-80px);opacity: 0;}50% {-webkit-transform: translateZ(0);transform: translateZ(0);opacity: 1;}}

js:

// pages/login/login.js
var app = getApp()
var Url = app.globalData.Url
var login = app.globalData.login
var register = app.globalData.register
Page({/*** 页面的初始数据*/data: {username: "",password: "",logincard: true,registercard: false,loginanimation: "",registeranimation: "",newname: "",newpassword: ""},/*** 生命周期函数--监听页面加载*/onLoad(options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {},getUsername(e) {this.setData({username: (e.detail.value).trim()})},getPassword(e) {this.setData({password: (e.detail.value).trim()})},getNewName(e) {this.setData({newname: (e.detail.value).trim()})},getNewPassword(e) {this.setData({newpassword: (e.detail.value).trim()})},login() {var that = thisif (this.data.username == "") {wx.showToast({title: '账号不能为空',icon: 'none'})} else if (this.data.password == "") {wx.showToast({title: '密码不能为空',icon: 'none'})} else {wx.request({url: Url + login,data: {username: this.data.username,password: this.data.password},success: (res) => {if (res.data == null) {wx.showToast({title: '账号或密码错误',icon: 'none'})} else {app.globalData.username = this.data.usernamewx.showToast({title: '登录成功',icon: 'none',success: function () {setTimeout(() => {that.setData({username:"",password:""})wx.reLaunch({url: '../index/index',})}, 1000);}})}}})}},switchCard() {if (this.data.logincard) {this.setData({loginanimation: 'fade-out-bck',})setTimeout(() => {this.setData({logincard: false,registercard: true,registeranimation: 'fade-in-bck',newname:"",newpassword:""})}, 500);} else {this.setData({registeranimation: 'fade-out-bck'})setTimeout(() => {this.setData({registercard: false,logincard: true,loginanimation: 'fade-in-bck',username:"",password:""})}, 500);}},register() {if (this.data.newname == "") {wx.showToast({title: '新账号不能为空',icon: 'none'})} else if (this.data.newpassword == "") {wx.showToast({title: '密码不能为空',icon: 'none'})} else {wx.request({url: Url + register,data: {newname:this.data.newname,newpassword:this.data.newpassword},success:(res)=>{if(res.data){wx.showToast({title: '注册成功，快去登陆吧:)',icon: 'none'})}else{wx.showToast({title: '此账号已存在',icon: 'none'})}}})}}
})

http://chatgpt.dhexx.cn/article/112hbAYT.shtml

相关文章

微信小程序的简单登录

微信小程序的简单登录

这种在前台直接获取openid的方式已经不可以用了&#xff0c;各位想了解新的登录请去http://blog.csdn.net/m0_37992327/article/details/73469087&#xff0c;不过下面的一些东西还是对大家有帮助的&#xff0c;有兴趣的可以看一下&#xff0c;尤其是ssl证书的申请方式。 最近…
阅读更多...
微信小程序登录界面

微信小程序登录界面

软件安装 这个就不讲了&#xff0c;没安装的可以自行百度安装一下 创建小程序 点击确认后创建完成&#xff0c;然后 创建登录页 然后点击app.json&#xff0c;将pages中的路径改掉 将pages中的路径修改之后&#xff0c;直接保存&#xff0c;会自动生成login文件夹及下边的文件…
阅读更多...
微信小程序实现简单登录界面和登录功能

微信小程序实现简单登录界面和登录功能

微信小程序实现简单登录界面和登录功能 问题背景 客户端开发和学习过程中&#xff0c;登录功能是一个很常见的场景。本文将介绍&#xff0c;微信小程序开发过程中是如何实现登录界面和登录功能的。 问题分析 话不多说&#xff0c;直接上代码。 (1)index.js文件&#xff0c;代码…
阅读更多...
小程序简单的登录界面

小程序简单的登录界面

造轮子系列复制粘贴&#xff0c;不多说 <view class""><view class"logo h400 flex jc-ai-center"><image src"../../assets/images/yh.png"></image></view><view class"ipt-wrap"><view cla…
阅读更多...
微信小程序登录

微信小程序登录

前段时间发布了一个微信小程序的简单登录&#xff0c;那段时间我一直在忙着项目&#xff0c;有一天&#xff0c;我清闲下来准备进入小程序群里面看一下来着&#xff0c;刚好有人问问题了&#xff0c;我一看这哥们的问题好像是我写的东西啊&#xff0c;我感觉是时候秀一波了&…
阅读更多...
小程序微信小程序设计登录页面

小程序微信小程序设计登录页面

Page({data: {phone: ,password: ,success: false,text: },// 获取输入账号 phoneInput: function (e) {this.setData({phone: e.detail.value})},// 获取输入密码 passwordInput: function (e) {this.setData({password: e.detail.value})},// 登录 login: function () {var t…
阅读更多...
微信小程序登录页面的实现

微信小程序登录页面的实现

微信小程序登录页面 实现在进入微信小程序首页前的登录验证页面&#xff0c;这里有两种方法&#xff0c;但其实原理都是一样的。 1. 在首页中加入一个弹窗作为登录窗口&#xff0c;效果如下图&#xff1a; (1)index.wxml 登录窗口代码如下&#xff1a; <view class"…
阅读更多...
微信小程序实战（一）---实现登录界面

微信小程序实战（一）---实现登录界面

昨天小程序第一天公测&#xff0c;就下载个小程序自带IDE玩了玩&#xff0c;看了看API&#xff0c;撸出了个登录界面给大家分享下。 下面是主界面和代码。 index.wxml <view class"container"><view class"usermotto"><text class"us…
阅读更多...
微信小程序云开发 之 登录注册界面 详细教程

微信小程序云开发 之 登录注册界面 详细教程

文章目录 前言一、前期的准备&#xff08;很重要&#xff09;1.程序的需求2.微信开发者文档3.数据库的设计 二、小程序设计阶段1.选择开发方式2.云开发第一步&#xff1a;注册微信小程序&#xff0c;获取小程序的 AppID第二步、创建小程序项目 第三、登录界面的设计1.登录2.注册…
阅读更多...
微信小程序的登录界面实现

微信小程序的登录界面实现

微信小程序的登录界面实现 <view class"container"><view class"wrapper"><view class"left-top-sign">LOGIN</view><view class"welcome">欢迎回来&#xff01;</view><view class"inp…
阅读更多...
微信小程序 如何实现登录

微信小程序 如何实现登录

业务流程&#xff1a; 1&#xff1a;首先需要一个按钮触发事件 2&#xff1a;调用微信小程序的登录接口wx.login&#xff0c;拿到code 3&#xff1a;调用微信小程序的获取用户信息的接口wx.getUserProfile&#xff0c;拿到用户的个人信息 4&#xff1a;拿到的个人信息调用后…
阅读更多...
小程序登录流程

小程序登录流程

用户登录是一个系统的必备功能。而小程序的登录流程和Web端又有一些不同&#xff0c;主要是要与微信服务器进行通信验证。下面我们就来看下小程序具体的登录流程。 1.通过 wx.login() 获取到用户的code判断用户是否授权读取用户信息&#xff0c;调用wx.getUserInfo 读取用户…
阅读更多...
微信小程序之登录页-------实例

微信小程序之登录页-------实例

最近在学习微信小程序&#xff0c;下面提供自己做的微信小程序登录页面&#xff0c;仅供参考。 效果图&#xff1a; 目录结构&#xff1a; 图片&#xff1a; name.png key.png 下面是代码&#xff1a; login.wxml&#xff1a; <!--pages/login/login.wxml--> <vie…
阅读更多...
微信小程序的登录流程

微信小程序的登录流程

基本流程&#xff1a; 1、调用 wx.login() 获取 临时登录凭证code &#xff0c;并回传到开发者服务器。 2、调用 auth.code2Session 接口&#xff08;本接口应在服务器端调用&#xff09;&#xff0c;换取 用户唯一标识 OpenID 、 用户在微信开放平台帐号下的唯一标识 UnionID&…
阅读更多...
微信小程序实现登录页面

微信小程序实现登录页面

wxml文件&#xff1a; <view class"container"> <view class"login-icon"> <image class"login-img" src"../../img/loginLog.jpg"></image> </view> <view class"login-from"> <!…
阅读更多...
微信小程序入门（登录页面）

微信小程序入门（登录页面）

1.首先前往开发者工具下载安装开发工具&#xff1a; 2.安装后微信扫码&#xff0c;并填写自己的AppID选择自己的项目目录后登录&#xff1a; 登陆后点击工具上的编译按钮&#xff0c;可以在工具的左侧模拟器界面看到这个小程序的表现&#xff0c;也可以点击预览按钮&#xff0c…
阅读更多...
微信小程序之登录注册界面的实现

微信小程序之登录注册界面的实现

初步分析&#xff0c;程序一共有两个界面即&#xff1a;登录界面和注册界面。 但是注册的时候由于不同的注册方式应该有不同的界面支持&#xff0c;故在本程序中我们要写两个注册界面和一个登录界面&#xff0c;两个注册界面分别位手机注册界面和企业用户注册界面。 在微信小程…
阅读更多...
微信小程序之登录

微信小程序之登录

目录 1、登录流程时序 1.1、wx.login(Object object) 1.1.1、功能描述 1.1.2、参数 1.1.3、object.success 回调函数 1.2、auth.code2Session 1.2.1、请求地址 1.2.2、请求参数 1.2.3、返回值 2、使用微信登录 2.1、小程序端js文件 2.2、云函数端js文件 3、获取手机…
阅读更多...
微信小程序 16 登录界面

微信小程序 16 登录界面

16.1 登录界面 html <view class"container"><view class"wrapper"><view class"left-top-sign">LOGIN</view><view class"welcome">欢迎回来&#xff01;</view><view class"input-con…
阅读更多...
微信小程序登录注册界面

微信小程序登录注册界面

微信小程序登录注册界面demo,存在不足之处,请指教! 界面图片&#xff1a; 1.js代码&#xff1a; Page({/*** 页面的初始数据*/data: {current:1,codeText:获取验证码,counting:false,},// 登陆注册监听click(e){let index e.currentTarget.dataset.code;this.setData({cur…
阅读更多...
推荐文章

Copyright @ 2022~2023