寫在前面：分享技術，共同進步，有不足請見諒，相關意見可評論告知 ~

有道無術，術尚可求；
有術無道，終止於術!

多端執行，架式簡化；
程式設計路漫，學無止盡！

• 條件編譯
• 生命週期
  • 應用生命週期
  • 頁面生命週期
• API
  • 網路請求
    • 發起請求
    • 檔案下載
      • 監聽的用法
  • 路由跳轉
    • 視窗動畫
      • API
      • 元件
      • pages.json

條件編譯

官方文件參考
可以使用 process.env.NODE_ENV 來獲取執行環境
執行編譯---> 開發環境
發行編譯--->生產環境

development 是開發環境
production 是生產環境

#ifdef ：只在某平臺出現
#ifndef ：  除了某平臺以外都出現
#endif ： 結尾識別符號
 

生命週期

官方文件參考
往期參考

跳轉連結

應用生命週期

應用生命週期是針對一整個應用去觸發的，如應用啟動、初始化、報錯等。

應用生命週期只能在 App.vue 中監聽，其他頁面無法監聽

程式碼演示

<script>
	export default {
		onLaunch() {
			console.log("app初始化完成")
		},
		onShow() {
			console.log("app啟動")
		},
		onHide() {
			console.log("App進入後臺")
		}
	}
</script>

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

 

頁面生命週期

頁面生命週期就類似於Vue中的生命週期，在每個頁面載入、進入、渲染、銷燬等場景觸發

onPageScroll 引數說明：

onTabItemTap 引數說明：

onNavigationBarButtonTap 引數說明：

onBackPress 回撥引數物件說明：

程式碼演示

<template>
	<view>
		<view v-for="item in arr">
			{{item}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arr: [
				// 模擬下拉情況
					1,2,3,4,5,6,7,12312,5413,423,213,14,235,23,412,312,3125,8,9,10,11,12,12,131,41,123,412,412,321,5123,41,12,312,154,3,4312,32
				]
			}
		},
		onLoad(e) {
			console.log("頁面載入", e)
		},
		onShow() {
			console.log("頁面顯示")
		},
		onPullDownRefresh() {
			this.arr = [
					1,2,3,4,5,6,7,12312,5413,423,213,14,235,23,412,312,3125,8,9,10,11,12,12,131,41,123,412,412,321,5123,41,12,312,154,3,4312,32
				]
			console.log("下拉重新整理")
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			}, 2000)
		},
		onReachBottom() {
			this.arr.push(...[
				1,2,34,4,5,6
			])
			console.log("觸底載入")
		},
		onShareAppMessage() {
			console.log("點選了分享")
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

API

官方文件參考

網路請求

發起請求

檔案下載

檔案上傳與下載對比學習

OBJECT 引數說明

注：檔案的臨時路徑，在應用本次啟動期間可以正常使用，如需持久儲存，需在主動呼叫 uni.saveFile，才能在應用下次啟動時訪問得到。

success 返回引數說明

監聽的用法

程式碼演示

<template>
	<view>
		<button type="default" @click="getData()">點我傳送請求</button>
		<button type="default" @click="download()">點我下載</button>
		 <progress :percent="percent" show-info />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				percent: 0
			}
		},
		methods: {
			getData() {
				uni.request({
					url:"http://47.102.115.146:8080/department/departmentList",
					method:"GET",
					success(e) {
						console.log("請求成功", e)
					},
					fail(e) {
						console.log("請求失敗", e)
					}
				})
			},
			download() {
				const task = uni.downloadFile({
					url:"https://ydsmarkdown.oss-cn-beijing.aliyuncs.com/audio/%E6%99%AF%E5%B2%97%E5%B1%B1%20-%20%E5%AE%88%E4%B8%9A%E6%9B%B4%E6%AF%94%E5%88%9B%E4%B8%9A%E9%9A%BE.mp3",
					success(e) {
						console.log("下載成功！", e)
					},
					fail(e) {
						console.log("下載失敗！", e)
					}
				})
				task.onProgressUpdate((e) => {
					this.percent = e.progress
				})
			}
		}
	}
</script>

<style>

</style>

檔案下載同樣可以監聽，用法和上傳一樣。

路由跳轉

官方文件參考

重點： navigateTo ,redirectTo, reLaunch

視窗動畫

本API僅App支援

視窗的顯示/關閉動畫效果，支援在 API、元件、pages.json 中配置，優先順序為：API = 元件 > pages.json。

API

有效的路由 API

• navigateTo
• navigateBack

uni.navigateTo({
    url: '../test/test',
    animationType: 'pop-in',
    animationDuration: 200
});
uni.navigateBack({
    delta: 1,
    animationType: 'pop-out',
    animationDuration: 200
});

元件

open-type 有效值

• navigateTo
• navigateBack

<navigator animation-type="pop-in" animation-duration="300" url="../test/test">navigator</navigator>
<navigator animation-type="pop-out" animation-duration="300" open-type="navigateBack" >navigator</navigator>

pages.json

pages.json 中配置的是視窗顯示的動畫

"style": {
    "app-plus": {
        "animationType": "fade-in",
        "animationDuration": 300
    }
}

顯示動畫與關閉動畫，會有預設的對應規則。但是如果通過 API 或元件配置了視窗關閉的動畫型別，則不會使用預設的型別。