uni-app学习笔记

什么是UniApp

• Union Application
• 前端框架
• 基于Vue.js
• 开发规范同小程序
• 一端开发，多端运行

开发工具

HBuilderX

框架基础

• MVC

  • M model - 模型层，数据的增删改查
  • V view - 视图层，前端页面
  • C controller - 控制层，处理业务

• MVVM

  • V view - HTML页面
  • VM viewmodel - 调度者
  • M model

    index.vue
    
    
       <template>
       	<view class="content">
               <image class="logo" :src="image">image>
       		<view>
                   <text class="title">{{title + ' very good'}}text>
       			<input type="text" :value="title" @input="change"/>
               view>
       		
       		<navigator :url="url" > 
       			<view>
       				I am {{student.age >= 18 ? '成年' : '未成年'}} years old. <br/>
       				I have skills such as: {{skill[0]}},{{skill[1]}},{{skill[2]}},{{skill[3]}},{{skill[4]}}
       			view>
       		navigator>
       		
       	view>
       template>
       
       <script>
       	// VM：协调者 调度器
       	export default {
       		// Model: 所有的数据
       		data() {
       			return {
       				title: 'Hello NEXT学院',
       				student: {
       					age: 17
       				},
       				skill: ["Java", "HTML", "CSS", "Springcloud", "VUE"],
       				url: "../hello/hello",
       				image: "../../static/logo.png"
       			}
       		},
       		onLoad() {
       
       		},
       		methods: {
       			change(e) {
       				var txtTitle = e.detail.value;
       				this.title = txtTitle;
       			}
       		}
       	}
       script>
       
       <style>
       	.content {
       		text-align: center;
       		height: 400upx;
       	}
           .logo{
               height: 200upx;
               width: 200upx;
               margin-top: 200upx;
           }
       	.title {
       		font-size: 36upx;
       		color: #8f8f94;
       	}
       style>
    
    

• 生命周期

  • 应用生命周期

    App.vue
    <script>
    export default {
    	onLaunch: function() {
    		console.log('App Launch')
    	},
    	onShow: function() {
    		console.log('App Show')
    	},
    	onHide: function() {
    		console.log('App Hide')
    	}
    }
    script>
    
    <style>
    	/*每个页面公共css */
    style>
    

  • 页面生命周期

    <template>
    
    <navigator url="../index/index" open-type="navigateBack">
    	
    	<view class="green" style="width: 750upx;height: 750upx;">view>
    navigator>
    
    template>
    
    <script>
    	export default {
    		data() {
    			return {
    				
    			};
    		},
    		onLoad() {
    			console.log("页面加载")
    		},
    		onUnload() {
    			console.log("页面关闭")
    		},
    		onReady() {
    			console.log("页面初次渲染完成")
    		},
    		onShow() {
    			console.log('页面show')
    		},
    		onHide() {
    			console.log('页面Hide')
    		},
    		onShareAppMessage() {
    			console.log('分享')
    		},
    		onPageScroll() {
    			console.log('页面滚动')
    		},
    		onBackPress() {
    			console.log('页面返回')
    		}
    	}
    script>
    
    <style>
    	.green {
    		background-color: red;
    	}
    style>
    

• 尺寸单位

  响应式像素 upx
  1upx = 750px

• 数据绑定

  {{表达式}}
  表达式里面的内容可以进行运算
  也支持三元表达式

• 路由

  uni-app路由全部交给框架统一管理，开发者需要在pages.json里配置每个路由页面的路径及页面样式

  • 路由跳转
    uni-app 有两种路由跳转方式：使用navigator组件跳转、调用API跳转。

• v-bind指令对属性的数据绑定

  在标签内不能直接使用{{表达式}},对数据进行双向绑定的。
  这个时候我们用 v-bind:组件的属性名 简写为 :组件的属性名
  这个时候的属性值就可以直接写data中的属性来进行双向绑定
  比如
  

