uniapp基礎（一）

UniApp 是什么？有什么優勢

跨平臺高效開發

Vue.js 技術生態

?插件生態豐富

漸進式開發支持

UniApp 跨平臺兼容的實現原理

編譯時轉

運行時適配層

?條件編譯

性能優化策略

1.預編譯模

2.原生組件混合渲

3.分包加載

UniApp 的生命周期鉤子有哪些？

應用生命周期鉤子

頁面生命周期鉤子

組件生命周期鉤子

注意事項

UniApp 與原生小程序生命周期的區別

生命周期鉤子名稱不同

生命周期調用順序不同

組件生命周期支持不同

全局生命周期擴展

兼容性差異

UniApp 的頁面路由？如何實現頁面跳轉？

路由配置

路由跳轉方法

1.navigateTo

2.redirectTo

3.reLaunch

4.switchTab

5.navigateBack

?預加載頁面(preloadPage)

路由傳參

路由攔截

動態路由

注意事項

UniApp 支持哪些小程序平臺

UniApp 全局樣式/局部樣式?

全局樣式

局部樣式

樣式優先級與注意事項

pages.json 核心字段

UniApp 是什么？有什么優勢

UniApp 是一個使用 Vue.js 開發跨平臺應用的框架。

跨平臺高效開發

采用 "一次編寫，多端發布" 模式，顯著降低開發成本
支持 14+ 平臺編譯，覆蓋主流移動端、Web 端及小程序生態
開發效率提升約 300%（相較原生多端獨立開發）

Vue.js 技術生態

完全兼容 Vue.js 語法，前端開發者零門檻上手
支持 Vuex 狀態管理、Vue Router 路由等核心能力

<template><view class="container"><text>{{ message }}</text></view>
</template>
<script>
export default {data() {return { message: "Hello UniApp!" }}
}
</script>

?插件生態豐富

官方插件市場提供 2000+ 即用組件
支持第三方 SDK 便捷集成（如支付、推送、統計）
示例：一鍵集成微信登錄功能

uni.login({provider: 'weixin',success: res => console.log(res.code)
})

漸進式開發支持

支持混合開發模式：可嵌入原生頁面或與原生代碼互調
提供條件編譯指令實現平臺差異化

// #ifdef H5
console.log("當前運行在Web環境");
// #endif

UniApp 跨平臺兼容的實現原理

編譯時轉

UniApp 使用 Vue.js 作為開發語法，在編譯階段通過條件編譯和代碼轉換技術，將 Vue 代碼轉換為目標平臺（如微信小程序、H5、iOS、Android 等）的原生代碼。?

運行時適配層

UniApp 在運行時通過統一的 JavaScript 核心引擎（如 V8 或 JavaScriptCore）執行邏輯代碼，同時提供一套跨平臺的 API 抽象層。這些 API 在調用時動態映射到不同平臺的原生 API 上，例如 uni.request 在微信小程序中會轉換為 wx.request，在 H5 中則使用 XMLHttpRequest 或 fetch。?

?條件編譯

// 條件編譯示例
#ifdef MP-WEIXIN
console.log('這是微信小程序環境');
#endif

性能優化策略

1.預編譯模

在非 H5 平臺（如小程序），模板會在編譯時預先轉換為目標平臺的模板語言，減少運行時的解析開銷。?

2.原生組件混合渲

對于高性能需求場景（如地圖、視頻），UniApp 允許直接調用平臺原生組件，與框架組件混合渲染。?

3.分包加載

支持將應用拆分為多個子包，按需加載以提升啟動速度，尤其在微信小程序等對包大小有限制的平臺中。?

UniApp 的生命周期鉤子有哪些？

UniApp 的生命周期鉤子分為應用生命周期、頁面生命周期和組件生命周期三部分

應用生命周期鉤子

應用生命周期鉤子在 App.vue 中定義，用于監聽整個應用的全局狀態。

onLaunch：應用初始化時觸發，全局只觸發一次。
onShow：應用啟動或從后臺進入前臺時觸發。
onHide：應用從前臺進入后臺時觸發。
onError：應用發生腳本錯誤或 API 調用失敗時觸發。
onUnhandledRejection：應用未處理的 Promise 拒絕事件觸發。

// App.vue 示例
export default {onLaunch(options) {console.log('應用初始化', options);},onShow(options) {console.log('應用顯示', options);},onHide() {console.log('應用隱藏');}
}

頁面生命周期鉤子

頁面生命周期鉤子在頁面（.vue 文件）中定義，用于監聽頁面的加載、顯示、隱藏等狀態。

