Uni-app 目录结构、样式与布局、配置文件、生命周期、变量的声明与模板的绑定基础笔记

一段代码多端使用

uni-app 官网：

https://uniapp.dcloud.io/

使用环境：

HbuilderX + 微信小程序开发者工具

目录结构：

Wechat：

• project.config.json 核心的配置文件
  

• app.wxss css的样式文件，属于全局样式
  
  uni-app：
  

• manifest.json 配置应用标识、SDK、权限等一些关于应用的配置
  如图：
  

• page.json : 在wechat对应的是app.json,这里面注册页面视图可以理解为小程序相关配置：
  

• main.js :此文件会运行到整个的应用中去，里面可以定义全局变量类似于Android中的Application类

• App.vue : 也是一个全局的文件，之后会介绍

• pages 里面作视图
  

在uni-app中遵循单文件组件规范，及.vue文件是一个自定义类型的文件，用类HTML语法描述以个Vue组件。每一个Vue文件又包含三个类型的顶级语言模块
<template> 模板 最多包含一个 可以用src的方式导入、
<script> js 最多包含一个 可以用src的方式导入、
<style> 样式 可以包含多个 可以用src的方式导入 推荐使用Flex布局、

而wxchat则包含3~4个文件不是很方便

• static 文件放静态资源文件

页面样式与布局

尺寸单位：

uni-app支持px 与 百分比
uni-app的基准宽度为750px，实际中其会自动适配其宽度
设计稿：转换 ：uni-app 750px * 元素在设计稿中的宽度/设计稿基础宽度

样式导入：

外联央视：

在style标签中可以使用

@import “相对路径”;

来导入外联样式：

内联样式：

目前支持的选择器：
类选择器、id选择器、标签选择器、伪类选择器
定义在App.vue中的样式支持每一个页面中的使用
定义在pages中的vue文件里面的样式只支持本页面使用

pages.json 配置文件：

pages数组中的第一项则是启动界面

• pages指的是页面的声明与样式，一个页面一个声明
  
  

讲刚刚注册的界面与第一个交换之后：

• globalStyle则是全局的样式
  例如：
  
  

tabBar 底部导航栏属性：

案例：

声明周期

https://uniapp.dcloud.io/frame?id=%e9%a1%b5%e9%9d%a2%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f

在uni-app中使用vue.js的声明周期：

其中比较常用的页面生命周期是有：

• onLoad : 监听页面加载，其参数为上个界面传递的数据，参数的类型为object
• onShow:监听界面显示
• onReady:监听页面初次渲染完成
• onHide:监听页面隐藏
• onUnload:监听界面卸载
• onPullDownRefresh:监听用户的下拉动作
• onReachBottom:页面上拉触底事件的处理函数
• onShareAppMessage:用户点击右上角分享 微信小程序
• onPafwScroll监听页面的滚动
• onTabItemTap:当前界面是tab页面时，点击tab时触发

使用时，在vue文件中的script标签中写对应名称的函数即可：

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {
			console.log("onload")
		},
		methods: {

		}
	}
</script>

变量的声明与模板的绑定

普通变量

变量声明在data对象中，使用在模板中

相信熟悉Vue的同学会很习惯这种写法=={{变量名}}==

同样的这是也是vue的响应式编程，变量时可以动态变化的：

<script>
	var _self;
	export default {
		data() {
			return {
				title: 'Hello',
				message:'nihao',
				age:0
			}
		},
		onLoad() {
			_self = this;
			setTimeout(function(){
				_self.age ++;
			},1000);
		},
		methods: {

		}
	}
</script>

1s之后界面上的值会变化

数组：

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				message:'nihao',
				student:[
					{tel1:156},
					{tel2:178},
					{tel3:130}
				]
			}
		},
		onLoad() {
	
		},
		methods: {
			
		}
	}

使用：

<template>
	<view class="content red">
		{{student[0].tel1}}
	</view>
</template>

v-for循环：

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				message:'nihao',
				student:[
					{tel:156},
					{tel:178},
					{tel:130}
				]
			}
		},
		onLoad() {
	
		},
		methods: {
			
		}
	}
</script>

这里的index是序号
item是数组中的对象

<template>
	<view class="content red">
		<p v-for="(item,index) in student" :key="index">{{item.tel}}</p>
	</view>
</template>

这里使用的就是vue.js中的v-for

相同的还有v-if、v-hidden 等：
结果：

v-if 于 v-hidden的区别：
v-if 若不显示则不渲染
v-hidden都渲染，但不达到条件是不显示的

属性绑定 v-bind 或者语法糖 ：

意思是可以通过v-bind 来动态控制标签的属性：

<template>
	<view :class="{red:isShow}"> //被绑定css样式
		{{bengdi}} //显示变量
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bengdi:857,
				isShow:true //通过控制isShow的值来控制变量是否显示
			}
		},
		onLoad() {
	
		},
		methods: {
			
		}
	}
</script>

<style>
	.red{
		color: #f00;
	}
</style>

支持三元运算：
注意这里是 方括号 而不是 大花括号

<template>
	<view :class="[isShow ? 'red' : '']">
		{{bengdi}}
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bengdi:857,
				isShow:true
			}
		},
		onLoad() {
	
		},
		methods: {
			
		}
	}
</script>

<style>
	.red{
		color: #f00;
	}
</style>

不仅仅是class ，style也是可以的

<template>
	<view :style="{fontSize:font+'px'}">
		{{bengdi}}
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bengdi:857,
				font:86
			}
		},
		onLoad() {
	
		},
		methods: {
			
		}
	}
</script>

<style>
	.red{
		color: #f00;
	}
</style>

结合v-for做一个小案例：选中哪个标签，哪个标签就变色：

这里再加一个点击事件属性：

@οnclick=" "

<template>
	<view>
		<p v-for="(item,index) in title" 
		   :id="'_menu'+index" 
		   :class="[indexselect==index?'red':'']" 
		   @click="select" 
		   >
		   {{item.name}}
		</p>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indexselect:0,
				title:[
					{name:'首页'},
					{name:'次页'},
					{name:'尾页'}
				]
			}
		},
		onLoad() {
	
		},
		methods: {
			select(e){
				console.log(e)
				if(e.target.id == '_menu0'){
					this.indexselect = 0
				}
				if(e.target.id == '_menu1'){
					this.indexselect = 1
				}
				if(e.target.id == '_menu2'){
					this.indexselect = 2
				}
			}
		}
	}
</script>

<style>
	.red{
		color: #f00;
	}
</style>

这里的 **e.target.id ** 是根据打印的参数e得来的：

事件：

常用事件映射表：