• 事件

  可以用 v-on (可以简写成@)指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码，这些js代码写在methods中。

  <template>
  	<view>
  		<input type="text" 
  			style="background-color: #8F8F94;height: 100upx;"
  			@input="change"
  			@focus="focus"
  			@blur="blur"
  			
  			@confirm="confirm"
  			
  			@click="click"
  			@tap="tap"
  			
  			@longpress="longpress"
  			
  			@touchstart="touchstart"
  			@touchend="touchend"
  			@touchmove="touchmove"
  			@touchcancel="touchcancel"
  			/>
  			
  	view>
  template>
  <script>
  	export default {
  		data() {
  			return {
  				
  			};
  		},
  		methods: {
  			change() {
  				console.log("文本发生变化")
  			},
  			focus() {
  				console.log("获得焦点")
  			},
  			blur() {
  				console.log("失去焦点")
  			},
  			confirm() {
  				console.log("点击完成按钮/回车键")
  			},
  			click() {
  				console.log("组件单击事件")
  			},
  			tap() {
  				console.log("组件被触摸")
  			},
  			longpress() {
  				console.log("长时间按住")
  			},
  			// FIX 不在推荐使用longtap
  			longtap() {
  				console.log("长时间触摸")
  			},
  			touchstart() {
  				console.log("触摸开始")
  			},
  			touchend() {
  				console.log("触摸结束")
  			},
  			touchmove() {
  				console.log("手指移动")
  			},
  			touchcancel() {
  				console.log("触摸被打断")
  			},
  		}
  	}
  script>
  
  <style>
  
  style>
  

• 条件渲染

  v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
  另一个用于根据条件展示元素的选项是 v-show 指令。不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
  支持三元运算符

  <template>
  	<view>
  		
  		
  		<view v-if="isShow">
  			now you see me
  		view>
  		<view v-else>
  			看不见我
  		view>
  		
  		<view v-show="isShow">
  			now you see me
  		view>
  		
  		
  		<view v-if="sex1 == 1 ? true : false">
  			男性
  		view>
  		<view v-if="sex0 == 0 ? true : false">
  			女性
  		view>
  		
  		<view>
  			========================
  		view>
  		
  		<view v-if="sex1 == 1">
  			男性
  		view>
  		<view v-else-if="sex1 == 0">
  			女性
  		view>
  		<view v-else>
  			未知
  		view>
  		
  	view>
  template>
  
  <script>
  	export default {
  		data() {
  			return {
  				isShow: true,
  				sex0: 0,
  				sex1: 2
  			};
  		}
  	}
  script>
  
  <style>
  
  style>
  

• 列表渲染

  <template>
  	<view>
  		<view v-for="(stuObj, stuIndex) in studentArray">
  			当存在多重循环时，应该保证每层循环的下标是不一样的
  			<view>姓名: {{stuObj.name}}, 年龄: {{stuObj.age}}view>
  			<view>
  				擅长技能: 
  				
  				block 不会做输出，只是会把里面内容循环相应的次数
  				<block v-for="(sk, skIndex) in stuObj.skill">
  					{{sk}},
  				block>
  			view>
  		view>
  	view>
  template>
  
  <script>
  	export default {
  		data() {
  			return {
  				studentArray: [
  					{
  						name: "Jack",
  						age: 19,
  						skill: ["Java", "Springcloud", "VUE"]
  					},
  					{
  						name: "Steve",
  						age: 20,
  						skill: ["Java", "HTML", "CSS"],
  					},
  					{
  						name: "Stark",
  						age: 18,
  						skill: ["CSS", "Springcloud", "VUE"],
  					},
  					{
  						name: "Jason",
  						age: 21,
  						skill: ["Java", "VUE", "HTML"]
  					},
  					{
  						name: "Lucy",
  						age: 16,
  						skill: ["VUE", "HTML", "JS"]
  					}
  				]
  			};
  		}
  	}
  script>
  
  <style>
  
  style>
  
  

  带key值，保证循环每一项唯一

  <template>
  	<view>
  		
  		<view v-for="stu in studentArray" :key="stu.id">		
  		
  			<checkbox :value="stu.name" />{{stu.name}}
  		view>
  		
  		<button type="primary" @click="addStu">新增学生button>
  		
  	view>
  template>
  
  <script>
  	export default {
  		data() {
  			return {
  				studentArray: [
  					{
  						id: 1,
  						name: "Jack",
  						age: 19
  					},
  					{
  						id: 2,
  						name: "Steve",
  						age: 20
  					},
  					{
  						id: 3,
  						name: "Stark",
  						age: 18
  					}
  				]
  			};
  		},
  		methods: {
  			addStu() {
  				var studentArray = this.studentArray;
  				var newId = studentArray.length + 1;
  				var newStu = {
  					id: newId,
  					name: "新生" + newId,
  					age: 18
  				}
  				
  				// studentArray.push(newStu);	// push 在数组的尾部进行添加
  				studentArray.unshift(newStu);	// unshift 在数组的首部进行添加
  			}
  		}
  	}
  script>
  
  <style>
  
  style>
  
  

