【uni-app】uni-app基礎知識

• 使用 uni-app 開發 微信小程序，

1.uni-app的初體驗

1.1 開發方式

1. 使用 DCloud 公司提供的 HBuilderX 來快速開發
2. 使用腳手架來快速搭建和開發

1.2 腳手架搭建項目

（這些命令都是可以執行的）

1. 全局安裝

npm install -g @vue/cli

2. 創建項目

vue create -p dcloudio/uni-preset-vue my-project

3. 啓動項目

npm run dev:mp-weixin

4. 微信小程序開發者工具導入項目
   my-project5\dist\dev\mp-weixin

1.3 搭建過程可能出現的問題

容易出現 vue 和 vue-template-complier 版本不一致的問題

此時根據提示 重新安裝對應的 vue 版本即可 npm install [email protected]

然後在重新運行項目 npm run dev:mp-weixin

2. 項目結構介紹

2.1 項目目錄

官方文檔 https://uniapp.dcloud.io

3. 樣式和sass

3.1 rpx，vw，vh

<template>
	<view class="content">
		<view class="rpx">rpx</view>
		<view class="vw">vw</view>
	</view>
</template>

<script>
</script>

<style>
	.rpx{
		/* rpx 小程序單位 750rpx = 屏幕的寬度  */
		width: 750rpx;
		height: 100px;
		background-color: #007AFF;
	}
	.vw{
		/* vw h5單位 100vw = 屏幕的寬度 100vh = 屏幕的高度 */
		width: 50vw;
		height: 100px;
		background-color: #DD524D;
	}
</style>

3.2 安裝sass依賴

npm i node-sass sass-loader 

我安裝的時候報了一個錯

Error: Command failed: F:\python\Python37\python.EXE -c import sys; print “%s.%s.%s” % sys.version_info[:3];
Error: Can’t find Python executable “python”, you can set the PYTHON env variable.

我把 Python 刪除，也沒好·，我也很納悶

我就安裝cnpm

cnpm install

使用 cnpm安裝sass

cnpm i node-sass sass-loader 

成功了

3.3 vue組件中，style標籤上加上 lang=scss

<template>
	<view class="content">
		<view class="rpx">rpx11</view>
		<view class="vw">vw</view>
		<view class="sass">sass1</view>
	</view>
</template>

<script>
</script>

<style lang="scss">
	.rpx{}
	.vw{}
	.content{
		.sass{
			background-color: #710909;
			color: $uni-bg-color;
		}
	}
</style>

4. 基本語法

4.1 數據的展示

• 在 js 的 data 中定義數據
• 在 template 中通過 {{ 數據 }} 來顯示
• 在標籤的屬性上通過 :data-index=‘數據’ 來使用

<template>
	<view class="content">
	<view>{{title}}</view>
	<image :src="color"></image>
	</view>
</template>

<script >
export default {
	data() {
		return{
			title: "這個是標題",
			color: "../../static/logo.png"
		};
	}
}
</script>

<style>
</style>

4.2 數據的循環

• 通過 v-for 來指定要循環的數組
• item 和 index 分別位 循環項 和 循環索引
• :key 指定唯一的屬性，用來提高循環效率

<template>
	<view class="content">
		<view v-for="item in list" :key="item.id">
			{{item.id}}---{{item.text}}
		</view>
	</view>
</template>

<script >
export default {
	data() {
		return{
			list: [
				{id:1,text:'橙子'},
				{id:2,text:'橘子'},
				{id:3,text:'桃子'}
			]
		};
	}
}
</script>

<style>
</style>

4.3 條件編譯

• 通過 v-if 來決定顯示和隱藏 不適合做頻繁的切換顯示
• 通過 v-show 來決定顯示和隱藏 合適做頻繁的切換顯示

<view v-if="true">顯示1</view>
<view v-if="false">看不到2</view>
<view v-show="true">顯示3</view>
<view v-show="false">看不到4</view>

<view v-if="true">1111</view>
<view v-else-if="true">2222</view>
<view v-else>3333</view>

4.4 計算屬性

• 可以理解爲是對 data 中的數據提供了一種 加工 或者 過濾的能力
• 通過 computed 來定義計算屬性

