【uni-app基础教程】
uni-app基礎(chǔ)教程
uni-app是一個(gè)使用Vue.js開(kāi)發(fā)所有前端應(yīng)用的框架，開(kāi)發(fā)者編寫(xiě)一套代碼，可發(fā)布到iOS，Android，H5，以及各種小程序（微信/支付寶/百度/頭條/ QQ /釘釘）等多個(gè)平臺(tái)
一、環(huán)境配置
1.下載HBuilderX
通過(guò)HBuilderX可視化界面，HBuilderX內(nèi)置相關(guān)環(huán)境，開(kāi)箱即用，無(wú)需配置nodejs
開(kāi)始之前，開(kāi)發(fā)者需先下載安裝如下工具：
- HBuilderX：官方IDE下載地址
下載App開(kāi)發(fā)版，可開(kāi)箱即用；如下載標(biāo)準(zhǔn)版，在運(yùn)行或發(fā)行uni-app時(shí)，會(huì)提示安裝uni-app插件，插件下載完成后方可使用。
如使用cli方式創(chuàng)建項(xiàng)目，可直接下載標(biāo)準(zhǔn)版，因?yàn)閡ni-app編譯插件被安裝到項(xiàng)目下了
2.創(chuàng)建uni-app
在點(diǎn)擊工具欄里的文件->新建->項(xiàng)目：
選擇uni-app類(lèi)型，輸入項(xiàng)目名，選擇模板，點(diǎn)擊創(chuàng)建，即可成功創(chuàng)建。
uni-app自帶的模板有。Hello uni-app，是官方的組件和API示例。還有一個(gè)重要模板是uni ui項(xiàng)目模板，日常開(kāi)發(fā)推薦使用該模板，已內(nèi)置大量常用組件。
3.運(yùn)行uni-app
提示
- 如果是第一次使用，需要配置開(kāi)發(fā)工具的相關(guān)路徑。請(qǐng)點(diǎn)擊工具欄的運(yùn)行->運(yùn)行到小程序模擬器->運(yùn)行設(shè)置，配置相應(yīng)的小程序開(kāi)發(fā)者工具的路徑。
- 支付寶/百度/字節(jié)跳動(dòng)小程序工具，不支持直接指定項(xiàng)目啟動(dòng)并運(yùn)行。因此開(kāi)發(fā)工具啟動(dòng)后，替換HBuilderX控制臺(tái)中提示的項(xiàng)目路徑，在相應(yīng)的小程序開(kāi)發(fā)者工具中打開(kāi)。
- 如果自動(dòng)啟動(dòng)小程序22
- 】 發(fā)工具失敗，請(qǐng)手動(dòng)啟動(dòng)小程序開(kāi)發(fā)工具放入HBuilderX控制臺(tái)提示的項(xiàng)目路徑，打開(kāi)項(xiàng)目。
運(yùn)行的快捷鍵是Ctrl+r。HBuilderX還提供了快捷運(yùn)行菜單，可以按數(shù)字快速選擇要運(yùn)行的設(shè)備：
4.目錄結(jié)構(gòu)
一個(gè) uni-app 工程，默認(rèn)包含如下目錄及文件：
┌─components uni-app組件目錄 │ └─comp-a.vue 可復(fù)用的a組件 ├─hybrid 存放本地網(wǎng)頁(yè)的目錄，詳見(jiàn) ├─platforms 存放各平臺(tái)專(zhuān)用頁(yè)面的目錄，詳見(jiàn) ├─pages 業(yè)務(wù)頁(yè)面文件存放的目錄 │ ├─index │ │ └─index.vue index頁(yè)面 │ └─list │ └─list.vue list頁(yè)面 ├─static 存放應(yīng)用引用靜態(tài)資源（如圖片、視頻等）的目錄，注意：靜態(tài)資源只能存放于此 ├─wxcomponents 存放小程序組件的目錄，詳見(jiàn) ├─main.js Vue初始化入口文件 ├─App.vue 應(yīng)用配置，用來(lái)配置App全局樣式以及監(jiān)聽(tīng) 應(yīng)用生命周期 ├─manifest.json 配置應(yīng)用名稱(chēng)、appid、logo、版本等打包信息，詳見(jiàn) └─pages.json 配置頁(yè)面路由、導(dǎo)航條、選項(xiàng)卡等頁(yè)面類(lèi)信息，詳見(jiàn)5.手機(jī)模擬器
下載手機(jī)模擬器
MUMU模擬器：https://mumu.163.com/
模擬器端口：
| 手機(jī)模擬器的名稱(chēng) | 默認(rèn)端口號(hào) |
| Genymotion模擬器 | 5555 |
| 夜神模擬器 | 62001/52001 |
| 海馬玩模擬器 | 26944 |
| mumu模擬器 | 7555 |
| 天天模擬器 | 6555 |
| 逍遙安卓模擬器 | 21503 |
| BlueStacks 藍(lán)疊3模擬器 | 5555 |
| 雷神安卓模擬器 | 5555 |
| 騰訊手游助手 | 5555 |
應(yīng)用生命周期
uni-app 支持如下應(yīng)用生命周期函數(shù)：
| onLaunch | 當(dāng)uni-app初始化完成時(shí)觸發(fā)（局部只觸發(fā)一次） |
| onShow | 當(dāng)uni-app啟動(dòng)，或從后臺(tái)進(jìn)入前臺(tái)顯示 |
| onHide | 當(dāng)uni-app從前臺(tái)進(jìn)入后臺(tái) |
| onError | 當(dāng)uni-app報(bào)錯(cuò)時(shí)觸發(fā) |
| onUniNViewMessage | 對(duì)nvue頁(yè)面發(fā)送的數(shù)據(jù)進(jìn)行監(jiān)聽(tīng)，可參考 nvue 向 vue 通訊 |
| onUnhandledRejection | 對(duì)未處理的 Promise 拒絕事件監(jiān)聽(tīng)函數(shù)（2.8.1+） |
| onPageNotFound | 頁(yè)面不存在監(jiān)聽(tīng)函數(shù) |
| onThemeChange | 監(jiān)聽(tīng)系統(tǒng)主題變化 |
注意：應(yīng)用生命周期僅可在 App.vue 中監(jiān)聽(tīng)，在其他頁(yè)面監(jiān)聽(tīng)無(wú)效
頁(yè)面生命周期
uni-app 支持如下頁(yè)面生命周期函數(shù)：
| onInit | 監(jiān)聽(tīng)頁(yè)面初始化，其參數(shù)通onLoad參數(shù)，為上個(gè)頁(yè)面?zhèn)鬟f的數(shù)據(jù)，參數(shù)類(lèi)型為Object（用于頁(yè)面?zhèn)鲄?#xff09;，觸發(fā)時(shí)機(jī)早于onLoad | 百度小程序 | 3.1.0+ |
| onLoad | 監(jiān)聽(tīng)頁(yè)面加載，其參數(shù)為上個(gè)頁(yè)面?zhèn)鬟f的數(shù)據(jù)，參數(shù)類(lèi)型為 Object（用于頁(yè)面?zhèn)鲄?#xff09; | ||
| onShow | 監(jiān)聽(tīng)頁(yè)面顯示。頁(yè)面每次出現(xiàn)在屏幕上都觸發(fā)，包括從下級(jí)頁(yè)面點(diǎn)返回進(jìn)入當(dāng)前頁(yè)面 | ||
| onReady | 監(jiān)聽(tīng)頁(yè)面初次渲染完成。注意如果渲染速度快，會(huì)在頁(yè)面進(jìn)入動(dòng)畫(huà)完成前觸發(fā) | ||
| onHide | 監(jiān)聽(tīng)頁(yè)面隱藏 | ||
| onUnload | 監(jiān)聽(tīng)頁(yè)面卸載 | ||
| onResize | 監(jiān)聽(tīng)窗口尺寸變化 | App，微信小程序 | |
| onPullDownRefresh | 監(jiān)聽(tīng)用戶(hù)拖動(dòng)動(dòng)作，一般用于拖動(dòng)刷新，參考示例 | ||
| onReachBottom | 頁(yè)面上拉觸底事件的處理函數(shù) | ||
| onTabItemTap | 單擊選項(xiàng)卡時(shí)觸發(fā)，參數(shù)為對(duì)象，具體見(jiàn)以下注意事項(xiàng) | 微信小程序，百度小程序，H5，App（自定義組件模式） | |
| onShareAppMessage | 用戶(hù)點(diǎn)擊右上角分享 | 微信小程序，百度小程序，字節(jié)跳動(dòng)小程序，支付寶小程序 | |
| onPageScroll | 監(jiān)聽(tīng)頁(yè)面滾動(dòng)，參數(shù)為對(duì)象 | nvue 暫不支持 | |
| onNavigationBarButtonTap | 監(jiān)聽(tīng)原生標(biāo)題欄按鈕點(diǎn)擊事件，參數(shù)為對(duì)象 | 5+ App，H5 | |
| onBackPress | 監(jiān)聽(tīng)頁(yè)面返回，返回事件= {from：backbutton，navigationBack}，backbutton 表示來(lái)源是左上角返回按鈕或android 返回鍵； navigateBack 表示來(lái)源是 uni.navigateBack；詳細(xì)說(shuō)明及使用：onBackPress 詳解。支付寶小程序只有真機(jī)能觸發(fā)，只能監(jiān)聽(tīng)非 navigateBack 引起的返回，不可阻止默認(rèn)行為。 | App，H5、支付寶小程序 | |
| onNavigationBarSearchInputChanged | 監(jiān)聽(tīng)原生標(biāo)題欄搜索輸入框輸入內(nèi)容變化事件 | App，H5 | 1.6.0 |
| onNavigationBarSearchInputConfirmed | 監(jiān)聽(tīng)原生標(biāo)題欄搜索輸入框搜索事件，用戶(hù)點(diǎn)擊軟鍵盤(pán)上的“搜索”按鈕時(shí)觸發(fā)。 | App，H5 | 1.6.0 |
| onNavigationBarSearchInputClicked | 監(jiān)聽(tīng)原生標(biāo)題欄搜索輸入框點(diǎn)擊事件 | App，H5 | 1.6.0 |
| onShareTimeline | 監(jiān)聽(tīng)用戶(hù)點(diǎn)擊右上角轉(zhuǎn)發(fā)到朋友去 | 微信小程序 | 2.8.1+ |
| onAddToFavorites | 監(jiān)聽(tīng)用戶(hù)點(diǎn)擊右上角收藏 | 微信小程序 | 2.8.1+ |
onInit使用注意
- 僅百度小程序基礎(chǔ)庫(kù) 3.260 以上支持 onInit 生命周期
- 其他版本或平臺(tái)可以同時(shí)使用 onLoad 生命周期進(jìn)行兼容，注意避免重復(fù)執(zhí)行相同邏輯
- 不依賴(lài)頁(yè)面?zhèn)鲄⒌倪壿嬁梢灾苯邮褂?created 生命周期替代
組件生命周期
uni-app 組件支持的生命周期，與 vue 標(biāo)準(zhǔn)組件的生命周期相同。這里沒(méi)有頁(yè)面級(jí)的 onLoad 等生命周期：
| beforeCreate | 在實(shí)例初始化之后被調(diào)用。詳見(jiàn) | ||
| created | 在實(shí)例創(chuàng)建完成后被立即調(diào)用。詳見(jiàn) | ||
| beforeMount | 在掛載開(kāi)始之前被調(diào)用。詳見(jiàn) | ||
| mounted | 掛載到實(shí)例上去之后調(diào)用。詳見(jiàn) 注意：此處并不能確定子組件被全部掛載，如果需要子組件完全掛載之后在執(zhí)行操作可以使用$nextTickVue官方文檔 | ||
| beforeUpdate | 數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在虛擬 DOM 打補(bǔ)丁之前。詳見(jiàn) | 僅 H5 平臺(tái)支持 | |
| updated | 由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補(bǔ)丁，在這之后會(huì)調(diào)用該鉤子。詳見(jiàn) | 僅 H5 平臺(tái)支持 | |
| beforeDestroy | 實(shí)例銷(xiāo)毀之前調(diào)用。在這一步，實(shí)例仍然完全可用。詳見(jiàn) | ||
| destroyed | Vue 實(shí)例銷(xiāo)毀后調(diào)用。調(diào)用后，Vue 實(shí)例指示的所有東西都會(huì)解綁定，所有的事件監(jiān)聽(tīng)器會(huì)被移除，所有的子實(shí)例也會(huì)被銷(xiāo)毀。詳見(jiàn) |
三、路由
uni-app頁(yè)面路由為框架統(tǒng)一管理，需要在pages.json里配置每個(gè)路由頁(yè)面的路徑和頁(yè)面樣式。類(lèi)似的小程序在app.json中配置頁(yè)面路由相同
頁(yè)面棧
框架以棧的形式管理當(dāng)前所有頁(yè)面，當(dāng)發(fā)生路由切換的時(shí)候，頁(yè)面棧的表現(xiàn)如下：
| 初始化 | 新頁(yè)面入棧 | uni-app：的第一個(gè)頁(yè)面 |
| 新頁(yè)面 | 新頁(yè)面入棧 | 調(diào)用API uni.navigateTo ，使用組件 <navigator open-type =“ navigate” /> |
| 頁(yè)面重啟 | 當(dāng)前頁(yè)面出棧，新頁(yè)面入棧 | 調(diào)用API uni.redirectTo ，使用組件 <navigator open-type =“ redirectTo” /> |
| 頁(yè)面返回 | 頁(yè)面不斷出棧，直到目標(biāo)返回頁(yè) | 調(diào)用API uni.navigateBack ，使用組件 <navigator open-type =“ navigateBack” /> ，用戶(hù)按左上角返回按鈕，安卓用戶(hù)點(diǎn)擊物理后退鍵 |
| 標(biāo)簽切換 | 頁(yè)面全部出棧，只留下新的標(biāo)簽頁(yè)面 | 調(diào)用API uni.switchTab ，使用組件 <navigator open-type =“ switchTab” /> ，用戶(hù)切換Tab |
| 重加載 | 頁(yè)面全部出棧，只留下新的頁(yè)面 | 調(diào)用API uni.reLaunch ，使用組件 <navigator open-type =“ reLaunch” /> |
判斷平臺(tái)
平臺(tái)判斷有2種場(chǎng)景，一種是在編譯期判斷，一種是在運(yùn)行期判斷。
- 編譯期判斷編譯期判斷，即條件編譯，不同平臺(tái)在編譯出包后已經(jīng)是不同的代碼
- 運(yùn)行期診斷運(yùn)行期判斷是指代碼已經(jīng)打入包中，仍然需要在運(yùn)行期判斷平臺(tái)，此時(shí)可使用uni.getSystemInfoSync().platform判斷客戶(hù)端環(huán)境是Android，iOS還是小程序開(kāi)發(fā)工具（在百度小程序開(kāi)發(fā)工具，微信小程序開(kāi)發(fā)工具，支付寶小程序開(kāi)發(fā)工具中使用uni.getSystemInfoSync().platform返回值重置devtools）。
四、樣式布局
uni-app 支持的通用 css 單位包括 px、rpx
- px 即屏幕像素
- rpx 即響應(yīng)式px，一種根據(jù)屏幕寬度自適應(yīng)的動(dòng)態(tài)單位。以750寬的屏幕為基準(zhǔn)，750rpx恰好為屏幕寬度。屏幕變寬，rpx 實(shí)際顯示效果會(huì)等比放大。
vue頁(yè)面支持普通H5單位，但在nvue里不支持：
- rem 默認(rèn)根字體大小為 屏幕寬度/20（微信小程序、字節(jié)跳動(dòng)小程序、App、H5）
- vh viewpoint height，視窗高度，1vh等于視窗高度的1%
- vw viewpoint width，視窗寬度，1vw等于視窗寬度的1%
nvue還不支持百分比單位。
App端，在 pages.json 里的 titleNView 或頁(yè)面里寫(xiě)的 plus api 中涉及的單位，只支持 px。注意此時(shí)不支持 rpx
nvue中，uni-app 模式（nvue 不同編譯模式介紹）可以使用 px 、rpx，表現(xiàn)與 vue 中一致。weex 模式目前遵循weex的單位，它的單位比較特殊：
- px:，以750寬的屏幕為基準(zhǔn)動(dòng)態(tài)計(jì)算的長(zhǎng)度單位，與 vue 頁(yè)面中的 rpx 理念相同。（一定要注意 weex 模式的 px，和 vue 里的 px 邏輯不一樣。）
- wx：與設(shè)備屏幕寬度無(wú)關(guān)的長(zhǎng)度單位，與 vue 頁(yè)面中的 px 理念相同
樣式導(dǎo)入
使用@import語(yǔ)句可以導(dǎo)入外聯(lián)樣式表，@import后跟需要導(dǎo)入的外聯(lián)樣式表的相對(duì)路徑，用;表示語(yǔ)句結(jié)束。
<style>@import "../../common/uni.css";.uni-card {box-shadow: none;} </style>內(nèi)聯(lián)樣式
框架組件上支持使用 style、class 屬性來(lái)控制組件的樣式。
- style：
- class：
選擇器
目前支持的選擇器有：
| .class | .intro | 選擇所有擁有 class=“intro” 的組件 |
| #id | #firstname | 選擇擁有 id=“firstname” 的組件 |
| element | view | 選擇所有 view 組件 |
| element, element | view, checkbox | 選擇所有文檔的 view 組件和所有的 checkbox 組件 |
| ::after | view::after | 在 view 組件后邊插入內(nèi)容，僅微信小程序和App生效 |
| ::before | view::before | 在 view 組件前邊插入內(nèi)容，僅微信小程序和App生效 |
注意：
- 在 uni-app 中不能使用 * 選擇器。
- page 相當(dāng)于 body 節(jié)點(diǎn)，例如：page { background-color:#ccc; }
全局樣式與局部樣式
定義在 App.vue 中的樣式為全局樣式，作用于每一個(gè)頁(yè)面。在 pages 目錄下 的 vue 文件中定義的樣式為局部樣式，只作用在對(duì)應(yīng)的頁(yè)面，并會(huì)覆蓋 App.vue 中相同的選擇器。
注意：
- App.vue 中通過(guò) @import 語(yǔ)句可以導(dǎo)入外聯(lián)樣式，一樣作用于每一個(gè)頁(yè)面。
- nvue頁(yè)面暫不支持全局樣式
背景圖片
uni-app 支持使用在 css 里設(shè)置背景圖片，使用方式與普通 web 項(xiàng)目大體相同，但需要注意以下幾點(diǎn)：
- 支持 base64 格式圖片。
- 支持網(wǎng)絡(luò)路徑圖片。
- 小程序不支持在css中使用本地文件，包括本地的背景圖和字體文件。需以base64方式方可使用
- 使用本地路徑背景圖片需注意：在背景圖片小于 40kb 時(shí)，uni-app 編譯到不支持本地背景圖的平臺(tái)時(shí)，會(huì)自動(dòng)將其轉(zhuǎn)化為 base64 格式；圖片大于等于 40kb，會(huì)有性能問(wèn)題，不建議使用太大的背景圖，如必須使用，則需自己將其轉(zhuǎn)換為 base64 格式使用，或?qū)⑵渑驳椒?wù)器上，從網(wǎng)絡(luò)地址引用。本地背景圖片的引用路徑推薦使用以 ~@ 開(kāi)頭的絕對(duì)路徑。 .test2 { background-image: url(‘~@/static/logo.png’); }
注意
- 微信小程序不支持相對(duì)路徑（真機(jī)不支持，開(kāi)發(fā)工具支持）
字體圖標(biāo)
uni-app 支持使用字體圖標(biāo)，使用方式與普通 web 項(xiàng)目相同，需要注意以下幾點(diǎn)：
- 支持 base64 格式字體圖標(biāo)。
- 支持網(wǎng)絡(luò)路徑字體圖標(biāo)。
- 小程序不支持在css中使用本地文件，包括本地的背景圖和字體文件。需以base64方式方可使用。
- 網(wǎng)絡(luò)路徑必須加協(xié)議頭 https。
- 從 http://www.iconfont.cn 上拷貝的代碼，默認(rèn)是沒(méi)加協(xié)議頭的。
- 從 http://www.iconfont.cn 上下載的字體文件，都是同名字體（字體名都叫iconfont，安裝字體文件時(shí)可以看到），在nvue內(nèi)使用時(shí)需要注意，此字體名重復(fù)可能會(huì)顯示不正常。
- 使用本地路徑圖標(biāo)字體需注意：在字體文件小于 40kb 時(shí)，uni-app 會(huì)自動(dòng)將其轉(zhuǎn)化為 base64 格式；字體文件大于等于 40kb，仍轉(zhuǎn)換為 base64 方式使用的話(huà)可能有性能問(wèn)題，如必須使用，則需自己將其轉(zhuǎn)換為 base64 格式使用，或?qū)⑵渑驳椒?wù)器上，從網(wǎng)絡(luò)地址引用；字體文件的引用路徑推薦使用以 ~@ 開(kāi)頭的絕對(duì)路徑。 @font-face { font-family: test1-icon; src: url(‘~@/static/iconfont.ttf’); }
nvue中不可直接使用css的方式引入字體文件，需要使用以下方式在js內(nèi)引入。nvue內(nèi)不支持本地路徑引入字體，請(qǐng)使用網(wǎng)絡(luò)鏈接或者base64形式。src字段的url的括號(hào)內(nèi)一定要使用單引號(hào)。
var domModule = weex.requireModule('dom'); domModule.addRule('fontFace', {'fontFamily': "fontFamilyName",'src': "url('https://...')" })示例：
<template><view><view><text class="test"></text><text class="test"></text><text class="test"></text></view></view> </template> <style>@font-face {font-family: 'iconfont';src: url('https://at.alicdn.com/t/font_865816_17gjspmmrkti.ttf') format('truetype');}.test {font-family: iconfont;margin-left: 20rpx;} </style><template/>和<block/>
uni-app 支持在 template 模板中嵌套 和 ，用來(lái)進(jìn)行 列表渲染 和 條件渲染。
和 并不是一個(gè)組件，它們僅僅是一個(gè)包裝元素，不會(huì)在頁(yè)面中做任何渲染，只接受控制屬性。
代碼示例
<template><view><template v-if="test"><view>test 為 true 時(shí)顯示</view></template><template v-else><view>test 為 false 時(shí)顯示</view></template></view> </template> <template><view><block v-for="(item,index) in list" :key="index"><view>{{item}} - {{index}}</view></block></view> </template>五、條件編譯
條件編譯
條件編譯是用特殊的注釋作為標(biāo)記，在編譯時(shí)根據(jù)這些特殊的注釋，將注釋里面的代碼編譯到不同平臺(tái)。
寫(xiě)法：以 #ifdef 或 #ifndef 加 %PLATFORM% 開(kāi)頭，以 #endif 結(jié)尾。
- #ifdef：if defined 僅在某平臺(tái)存在
- #ifndef：if not defined 除了某平臺(tái)均存在
- %PLATFORM%：平臺(tái)名稱(chēng)
| #ifdef APP-PLUS 需條件編譯的代碼 #endif | 僅出現(xiàn)在 App 平臺(tái)下的代碼 |
| #ifndef H5 需條件編譯的代碼 #endif | 除了 H5 平臺(tái)，其它平臺(tái)均存在的代碼 |
| #ifdef H5 || MP-WEIXIN 需條件編譯的代碼 #endif | 在 H5 平臺(tái)或微信小程序平臺(tái)存在的代碼（這里只有||，不可能出現(xiàn)&&，因?yàn)闆](méi)有交集） |
%PLATFORM% 可取值如下：
| APP-PLUS | App |
| APP-PLUS-NVUE | App nvue |
| H5 | H5 |
| MP-WEIXIN | 微信小程序 |
| MP-ALIPAY | 支付寶小程序 |
| MP-BAIDU | 百度小程序 |
| MP-TOUTIAO | 字節(jié)跳動(dòng)小程序 |
| MP-QQ | QQ小程序 |
| MP | 微信小程序/支付寶小程序/百度小程序/字節(jié)跳動(dòng)小程序/QQ小程序 |
支持的文件
- .vue
- .js
- .css
- pages.json
- 各預(yù)編譯語(yǔ)言文件，如：.scss、.less、.stylus、.ts、.pug
注意： 條件編譯是利用注釋實(shí)現(xiàn)的，在不同語(yǔ)法里注釋寫(xiě)法不一樣，js使用 // 注釋、css 使用 /* 注釋 */、vue/nvue 模板里使用 ；
API 的條件編譯
// #ifdef %PLATFORM% 平臺(tái)特有的API實(shí)現(xiàn) // #endif示例，如下代碼僅在 App 下出現(xiàn):
示例，如下代碼不會(huì)在 H5 平臺(tái)上出現(xiàn)：
除了支持單個(gè)平臺(tái)的條件編譯外，還支持多平臺(tái)同時(shí)編譯，使用 || 來(lái)分隔平臺(tái)名稱(chēng)。
示例，如下代碼會(huì)在 App 和 H5 平臺(tái)上出現(xiàn)：
組件的條件編譯
<!-- #ifdef %PLATFORM% --> 平臺(tái)特有的組件 <!-- #endif -->示例，如下廣告組件僅會(huì)在微信小程序中出現(xiàn)：
樣式的條件編譯
/* #ifdef %PLATFORM% */ 平臺(tái)特有樣式 /* #endif */注意： 樣式的條件編譯，無(wú)論是 css 還是 sass/scss/less/stylus 等預(yù)編譯語(yǔ)言中，必須使用 /注釋/ 的寫(xiě)法。
正確寫(xiě)法
錯(cuò)誤寫(xiě)法
pages.json 的條件編譯
下面的頁(yè)面，只有運(yùn)行至 App 時(shí)才會(huì)編譯進(jìn)去。
不同平臺(tái)下的特有功能，以及小程序平臺(tái)的分包，都可以通過(guò) pages.json 的條件編譯來(lái)更好地實(shí)現(xiàn)。這樣，就不會(huì)在其它平臺(tái)產(chǎn)生多余的資源，進(jìn)而減小包體積。
注意
- Android 和 iOS 平臺(tái)不支持通過(guò)條件編譯來(lái)區(qū)分，如果需要區(qū)分 Android、iOS 平臺(tái)，請(qǐng)通過(guò)調(diào)用 uni.getSystemInfo 來(lái)獲取平臺(tái)信息。支持ifios、ifAndroid代碼塊，可方便編寫(xiě)判斷。
總結(jié)
以上是生活随笔為你收集整理的【uni-app基础教程】的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： AWVS acunetix_WVS13下
- 下一篇： TeamViewer使用的设备数量达到上