UNI-app学习笔记1——了解篇

uni-app学习笔记
1.uni-app的框架简介

创建uni-app项目之后，会一般都会包含以下文件

┌─components            uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                存放本地网页的目录，
├─platforms             存放各平台专用页面的目录，
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─wxcomponents          存放小程序组件的目录，
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，
└─pages.json            配置页面路由、导航条、选项卡等页面类信息，

在index.vue文件中编辑页面内容，
在pages.json中编辑页面属性，标题，连接等
1.介绍一些命令

//文件内的不同范围内的注释符号不一样，分别为<--!  -->,//和/*     */
index1.vue文件

<template>
	<view class="content">
		<view class="title">{{title}}</view>
		<!-- 此处存储信息的方法是定义变量，然后用两个{{}}输出 -->
		<view class="rpx">rpx 红色</view>	
		<!-- 运用style中的class来指定该框内的颜色等信息 -->
		<view class="vw" >vw 橙色</view>
		<view class="sass">sass黄色</view>
	</view>
</template>

<script>
	export default{
			data(){
				// 定义变量,存储准备输出
				//包括但不限于数据，数字，bool类型，还有对象
				return{
					//字符串
					title:"小青",
					}
			}
			
	}
</script>

<style lang="scss">
	
	.rpx{
		/*小程序的单位：750rpx=屏幕的宽度*/
		width: 750rpx;
		height: 100rpx;
		background-color: #ff0000;
		
	}
	
	.vw{
		/*vw h5单位100vw =屏幕高度 100vh=屏幕宽度 */
		width: 100vw;
		height: 10vh;
		background-color: #ffaa00;
	}
	.content{
		.sass{
			width: 750rpx;
			height: 100rpx;
			background-color: #ffff00;
			//一般来说，这里的颜色选择需要ALT+左键点击自行选择
			color: $uni-color-primary;
			//字体颜色，可以在uni.scss中寻找，挑选自己喜欢的就行
		}
	} 
	
	
	
	/* .content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}*/

	.title {
		width: 750rpx;
		height: 100rpx;
		font-size: 50rpx;
		color: #00ff00;
		值得一说的是，这里的距离单位和一般的不一样，虽然可以容纳很多的单位，但最常用还是rpx，默认手机宽750rpx，高1000rpx，
	} 
</style>

这是第二个文件，pages.json，主要说明的是作为主业的vue文件位置，每增加一个页面，都要增加一个开始结束范围内的代码，并且更改页面路径和页面标题

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
	//开始
		{
			"path": "pages/index/index",//页面路径
			"style": {
				"navigationBarTitleText": "uni-app" 	//页面标题
			}
		}//结束
		
	],
	"globalStyle": {
		//全局设置文件
		"navigationBarTextStyle": "black",
		//导航栏标题颜色，仅支持黑白色
		"navigationBarTitleText": "uni-app",
		//标签名字
		"navigationBarBackgroundColor": "#aaaaff",
		//导航栏背景颜色
		"backgroundColor": "#ffffff"
		//背景颜色-——我也没搞懂在哪有用，我添加删除，更改颜色，对页面没有任何影响。
	}
}