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/><script><style> 這三個標籤在每個頁面都只能存在一個 -->
<!-- template: View -->
   <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" > <!-- 錯誤寫法：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: 375px;height: 375px;"></view> -->
	<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中的屬性來進行雙向綁定
比如
<input type="text" v-bind:url="url"> <script> export default {data() {return {url: "../hello/hello"}}}</script>

事件

可以用 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"
			/>
			<!-- 不推薦 @longtap="longtap" -->
	</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>
		
		<!-- v-if v-show 的區別：前者是否會在dom中被移除，後者 display:none -->
		<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>
				擅長技能: 
				<!-- <view v-for="sk in stuObj.skill">
					{{sk}},
				</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">		
		<!-- :key 保證組件和數據捆綁唯一 -->
			<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>
		
		<!-- #ifdef H5 -->
		<view>只在H5編譯</view>
		<!-- #endif -->
		
		<!-- #ifdef APP-PLUS -->
		<view>只在ios/安卓編譯</view>
		<!-- #endif -->
		
		<!-- #ifdef MP -->
		<view>只在小程序(微信、支付寶、百度)進行編譯</view>
		<!-- #endif -->
		
		<!-- #ifdef MP-WEIXIN -->
		<view>只在微信小程序進行編譯</view>
		<!-- #endif -->
		
		
		<!-- #ifndef MP -->
		<view>不在小程序全短編譯，只在ios/安卓/h5編譯</view>
		<!-- #endif -->
		
		<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;
}

uni-app學習筆記

什麼是UniApp

開發工具

框架基礎

MVC

MVVM

生命週期

尺寸單位

數據綁定

路由

v-bind指令對屬性的數據綁定

事件

條件渲染

列表渲染

跨端兼容

Flex 佈局

linux安裝cuda和cudnn

測試人員都是畫畫大神，讓我看看誰還不會用代碼圖？

Object.values()對象遍歷

Mellanox網卡開啓SR-IOV

我拍了拍Redis，被移出了羣聊···

網絡現代化通向雲原生應用的高速公路

面試官：說說你對序列化的理解

我宣佈，這是我找到的史上AI最全論文體系！

數據結構與算法(13)--二叉樹

數據結構與算法(18)--線性表相關概念補充

數據結構與算法(15)--圖的基本概念

數據結構與算法(16)--圖的存儲結構

入坑樹莓派

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結