onLoad：頁面加載時觸發，接收頁面參數。
onShow：頁面顯示時觸發。
onReady：頁面初次渲染完成時觸發。
onHide：頁面隱藏時觸發。
onUnload：頁面卸載時觸發。
onPullDownRefresh：頁面下拉刷新時觸發。
onReachBottom：頁面上拉觸底時觸發。
onShareAppMessage：點擊右上角分享時觸發。
onPageScroll：頁面滾動時觸發。
onResize：頁面尺寸變化時觸發（如橫豎屏切換）。

// 頁面示例
export default {onLoad(options) {console.log('頁面加載', options);},onShow() {console.log('頁面顯示');},onReady() {console.log('頁面渲染完成');}
}

組件生命周期鉤子

組件生命周期鉤子在自定義組件中定義，與 Vue 的生命周期類似，但增加了 UniApp 特有的鉤子。

beforeCreate：組件實例初始化之前觸發。
created：組件實例創建完成時觸發。
beforeMount：組件掛載到 DOM 前觸發。
mounted：組件掛載到 DOM 后觸發。
beforeUpdate：組件數據更新前觸發。
updated：組件數據更新后觸發。
beforeDestroy：組件銷毀前觸發。
destroyed：組件銷毀后觸發。
onBackPress：頁面返回按鈕按下時觸發（僅 H5 和 App 支持）。

// 組件示例
export default {created() {console.log('組件創建完成');},mounted() {console.log('組件掛載完成');},onBackPress() {console.log('返回按鈕按下');}
}

注意事項

應用生命周期僅 App.vue 可用，pages 和組件中無效。
頁面生命周期僅在頁面中可用，組件中無效。
組件生命周期與 Vue 保持一致，但需注意平臺差異（如 onBackPress 僅部分平臺支持）。
部分鉤子（如 onPullDownRefresh）需在 pages.json 中配置啟用。

UniApp 與原生小程序生命周期的區別

生命周期鉤子名稱不同

原生小程序的頁面生命周期鉤子以 on 開頭，例如 onLoad、onShow。
UniApp 的生命周期鉤子名稱與 Vue 類似，例如 created、mounted，同時兼容小程序的鉤子。

生命周期調用順序不同

UniApp：在頁面加載時，會先觸發 Vue 的生命周期（如 created、mounted），再觸發小程序的頁面生命周期（如 onLoad、onShow）。
原生小程序：僅觸發自身的頁面生命周期鉤子（如 onLoad、onShow），沒有 Vue 的生命周期。

組件生命周期支持不同

UniApp：支持 Vue 的組件生命周期（如 created、mounted），適用于組件開發。
原生小程序：組件使用 lifetimes 字段定義生命周期（如 attached、detached），與頁面生命周期不同。

全局生命周期擴展

UniApp：支持應用級別的生命周期（如 onLaunch、onShow），同時兼容 Vue 的全局邏輯。
原生小程序：僅支持 App 中定義的生命周期（如 onLaunch、onShow），無法直接使用 Vue 的全局邏輯。

兼容性差異

UniApp 的生命周期設計是為了兼容多端（H5、小程序、App），因此部分鉤子在特定平臺可能不生效。
原生小程序的生命周期僅針對微信小程序，不存在跨平臺兼容問題。

UniApp 的頁面路由？如何實現頁面跳轉？

路由配置

UniApp 的路由配置在 pages.json 文件中完成。每個頁面需要在此文件中注冊，否則無法跳轉。配置示例：

{"pages": [{"path": "pages/index/index","style": {"navigationBarTitleText": "首頁"}},{"path": "pages/detail/detail","style": {"navigationBarTitleText": "詳情頁"}}]
}

路由跳轉方法

`1.navigateTo`

navigateTo 保留當前頁面，跳轉到新頁面：

uni.navigateTo({url: '/pages/detail/detail?id=1'
});

?參數通過 URL 傳遞，目標頁面在 onLoad 生命周期中接收：

onLoad(options) {console.log(options.id); // 輸出 1
}

2.`redirectTo`

redirectTo 關閉當前頁面，跳轉到新頁面：

uni.redirectTo({url: '/pages/detail/detail?id=1'
});

3.`reLaunch`

reLaunch 關閉所有頁面，打開新頁面：

uni.reLaunch({url: '/pages/index/index'
});

`4.switchTab`

switchTab 跳轉到 TabBar 頁面：

uni.switchTab({url: '/pages/tabbar/tabbar'
});

5.`navigateBack`

navigateBack 返回上一頁或多頁：

uni.navigateBack({delta: 1 // 返回層數
});

?預加載頁面(`preloadPage`)

提前加載目標頁面資源，提升用戶體驗：

uni.preloadPage({url: '/pages/detail/detail'
});

路由傳參

跳轉時可以傳遞參數，目標頁面通過 onLoad 生命周期接收：

// 跳轉時傳遞參數
uni.navigateTo({url: '/pages/detail/detail?id=1&name=test'
});// 目標頁面接收參數
onLoad(options) {console.log(options.id); // 輸出 1console.log(options.name); // 輸出 test
}