<template>
	<view class="content">
		<view>{{cnMoney}}</view>
		<view v-for="item in filterList" :key="item.id">
			{{item.id}}---{{item.text}}
		</view>

	</view>
</template>

<script >
export default {
	data() {
		return{
			money: 10000,
			list: [
				{id:1,text:'橙子'},
				{id:2,text:'橘子'},
				{id:3,text:'桃子'}
			]
		};
	},
	computed:{
		//加工數據
		cnMoney(){
			return "￥" + this.money;
		},
		//過濾數組
		filterList(){
			//只要 id > 2 都不要顯示
			return this.list.filter(v=>v.id<=2);
		}
	}
}
</script>

<style>
</style>

5. 事件

5.1 事件的使用

• 註冊事件 @click= “handleClick”
• 定義事件監聽函數 需要在 “methods” 中定義
• 事件的傳參

<template>
	<view class="content">
		<view data-index="11" @click="handleClick(1,$event)">點我</view>
		<view data-index="22" @click="handleClick(2,$event)">點我</view>
	</view>
</template>

<script>
	export default{ 
		methods:{
			handleClick: (x,event) => {
				console.log("我不想努力了"+x);
				console.log(event);
				console.log(event.currentTarget.dataset.index);
				
			}
		}
	}
</script>

<style>
</style>

6. 組件

6.1 組件的簡單使用

1. 組件的定義

• 在 src 目錄下新建 文件夾
• 在 components 目錄下直接新建組件 *.vue

<template>
	<image src="/static/logo.png"></image>
</template>

<script>
	export default{
		
	}
</script>

<style>
</style>

2. 組件的引入

• 在頁面中 引入 組件 "import 組件名 from ‘組件路徑’ "

3. 組件的註冊

• 在頁面中實例中，新增屬性 components
• 屬性 components 是一個對象，把組件放進去註冊

4. 組件的使用

• 在頁面的標籤中，直接使用引入的組件 “<組件></組件>”

<template>
	<view class="content">
		<!-- 4 使用組件，官方推薦不用大寫 -->
		<imgBorder></imgBorder>
		<img-border></img-border>
	</view>
</template>

<script>
	//2.引入自定義組件
	import imgBorder from "@/components/img-border.vue"
	export default{ 
		//3.組件註冊
		components:{
			imgBorder:imgBorder
		},
		methods:{
			handleClick: (x,event) => {
				console.log("我不想努力了"+x);
				console.log(event);
				console.log(event.currentTarget.dataset.index);
				
			}
		}
	}
</script>

<style>
</style>

6.2 組件傳參

• 父向子傳遞參數 通過 屬性 的方式
• 子向父傳遞參數 通過 觸發事件 的方式
• 使用全局數據傳遞參數
  • 通過 掛載 vue 的原型上
  • 通過 globalData 的方式

1. 父向子傳遞參數

• 父頁面向子組件 ul-com 通過屬性名 list 傳遞了一個數組數據
• 子組件 通過 props 進行接受 數據

子組件：

<template>
	<image :src="mysrc"></image>
</template>

<script>
	export default{
		//聲明一下要接收的 父組件傳遞過來的屬性
		props:{
			mysrc:String
		}
	}
</script>

<style>
</style>

父組件：

<template>
	<view class="content">
		<!-- 4 使用組件 -->
		<imgBorder :mysrc="src1"></imgBorder>
	</view>
</template>

<script>
	//2.引入自定義組件
	import imgBorder from "@/components/img-border.vue"
	export default{ 
		data(){
			return {
				src1:"/static/logo.png"
			}
		},
		//3.組件註冊
		components:{
			imgBorder:imgBorder
		}
	}
</script>

<style>
</style>

2. 子向父傳遞參數

• 子組件通過 觸發事件 的方式向父組件傳遞數據
• 父組件通過 監聽事件 的方式來接收數據

這個有點拗

父組件：

<template>
	<view class="content">
		<view>
			子組件傳遞過來的路徑：{{src}}
		</view>
		
		<!-- 4 使用組件 -->
		<imgBorder @srcChange="handleSrcChange" :mysrc="src1"></imgBorder>
		
	</view>
</template>

