16.1 登录界面

html

<view class="container"><view class="wrapper"><view class="left-top-sign">LOGIN</view><view class="welcome">欢迎回来！</view><view class="input-content"><view class="input-item"><text class="tit">手机号码</text><input  type="text" placeholder="请输入手机号码" model:value="{{phone}}"/></view><view class="input-item"><text class="tit">密码</text><input type="password"  placeholder="请输入密码" model:value="{{password}}"/></view></view><button class="confirm-btn" bindtap="login">登录</button><view class="forget-section">忘记密码?</view></view><view class="register-section">还没有账号?<text >马上注册</text></view>
</view>

css

/* pages/login/login.wxss */.wrapper{position:relative;z-index: 90;padding-bottom: 40rpx;
}.left-top-sign{font-size: 120rpx;color: #f8f8f8;position:relative;left: -16rpx;
}.welcome{position:relative;left: 50rpx;top: -90rpx;font-size: 46rpx;color: #555;
}.input-content{padding: 0 60rpx;
}
.input-item{display:flex;flex-direction: column;align-items:flex-start;justify-content: center;padding: 0 30rpx;background:#f8f6fc;height: 120rpx;border-radius: 4px;margin-bottom: 50rpx;}.input-item:last-child{margin-bottom: 0;
}
.input-item .tit{height: 50rpx;line-height: 56rpx;font-size: 30rpx;color: #606266;
}
.input-item input{height: 60rpx;font-size: 30rpx;color: #303133;width: 100%;
}
.confirm-btn{width: 630rpx!important;height: 76rpx;line-height: 76rpx;border-radius: 50rpx;margin-top: 70rpx;background: #d43c33;color: #fff;font-size: 32rpx;padding: 0;
}
.confirm-btn2:after{border-radius: 100px;
}.forget-section{font-size: 28rpx;color: #4399fc;text-align: center;margin-top: 40rpx;
}.register-section{position:absolute;left: 0;bottom: 50rpx;width: 100%;font-size: 28rpx;color: #606266;text-align: center;}
.register-section text{color: #4399fc;margin-left: 10rpx;
}

16.2 简单的了解事件委托

在 2022 年之前，如果我们想在小程序里，做到双向数据绑定。并且用一个事件绑定多个元素的话。可能会用到事件委托和事件函数里 event 对象传过来的值。

所以我们也趁此机会了解一下事件委托是什么。

事件委托也叫事件代理，“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。

事件冒泡：即一个元素的事件触发后，会依次一级一级往上调用父级元素的同名事件，直到 window（浏览器窗口）。这个其实也很好理解，子元素被父元素包裹着，当你触发了子元素的事件，那可不就是也相当于触发了父元素的事件嘛。但是浏览器也没那么傻，它还是能知道源头是谁的。并且把这个源头保存到了 event.target 里面了。

那么有意思的操作就来了：

当我们只给父元素绑定事件的时候，点击里面的子元素时，这个绑定在父元素的事件也会被触发，因为子元素也是父元素的一部分。就相当于触发了父元素的事件。那么此时此刻 event.target 拿到的源头肯定还是这个子元素。所以我们说这个时候，我们只需要判断这个源头是谁，然后进行特殊的判断附加其功能即可。

<button id="btn">添加列表项目</button>
<ul id="list"><li>列表项目1</li><li>列表项目2</li><li>列表项目3</li>
</ul>
<script>var ul = document.getElementById("list");var lis = ul.getElementsByTagName("li");for (var i = 0; i < lis.length; i ++) {lis[i].addEventListener('cluick', function (e) {var e = e || window.event;var target = e.target || e.srcElement;alert(e.target.innerHTML);}, false);}var i = 4;var btn = document.getElementById("btn");btn.addEventListener("click", function() {var li = document.createElement("li");li.innerHTML = "项目列表" + i++;ul.appendChild(li);});
</script>

优点：

节约内存
能为之后新增的DOM元素也添加对应的事件

但是现在的微信小程序，已经不支持这种原生态的玩法。它设定了 “双向数据绑定” 的新特性。

这样我们就可以在 js 那里动态的拿到这些数据了。

16.3 功能的实现

收集表单项数据

前端验证
1) 验证用户信息（账号、密码）是否合法
2) 前端验证不通过就给予提示即可，也不需要发请求给后端
3) 前端验证通过，发请求（携带账号，密码）给后端

后端验证
1) 验证用户是否存在
2) 用户不存在直接返回，告诉前端用户不存在
3) 用户存在的话，还需要验证密码是否正确
4) 密码不正确返回给前端提示密码不正确
5) 密码正确返回给前端数据，提示用户登录成功(会携带用户的信息)

收集表单数据这里，还有一个比较尬的知识点。就是从前端可以传递过去一些静态的数据。

data-xxx：可以直接传递一些静态的数据到 event.target 里面。前提是你得绑定事件，得有事件函数。所以在这里就不做演示了。想了解的，可以去官网查查。