路由攔截

可以通過全局前置守衛 beforeEach 實現路由攔截：

// main.js 中設置
uni.addInterceptor('navigateTo', {invoke(args) {if (!hasLogin()) {uni.redirectTo({url: '/pages/login/login'});return false;}return true;}
});

動態路由

UniApp 支持動態路由，通過 : 定義參數：

{"path": "pages/detail/:id"
}

跳轉時傳遞動態參數：

uni.navigateTo({url: '/pages/detail/1'
});

目標頁面通過 this.$route.params 獲取參數：

onLoad() {console.log(this.$route.params.id); // 輸出 1
}

注意事項

跳轉 TabBar 頁面必須使用 switchTab。
跳轉路徑需以 / 開頭，對應 pages.json 中的配置。
navigateTo 不能跳轉到 TabBar 頁面。
路由傳參長度有限制，建議傳遞必要參數。
動態路由需要確保路徑匹配，否則可能無法跳轉。

UniApp 支持哪些小程序平臺

在 manifest.json 中配置平臺

{"mp-weixin": {"appid": "微信AppID"}
}

UniApp 是一個跨平臺開發框架，支持編譯到多個小程序平臺。以下是目前主流支持的平臺：

微信小程序
支付寶小程序
百度智能小程序
字節跳動小程序（抖音、今日頭條等）
QQ小程序
快手小程序
飛書小程序
釘釘小程序
京東小程序

使用 process.env.UNI_PLATFORM 判斷平臺，實現差異化邏輯。

UniApp 全局樣式/局部樣式?

全局樣式

全局樣式適用于整個項目，可通過 App.vue 文件或在 uni.scss 中定義。在 App.vue 的 <style> 標簽中編寫的樣式默認全局生效，但需注意避免樣式污染。

在 uni.scss 中定義 SCSS 變量或混合器，其他文件通過 @import 引入即可使用。例如：

$primary-color: #007AFF;

項目根目錄的 common 文件夾可存放公共樣式文件（如 common.css），在需要的頁面通過 @import 引入。UniApp 默認會編譯所有頁面和組件的樣式，全局樣式無需手動引入。

局部樣式

局部樣式通過單文件組件（.vue 文件）的 <style> 標簽實現。添加 scoped 屬性可限制樣式僅作用于當前組件，例如：

<style scoped>
.button {background: $primary-color;
}
</style>

樣式優先級與注意事項

UniApp 中樣式優先級遵循 CSS 規則，但需注意：

全局樣式可能被局部樣式覆蓋
!important 會提高樣式優先級
scoped 樣式通過添加屬性選擇器實現隔離

跨平臺樣式差異可通過條件編譯處理：

/* #ifdef H5 */
.h5-style { color: blue; }
/* #endif */

pages.json 核心字段

pages
必填字段，用于配置應用頁面路徑及窗口表現。每個頁面配置包含以下屬性：

path：頁面路徑，需在根目錄下創建對應文件（如 pages/index/index）。
style：頁面窗口樣式，可覆蓋全局配置，支持 navigationBarTitleText（標題）、navigationBarBackgroundColor（導航欄背景色）等。

globalStyle
全局默認窗口樣式，適用于所有頁面。常見字段包括：

navigationBarTextStyle：導航欄標題顏色（black/white）。
navigationBarTitleText：默認標題文字。
backgroundColor：窗口背景色。
enablePullDownRefresh：是否開啟下拉刷新（默認為 false）。

tabBar
配置底部或頂部選項卡欄，需包含以下子字段：

list：數組形式，每個選項卡需配置 pagePath（頁面路徑）、text（顯示文字）、iconPath（未選中圖標路徑）、selectedIconPath（選中圖標路徑）。
color：選項卡默認顏色。
selectedColor：選中時顏色。
backgroundColor：選項卡背景色。

condition
用于配置啟動模式的條件，僅開發環境生效。支持模擬路徑參數、啟動頁面等場景。

subPackages
分包加載配置，提升首屏加載速度。需指定 root（分包根目錄）和 pages（分包頁面路徑列表）。

preloadRule
配置預加載規則，通過 network（網絡條件）和 packages（預加載的分包）優化性能。

easycom
自動按需引入組件配置，簡化組件導入。默認規則為 "autoscan": true，支持自定義匹配規則。

usingComponents
手動配置自定義組件路徑，適用于非 easycom 模式的組件引入。

示例代碼片段

{"pages": [{"path": "pages/index/index","style": {"navigationBarTitleText": "首頁"}}],"globalStyle": {"navigationBarTextStyle": "black","backgroundColor": "#F8F8F8"},"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首頁","iconPath": "static/icons/home.png","selectedIconPath": "static/icons/home-active.png"}]}
}