<script>
	//2.引入自定義組件
	import imgBorder from "@/components/img-border.vue"
	export default{ 
		data(){
			return {
				src: "",
				src1:"/static/logo.png"
			}
		},
		//3.組件註冊
		components:{
			imgBorder:imgBorder
		},
		methods:{
			handleSrcChange(e){
				console.log("父組件的自定義事件被觸發了");
				console.log(e);
				this.src = e
			}
		}
	}
</script>

<style>
</style>

子組件：

<template>
	<image @click="handleClick" :src="mysrc"></image>
</template>

<script>
	export default{
		//聲明一下要接收的 父組件傳遞過來的屬性
		props:{
			mysrc:String
		},
		data(){
			return {
				src: "",
			}
		},
		methods:{
			handleClick(){
				console.log("女孩爲何喜歡穿短裙？？？");
				//子向父 傳遞數據 通過觸發事件
				//$emit("自定義的事件名稱","要傳遞的參數")
				this.$emit("srcChange",this.mysrc)
				
			}
		}
	}
</script>

<style>
</style>

3. 全局共享數據

• 通過 Vue 的原型共享數據
• 通過 globalData 共享數據
• vuex
• 本地存儲

1. 通過 Vue 的原型共享數據

在 main.js 中

//定義全局數據 通過 vue 的原型來實現
Vue.prototype.baseurl="www.baidu.com";

<script>
	//2.引入自定義組件
	import imgBorder from "@/components/img-border.vue"
	export default{ 
		data(){
			return {
				src: "",
			}
		},
		//3.組件註冊
		components:{
		},
		methods:{
			handleSrcChange(e){
				console.log("父組件的自定義事件被觸發了");
				console.log(e);
				this.src = e
			}
		},
		onLoad() {
			console.log(this.baseurl);
		}
	}
</script>

2. 通過 globalData 共享數據
   這個是小程序獨有的

在 App.vue 中

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		},
		globalData:{
			base:"www.360.com"
		}
	}
</script>

<style>
	/*每個頁面公共css */
</style>

onLoad() {
			console.log(this.baseurl);
			console.log(getApp().globalData.base);
		}

6.3 組件插槽

• 標籤其實也是數據中的一種，想實現動態的給 子組件傳遞 標籤，就可以使用插槽 slot
• 通過 slot 來實現佔位符

7 生命週期

7.1 常用生命週期

• uni-app 框架的生命週期結合了 vue 和 微信小程序 的生命週期
• 全局的APP中 使用 onLaunch 表示應用啓動時
• 頁面中 使用 onLoad 或者 onShow 分別表示 頁面加載完畢時 和頁面 顯示時
• 組件中使用 mounted 組件掛載完畢時

在 App.vue 中
onLaunch: function(){}

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch 應用啓動')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		},
		globalData:{
			base:"www.360.com"
		}
	}
</script>

<style>
	/*每個頁面公共css */
</style>

在頁面中：
onLoad()，onShow()

<script>
	//2.引入自定義組件
	import imgBorder from "@/components/img-border.vue"
	export default{ 
		data(){
			return {
				src: "",
				src1:"/static/logo.png"
			}
		},
		//3.組件註冊
		components:{
			imgBorder:imgBorder
		},
		methods:{
			handleSrcChange(e){
				console.log("父組件的自定義事件被觸發了");
				console.log(e);
				this.src = e
			}
		},
		onLoad() {
			console.log("頁面加載完畢");
		},
		onShow() {
			console.log("頁面被看到");
		}
	}
</script>

在組件中：
mounted()

<script>
	export default{
		//聲明一下要接收的 父組件傳遞過來的屬性
		props:{
			mysrc:String
		},
		data(){
			return {
				src: "",
			}
		},
		methods:{
			handleClick(){
				console.log("女孩爲何喜歡穿短裙？？？");
				//子向父 傳遞數據 通過觸發事件
				//$emit("自定義的事件名稱","要傳遞的參數")
				this.$emit("srcChange",this.mysrc)
				
			}
		},
		mounted() {
			console.log("組件掛載完畢")
		}
	}
</script>

7.2 完整生命週期

• uni-app https://uniapp.dcloud.io/frame?id=生命週期

• vue https://cn.vuejs.org/v2/guide/instance.html?#生命週期圖示

• 微信小程序 https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html