• 跨端兼容

  条件编译是里用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。这些条件都是写在注释里面的
  写法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。
  #ifdef：if defined 仅在某平台存在
  #ifndef：if not defined 除了某平台均存在
  %PLATFORM%：平台名称

  <template>
  	<view>
  		
  		
  		<view>只在H5编译view>
  		
  		
  		
  		<view>只在ios/安卓编译view>
  		
  		
  		
  		<view>只在小程序(微信、支付宝、百度)进行编译view>
  		
  		
  		
  		<view>只在微信小程序进行编译view>
  		
  		
  		
  		
  		<view>不在小程序全短编译，只在ios/安卓/h5编译view>
  		
  		
  		<view class="color">
  			
  		view>
  		
  	view>
  template>
  
  <script>
  	export default {
  		data() {
  			return {
  				
  			};
  		},
  		onLoad() {
  			// #ifdef H5
  			console.log("只在H5编译");
  			// #endif
  			
  			// #ifdef APP-PLUS
  			console.log("只在APP-PLUS编译");
  			// #endif
  			
  			// #ifdef MP
  			console.log("只在小程序(微信、支付宝、百度)进行编译");
  			// #endif
  			
  			// #ifdef MP-WEIXIN
  			console.log("只在微信小程序编译");
  			// #endif
  		}
  	}
  script>
  
  <style>
  
  	.color {
  		/* #ifdef H5 */
  		background-color: #008000;
  		/* #endif */
  		
  		/* #ifdef APP-PLUS */
  		background-color: #FF0000;
  		/* #endif */
  		
  		/* #ifdef MP */
  		background-color: orange;
  		/* #endif */
  		
  		width: 250upx;
  		height: 250upx;
  	}
  
  style>
  
  

