前言
之前把发现页做的都能跳转了,那今天我们做tab-bar和登陆界面的一些javascript功能。
user.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="./css/user.css" />
<title></title>
<script>
// 获取uid
var uid = localStorage.getItem("uid");
console.log(uid)
// 登录条件判断
// null 在if判断中为false
// !取反 !false = true
if (!uid) {
location.href = "./login.html";
}
</script>
</head>
<div class="info">
<img class="avatar" src="img/user/101.jpg" alt="">
<span class="uname">猴子大王</span>
</div>
<div class="out">
<button onclick="out()">退出登录</button>
</div>
<div class="tab-bar">
<div class="item">
<i class="fa fa-globe" onclick="goToFind()"></i>
<span>发现</span>
</div>
<div class="item">
<i class="fa fa-video-camera"></i>
<span>视频</span>
</div>
<div class="item">
<i class="fa fa-music"></i>
<span>我的</span>
</div>
<div class="item">
<i class="fa fa-users"></i>
<span>云村</span>
</div>
<div class="item active">
<i class="fa fa-user"></i>
<span>账号</span>
</div>
</div>
<script>
var goToFind = function () {
window.location.href = "find.html";
}
var out = function () {
// 清除uid
localStorage.removeItem("uid");
location.href = "./login.html";
}
</script>
</body>
</html>
user.css
.info {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 40px;
}
.info .avatar {
width: 160px;
height: 160px;
border-radius: 80px;
}
.info .uname {
font-size: 18px;
margin-top: 20px;
}
.tab-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
background-color: white;
height: 80px;
/* border: 1px solid red; */
display: flex;
justify-content: space-evenly;
}
.tab-bar>.item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.tab-bar>.item>i {
font-size: 30px;
}
.tab-bar>.item>span {
margin-top: 6px;
font-size: 14px;
}
.tab-bar>.active {
color: red;
}
.out{
margin-top: 20px;
text-align: center;
}
find.html
我们在这里只需要修改tab-bar的一些,给他增加一个onclick
的功能
<div class="item active">
<i class="fa fa-globe"></i>
<span>发现</span>
</div>
<div class="item">
<i class="fa fa-video-camera"></i>
<span>视频</span>
</div>
<div class="item">
<i class="fa fa-music"></i>
<span>我的</span>
</div>
<div class="item">
<i class="fa fa-users"></i>
<span>云村</span>
</div>
<div class="item">
<i class="fa fa-user" onclick="goToUser()"></i>
<span>账号</span>
</div>
login.html
增加了密码的功能,密码不正确是不能登录的
var users = [{
"uid": 1,
"phone": "123",
"upwd": "123",
"avatar": "img/user/101.jpg"
},
{
"uid": 2,
"phone": "13501234568",
"upwd": "123456",
"avatar": "img/user/102.jpg"
},
{
"uid": 3,
"phone": "13501234569",
"upwd": "123456",
"avatar": "img/user/103.jpg"
},
{
"uid": 4,
"phone": "13501234560",
"upwd": "123456",
"avatar": "img/user/104.jpg"
}
]
var login = function () {
var uname = document.querySelector("#uname");
var upwd = document.querySelector("#upwd");
console.log(uname.value, upwd.value)
var user = users.find(function (item) {
return item.phone == uname.value && item.upwd == upwd.value;
})
console.log(user)
// undefined 在if判断之中会自动转为false
if (user) {
location.href = "user.html"
// 保存登录信息
localStorage.setItem('uid', user.uid)
}
}
var goToFind = function () {
window.location.href = "find.html";
}
打包安装
我们用HBuilderX将这个安装包打包,就可以安装了,选公测证书就好,不需要选别的,广告也关掉,剩下按照步骤进行就可以了。