前端验证

    login(){// 前端验证// 手机号验证let phoneReg = /^1[3-9]\d{9}/; // 正则表达式 直接写 匹配规则就行if(!this.data.phone){wx.showToast({title: '手机号不能为空',icon: 'none'})return;}if(!phoneReg.test(this.data.phone)){wx.showToast({title: '手机号格式错误',icon: 'none'})return;}// 密码验证if(!this.data.password){wx.showToast({title: '密码不能为空',icon: 'none'})return;}// 后端验证},

后端验证

这里我们先安装 axios

npm install --save axios

然后我们要用一个很牛的云音乐 API。

// http://localhost:3000/login/cellphone?phone=13278030611&password=159357asd// 后端验证let ret = await request("login/cellphone",{phone: this.data.phone,password: this.data.password});if(ret.code === 200){wx.showToast({title: "登录成功"})}else if(ret.code === 400){wx.showToast({title: "手机号错误",icon: "none"})}else if(ret.code === 502){wx.showToast({title: "密码错误",icon: "none"})}else{wx.showToast({title: "登录失败，请重新登录",icon: "none"})}

若使用这个接口，那么就得改写一下 index.js

index.js

// pages/index/index.js
import request from "../../utils/request";
Page({/*** 页面的初始数据*/data: {banners:[], // 轮播图的数据recommendList: [], // 推荐歌单topList: [] // 排行榜},/*** 生命周期函数--监听页面加载*/ async onLoad(options) {let bannerListData = await request("banner");let recommendListData = await request("personalized",{limit:10});let topListHots = await request("playlist/hot",{});let topListDataArr = [];///playlist/track/all?id=24381616&limit=10&offset=1let cnt = 0; //let i = 0;while(cnt < 3){let id = topListHots.tags[i].id;let name = topListHots.tags[i].name;let topListData = await request("playlist/track/all",{id: id,limit: 3,offset: 0});i++;if(topListData.message == "登录后才可查看" || topListData.message == "no resource" ||topListData.songs.length == 0){continue;}topListData = {name: name, data: topListData};cnt++;topListDataArr.push(topListData);}this.setData({banners: bannerListData.banners,recommendList: recommendListData.result,topList: topListDataArr})},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

微信小程序 16 登录界面相关推荐

微信小程序的登录界面实现
微信小程序的登录界面实现 <view class="container"><view class="wrapper"><view ...
微信小程序授权登录界面
微信小程序授权登录界面原先用的 wx.getUserInfo(Object object) ,现已改革现用的 wx.getUserProfile(Object object),获取用户信息.每次请 ...
＜微信小程序＞登录界面实现密码输入错误3次，30分钟不允许该账号登录
当时面临如此需求,实在无从下手,后自己想了一个灵活的方法进行面对,特此记录,希望以后不会看不懂自己的代码登陆界面设置这个百度一下就可以,与数据库交互的登录界面很是简单,由于本项目要求不可注册,故只 ...
微信小程序开发登录界面mysql_微信小程序欢迎界面开发的实例详解
微信小程序欢迎界面市面上大多数的app都会有一个欢迎界面,下面将演示如何通过微信小程序实现一个欢迎界面. 下面将会按照以下的顺序介绍: 布局的实现逻辑的实现样式的实现 1.布局的实现整个布局 ...
微信小程序+Django—登录界面交互
最近有一个项目是做微信小程序的开发,由于也是刚刚学习了django,所以准备用django来做微信小程序的后台. 由于没有系统的学习过小程序的开发,有些坑要自己慢慢地爬,特此将自己爬过的坑记录下 ...
微信小程序用户登录界面，用户名无法切换输入法问题解决方法
[问题描述] iOS下,用户登录界面,两个相邻的input,第一个输入用户名,第二个输入密码(password),若用户手机中只有英文输入法和搜狗输入法的话,点击第一个用户名输入框,会发现出来的键盘是 ...
Springboot实现微信小程序注册登录及微信登录
运行环境 jdk1.8+eclipse+tomact 8.5+maven3.5+springboot 2.0.1 微信开发者工具数据库一张表三个字段 CREATE TABLE `user` (`u ...
微信小程序-注册登录功能-本地数据保存-页面数据交替
Title:微信小程序-注册登录功能-本地数据保存-页面数据交替完美-小程序登录注册功能.rar-- 访问码:yqa5 1.主页面主页面login.js代码 // pages/login/logi ...
php（ThinkPHP）实现微信小程序的登录过程
源码也在我的github中给出 https://github.com/wulongtao/think-wxminihelper 下面结合thinkPHP框架来实现以下微信小程序的登录流程,这些流程是结 ...
微信小程序保持登录状态（使用缓存）
一般来说,一个app在第一次进入时需要进行注册和登录的操作,之后再打开无需再登录即可直接进入app,即保持登录状态.此处使用微信小程序的数据缓存来做到登陆状态的保持. 1 相关API 首先需要了解几个 ...

微信小程序 16 登录界面

16.1 登录界面

16.2 简单的了解事件委托

16.3 功能的实现

微信小程序 16 登录界面相关推荐

最新文章

热门文章