uniapp学习系列二

登录

一、 新建项目 uniapp新建项目

二、 引入ColorUI

为了界面美观，同时偷懒，少写一点样式，我们引入ColorUI组件。

1. 先导入ColorUI 下载地址

可以直接使用HbuilderX导入，也可以下载zip源码解压，复制根目录的 /colorui 文件夹到你的根目录。

2. 找到main.js

加入下面代码

import cuCustom from './colorui/components/cu-custom.vue'

Vue.component('cu-custom',cuCustom)

3.找到App.vue

加入下面代码

@import "colorui/main.css";
@import "colorui/icon.css";

这就完成了ColorUI的引入。

三、 新建登录页面

1.选择文件夹pages，点击右键选择新建页面，

点击创建后，HbuilderX会自动创建好同名文件夹，并且在pages.json中注册。

2.修改pages.json

login排第一，默认显示login页面

{
     
	"pages": [{
     
            "path" : "pages/login/login",
            "style" : {
     
				"navigationBarBackgroundColor": "#FFFFFF", //导航栏背景颜色（同状态栏背景色）
				"navigationBarTextStyle": "black", //导航栏标题颜色及状态栏前景颜色，仅支持 black/white
				"navigationStyle":"custom" //导航栏自定义，原生导航栏不显示，
			}
        },
		{
     
		"path": "pages/index/index",
			"style": {
     
				"navigationBarTitleText": "主页" //导航栏标题文字内容
			}
		}    
    ],
	"globalStyle": {
     
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "学习系统",
		"navigationBarBackgroundColor": "#007AFF",
		"backgroundColor": "#FFFFFF"
	}
}

3.编辑登录页面

<template>
	<view class="login bg-gradual-green"><!-- 背景颜色bg-gradual-green渐变色 -->
		<view class="content bounceInDown">
			<!-- 头部logo -->
			<view class="header">
				<image src="../../common/logo.png"></image>
			</view>
			
			<view class="systemName">
				学习系统
			</view>
			
			<!-- 主体表单 -->
			<view class="main">
				<form>
					<view class="cu-form-group margin-top account">
						<view class="title"><text class="lg cuIcon-my"></text></view>
						<input class="inputText" placeholder="输入账户" name="input"></input>
					</view>
					<view class="cu-form-group margin-top account">
						<view class="title"><text class="lg cuIcon-lock"></text></view>
						<input class="inputText" placeholder="输入密码" name="input"></input>
					</view>
					<button class="cu-btn round lg btnlogin"  @click="Login()" >登 录</button>
				</form>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
     
		data() {
     
			return {
     
				
			}
		},
		methods: {
     
			Login: function(url){
      
				//console.log(url)  
				uni.navigateTo({
     
					url: '../index/index',
					success: res => {
     },
					fail: () => {
     },
					complete: () => {
     }
				});
			}
		}
	}
</script>

<style>
    /* 父容器，背景颜色显示 */
	uni-page-body{
     
		height: 100% !important;
	}
	/* 子容器，背景颜色显示 */
	.login{
     
		height: 100% !important;
	}

	.content {
     
		display: flex;
		flex-direction: column;
		justify-content:center;
		/* margin-top: 128upx; */
	}
	
	/* 头部 logo */
	.header {
     
		width:161upx;
		height:161upx;
		box-shadow:0upx 0upx 60upx 0upx rgba(0,0,0,0.0);
		border-radius:50%;
		/* background-color: #000000; */
		margin-top: 128upx;
		margin-left: auto;
		margin-right: auto;
	}
	
	.header image{
     
		width:161upx;
		height:161upx;
		border-radius:50%;
	}
	
	.systemName{
     
		font-size: 50upx;
		margin-top: 1upx;
		margin-bottom: 72upx;
		margin-left: auto;
		margin-right: auto;
	}
	
	/* 主体 */
	.main {
     
		display: flex;
		flex-direction: column;
		padding-left: 70upx;
		padding-right: 70upx;
	}
	
	.account{
     
		border-radius: 100rpx;
		height: 100rpx;
		background-color: rgba(0,0,0,0.2);
	}
	
	.title{
     
		font-size:26px;
		color: white;
	}
	
	.uni-input-input, .uni-input-placeholder{
     
		color:rgba(255,255,255,0.8) !important;
	}
	
	.btnlogin{
     
		margin-top: 60rpx;
		/* margin-bottom: 104%; */
		width: 100%;
		height: 100rpx;
		color: white;
		background-color: rgba(23, 104, 211, 0.4) !important;
	}
</style>

运行效果如下图：

提前准备好logo.png
这是简单登录界面，没有账号密码，可以直接跳转的。带验证功能请看下一篇。