• Flex 布局

  • 概念
    • flexible box : 弹性状布局
    • 容器控制内部元素的布局定位
    • css3引入的新的布局模型
    • 伸缩元素，自由填充，自适应
  • 优势
    • 可在不同法相排列元素
    • 控制元素排列的方向
    • 控制元素的对齐方式
    • 控制元素的之间等距
    • 控制单个元素放大与缩放比例、占比、对齐方式
  • 常用术语
    • flex container flex容器
    • flex item flex项目(元素)
    • flex direction 布局方向
  • 模型
    • 主轴
    • 交叉轴
  • 容器属性
    • flex-direction 设置元素的排列方向
      • row 从左向右
      • row-reverse 从右向左
      • column 从上向下
      • column 从下向上

      vue文件
      <template>
      	<view class="container">
      		
      		<view class="green txt">
      			A
      		view>
      		
      		<view class="red txt">
      			B
      		view>
      		
      		<view class="blue txt">
      			C
      		view>
      		
      	view>
      template>
      
      <script>
      	export default {
      		data() {
      			return {
      				
      			};
      		}
      	}
      script>
      
      <style>
      	@import url("flex-direction.css");
      style>
      
      

      css文件
      .container {
      	/* 定义flex容器 */
      	display: flex;
      	/* 
      		设置容器内部元素的排列方向 
      		row: 定义排列方向 从左到右
      		row-reverse: 从右到左
      		column: 从上到下
      		column-reverse: 从下到上
      	*/
      	flex-direction: column-reverse;
      }
      
      .txt {
      	font-size: 20px;
      	width: 150upx;
      	height: 150upx;
      }
      
      .red {
      	background-color: #FF0000;
      }
      
      .green {
      	background-color: #008000;
      }
      
      .blue {
      	background-color: blue;
      }
      

  • flex-wrap 使容器内的元素换行
    • nowrap 不换行 如果有很多的话，会把宽度进行压缩，默认
    • wrap 换行 会进行自适应
    • wrap-reverse
  • justify-content 设置元素在主轴上的对齐方式
    • flex-start
    • flex-end
    • center
    • space-between
    • space-around

    .container {
    	/* 定义flex容器 */
    	display: flex;
    	/* 
    		设置容器内部元素的排列方向 
    		row: 定义排列方向 从左到右
    		row-reverse: 从右到左
    		column: 从上到下
    		column-reverse: 从下到上
    	*/
    	flex-direction: column; 
    	
    	/*
    		设置元素在主轴上的对其方式
    		flex-start: (默认)左对齐 或者 向上对齐
    		flex-end: 右对齐	或者 向下对齐
    		center: 居中对齐
    		space-between: 两端对齐，元素之间平均等分剩余空白间隙部分
    		space-around: 元素两边平均等分剩余空白间隙部分，最左（上）或最右（下）和元素之间距离是1:2
    	 */
    	justify-content: space-between;
    		height: 800upx;
    		background-color: #FFC0CB;
    	}
    	
    	.txt {
    		font-size: 20px;
    		width: 150upx;
    		height: 150upx;
    	}
    	
    	.red {
    		background-color: #FF0000;
    	}
    	
    	.green {
    		background-color: #008000;
    	}
    	
    	.blue {
    		background-color: blue;
    	}
    	
    	.yellow {
    		background-color: yellow;
    	}
    	```
    

  • align-items 设置元素在交叉轴上的对齐方式
    • flex-start
    • flex-end
    • center
    • baseline
    • stretch（默认）

    .container {
    	/* 定义flex容器 */
    	display: flex;
    	/* 
    		设置容器内部元素的排列方向 
    		row: 定义排列方向 从左到右
    		row-reverse: 从右到左
    		column: 从上到下
    		column-reverse: 从下到上
    	*/
    	flex-direction: row;
    	
    	/* 
    		设置容器中元素在交叉轴上的对齐方式
    		stretch：（默认）当元素的高度没有设置，则元素的高度会拉伸至容器高度一致
    		flex-start: 在交叉轴上向起点位置（向上/向左）对齐
    		flex-end: 在交叉轴上向结束位置（向下/向右）对齐
    		center: 居中对齐
    		baseline: 保证元素中的文字在同一条基准线（保证每个文字都在同一条线上）
    	 */
    	align-items: baseline;
    	
    	height: 800upx;
    	background-color: #FFC0CB;
    }
    
    .txt {
    	font-size: 20px;
    	width: 150upx;
    	height: 150upx;
    }
    
    .red {
    	background-color: #FF0000;
    }
    
    .green {
    	background-color: #008000;
    }
    
    .blue {
    	background-color: blue;
    }
    

  • align-content 设置轴线的对齐方式 (轴线当作元素) 在多轴线有效
    • flex-start
    • flex-end
    • center
    • stretch
    • space-between
    • space-around

    .container {
    	/* 定义flex容器 */
    	display: flex;
    	/* 
    		设置容器内部元素的排列方向 
    		row: 定义排列方向 从左到右
    		row-reverse: 从右到左
    		column: 从上到下
    		column-reverse: 从下到上
    	*/
    	flex-direction: column;
    	
    	/**
    		nowrap: 不换行
    		wrap: 换行
    		wrap-reverse: 逆向换行
    	 */
    	flex-wrap: wrap;
    	
    	/* 
    		当轴线超过1条的时候，flex容器可以把多条轴线视为元素对待，可以进行对齐
    		center：居中
    		flex-start: 向左对齐
    		flex-end: 向右对齐
    		stretch: 当宽度width没有设置的时候，轴线可以被拉伸
    		space-between: 两端对齐，元素之间的空白等比切分
    		space-around: 轴线两边的空白等比切分
    	 */
    	align-content: space-around;
    	
    	height: 600upx;
    	background-color: gray;
    }
    
    .txt {
    	font-size: 20px;
    	width: 150upx;
    	height: 150upx;
    }
    
    .red {
    	background-color: #FF0000;
    }
    
    .green {
    	background-color: #008000;
    }
    
    .blue {
    	background-color: blue;
    }
    
    .orange {
    	background-color: orange;
    }
    
    .pink {
    	background-color: pink;
    }
    
    .yellow {
    	background-color: yellow;
    }
    

• 元素的属性

  • order 控制元素的顺序 在css中设置 从设置的从小到大排序
  • flex-grow 控制元素的放大比例 如果存在空余空间
  • flex-shrink 控制元素的缩小比例
  • flex-basis 设置元素固定或自动空间占比 不会把全部剩余空间给吃掉 可以放大，也可以进行缩放
  • align-self 重写align-items父属性

  .container {
  	/* 定义flex容器 */
  	display: flex;
  	/* 
  		设置容器内部元素的排列方向 
  		row: 定义排列方向 从左到右
  		row-reverse: 从右到左
  		column: 从上到下
  		column-reverse: 从下到上
  	*/
  	flex-direction: row;
  }
  
  .txt {
  	font-size: 20px;
  	width: 150upx;
  	height: 150upx;
  }
  
  /* 
  	order: 用于设置flex容器内部的每个元素的排列顺序，默认是0
  		   排序规则，由小到大
  	flex-grow: 用于设置元素的放大比例，默认为0
  			   如果为0，则不放大
  	flex-shrink: 用于定义属性的缩放比例，默认为1
  				 设置为0的时候，不进行缩放
   */
  .red {
  	background-color: #FF0000;
  	/* order: 0; */
  	/* flex-grow: 2; */
  	flex-shrink: 0;
  	flex-basis: 150upx;
  }
  
  .green {
  	background-color: #008000;
  	/* order: 2; */
  	/* flex-grow: 1; */
  	flex-shrink: 0;
  }
  
  .blue {
  	background-color: blue;
  	/* order: 1; */
  	/* flex-grow: 1; */
  	flex-shrink: 0;
  }
  

  .container {
  	/* 定义flex容器 */
  	display: flex;
  	/* 
  		设置容器内部元素的排列方向 
  		row: 定义排列方向 从左到右
  		row-reverse: 从右到左
  		column: 从上到下
  		column-reverse: 从下到上
  	*/
  	flex-direction: row;
  	
  	/* 
  		设置容器中元素在交叉轴上的对齐方式
  		stretch：（默认）当元素的高度没有设置，则元素的高度会拉伸至容器高度一致
  		flex-start: 在交叉轴上向起点位置（向上/向左）对齐
  		flex-end: 在交叉轴上向结束位置（向下/向右）对齐
  		center: 居中对齐
  		baseline: 保证元素中的文字在同一条基准线（保证每个文字都在同一条线上）
  	 */
  	align-items: baseline;
  	
  	height: 800upx;
  	background-color: #FFC0CB;
  }
  
  .txt {
  	font-size: 20px;
  	width: 150upx;
  	height: 150upx;
  }
  
  .txt2 {
  	font-size: 20px;
  	width: 150upx;
  }
  
  .red {
  	background-color: #FF0000;
  	
  	/* 
  		重写容器中元素在交叉轴上的对齐方式
  		auto: 默认，表示继承父级元素的align-items属性
  		stretch：当元素的高度没有设置，则元素的高度会拉伸至容器高度一致
  		flex-start: 在交叉轴上向起点位置（向上/向左）对齐
  		flex-end: 在交叉轴上向结束位置（向下/向右）对齐
  		center: 居中对齐
  		baseline: 保证元素中的文字在同一条基准线（保证每个文字都在同一条线上）
  	 */
  	align-self: stretch;
  }
  
  .green {
  	background-color: #008000;
  }
  
  .blue {
  	background-color: blue;
  }