當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

【uni-app基础教程】

發布時間：2024/3/24 编程问答 36 豆豆

生活随笔收集整理的這篇文章主要介紹了【uni-app基础教程】小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

uni-app基礎教程

uni-app是一個使用Vue.js開發所有前端應用的框架，開發者編寫一套代碼，可發布到iOS，Android，H5，以及各種小程序（微信/支付寶/百度/頭條/ QQ /釘釘）等多個平臺

一、環境配置

1.下載HBuilderX

通過HBuilderX可視化界面，HBuilderX內置相關環境，開箱即用，無需配置nodejs

開始之前，開發者需先下載安裝如下工具：

HBuilderX：官方IDE下載地址

下載App開發版，可開箱即用；如下載標準版，在運行或發行uni-app時，會提示安裝uni-app插件，插件下載完成后方可使用。

如使用cli方式創建項目，可直接下載標準版，因為uni-app編譯插件被安裝到項目下了

2.創建uni-app

在點擊工具欄里的文件->新建->項目：

選擇uni-app類型，輸入項目名，選擇模板，點擊創建，即可成功創建。

uni-app自帶的模板有。Hello uni-app，是官方的組件和API示例。還有一個重要模板是uni ui項目模板，日常開發推薦使用該模板，已內置大量常用組件。

3.運行uni-app

瀏覽器運行：進入hello-uniapp項目，點擊工具欄的運行->運行到瀏覽器->選擇瀏覽器，即可在瀏覽器里面體驗uni-app的H5版。

真機運行：連接手機，開啟USB調試，進入hello-uniapp項目，點擊工具欄的運行->真機運行->選擇運行的設備，即可在該設備里面體驗uni-app。如手機無法識別，請點擊菜單運行-運行到手機或模擬器-真機運行常見故障排查指南。注意當前開發App也需要安裝微信開發者工具。

在微信開發者工具里運行：進入hello-uniapp項目，點擊工具欄的運行->運行到小程序模擬器->微信開發者工具，即可在微信開發者工具里面體驗uni-app。注意：如果是第一次使用，需要先配置小程序ide的相關路徑，才能運行成功。如下圖，需在輸入框輸入微信開發者工具的安裝路徑。若HBuilderX不能正常啟動微信開發者工具，需要開發者手動啟動，然后將uni-app生成小程序工程的路徑復制到微信開發者工具里面，在HBuilderX里面開發，在微信開發者工具里面就可以看到實時的效果。uni-app或將項目編譯到根目錄的unpackage目錄。

在支付寶小程序開發者工具里運行：進入hello-uniapp項目，點擊工具欄的運行->運行到小程序模擬器->支付寶小程序開發者工具，即可在支付寶小程序開發者工具里面體驗uni -app。

在百度開發者工具里運行：進入hello-uniapp項目，點擊工具欄的運行->運行到小程序模擬器->百度開發者工具，即可在百度開發者工具里面體驗uni-app。

在字節跳動開發者工具里運行：進入hello-uniapp項目，點擊工具欄的運行->運行到小程序模擬器->字節跳動開發者工具，即可在字節跳動開發者工具里面體驗uni -app。

提示

如果是第一次使用，需要配置開發工具的相關路徑。請點擊工具欄的運行->運行到小程序模擬器->運行設置，配置相應的小程序開發者工具的路徑。
支付寶/百度/字節跳動小程序工具，不支持直接指定項目啟動并運行。因此開發工具啟動后，替換HBuilderX控制臺中提示的項目路徑，在相應的小程序開發者工具中打開。
如果自動啟動小程序22
】發工具失敗，請手動啟動小程序開發工具放入HBuilderX控制臺提示的項目路徑，打開項目。

運行的快捷鍵是Ctrl+r。HBuilderX還提供了快捷運行菜單，可以按數字快速選擇要運行的設備：

4.目錄結構

一個 uni-app 工程，默認包含如下目錄及文件：

┌─components uni-app組件目錄 │ └─comp-a.vue 可復用的a組件 ├─hybrid 存放本地網頁的目錄，詳見 ├─platforms 存放各平臺專用頁面的目錄，詳見 ├─pages 業務頁面文件存放的目錄 │ ├─index │ │ └─index.vue index頁面 │ └─list │ └─list.vue list頁面 ├─static 存放應用引用靜態資源（如圖片、視頻等）的目錄，注意：靜態資源只能存放于此 ├─wxcomponents 存放小程序組件的目錄，詳見 ├─main.js Vue初始化入口文件 ├─App.vue 應用配置，用來配置App全局樣式以及監聽應用生命周期 ├─manifest.json 配置應用名稱、appid、logo、版本等打包信息，詳見 └─pages.json 配置頁面路由、導航條、選項卡等頁面類信息，詳見

5.手機模擬器

下載手機模擬器

MUMU模擬器：https://mumu.163.com/

模擬器端口：

手機模擬器的名稱	默認端口號
Genymotion模擬器	5555
夜神模擬器	62001/52001
海馬玩模擬器	26944
mumu模擬器	7555
天天模擬器	6555
逍遙安卓模擬器	21503
BlueStacks 藍疊3模擬器	5555
雷神安卓模擬器	5555
騰訊手游助手	5555

應用生命周期

uni-app 支持如下應用生命周期函數：

函數名說明

onLaunch	當uni-app初始化完成時觸發（局部只觸發一次）
onShow	當uni-app啟動，或從后臺進入前臺顯示
onHide	當uni-app從前臺進入后臺
onError	當uni-app報錯時觸發
onUniNViewMessage	對nvue頁面發送的數據進行監聽，可參考 nvue 向 vue 通訊
onUnhandledRejection	對未處理的 Promise 拒絕事件監聽函數（2.8.1+）
onPageNotFound	頁面不存在監聽函數
onThemeChange	監聽系統主題變化

注意：應用生命周期僅可在 App.vue 中監聽，在其他頁面監聽無效

頁面生命周期

uni-app 支持如下頁面生命周期函數：

函數名說明平臺差異說明最低版本

onInit	監聽頁面初始化，其參數通onLoad參數，為上個頁面傳遞的數據，參數類型為Object（用于頁面傳參），觸發時機早于onLoad	百度小程序	3.1.0+
onLoad	監聽頁面加載，其參數為上個頁面傳遞的數據，參數類型為 Object（用于頁面傳參）
onShow	監聽頁面顯示。頁面每次出現在屏幕上都觸發，包括從下級頁面點返回進入當前頁面
onReady	監聽頁面初次渲染完成。注意如果渲染速度快，會在頁面進入動畫完成前觸發
onHide	監聽頁面隱藏
onUnload	監聽頁面卸載
onResize	監聽窗口尺寸變化	App，微信小程序
onPullDownRefresh	監聽用戶拖動動作，一般用于拖動刷新，參考示例
onReachBottom	頁面上拉觸底事件的處理函數
onTabItemTap	單擊選項卡時觸發，參數為對象，具體見以下注意事項	微信小程序，百度小程序，H5，App（自定義組件模式）
onShareAppMessage	用戶點擊右上角分享	微信小程序，百度小程序，字節跳動小程序，支付寶小程序
onPageScroll	監聽頁面滾動，參數為對象	nvue 暫不支持
onNavigationBarButtonTap	監聽原生標題欄按鈕點擊事件，參數為對象	5+ App，H5
onBackPress	監聽頁面返回，返回事件= {from：backbutton，navigationBack}，backbutton 表示來源是左上角返回按鈕或android 返回鍵； navigateBack 表示來源是 uni.navigateBack；詳細說明及使用：onBackPress 詳解。支付寶小程序只有真機能觸發，只能監聽非 navigateBack 引起的返回，不可阻止默認行為。	App，H5、支付寶小程序
onNavigationBarSearchInputChanged	監聽原生標題欄搜索輸入框輸入內容變化事件	App，H5	1.6.0
onNavigationBarSearchInputConfirmed	監聽原生標題欄搜索輸入框搜索事件，用戶點擊軟鍵盤上的“搜索”按鈕時觸發。	App，H5	1.6.0
onNavigationBarSearchInputClicked	監聽原生標題欄搜索輸入框點擊事件	App，H5	1.6.0
onShareTimeline	監聽用戶點擊右上角轉發到朋友去	微信小程序	2.8.1+
onAddToFavorites	監聽用戶點擊右上角收藏	微信小程序	2.8.1+

onInit使用注意

僅百度小程序基礎庫 3.260 以上支持 onInit 生命周期
其他版本或平臺可以同時使用 onLoad 生命周期進行兼容，注意避免重復執行相同邏輯
不依賴頁面傳參的邏輯可以直接使用 created 生命周期替代

組件生命周期

uni-app 組件支持的生命周期，與 vue 標準組件的生命周期相同。這里沒有頁面級的 onLoad 等生命周期：

函數名說明平臺差異說明最低版本

beforeCreate	在實例初始化之后被調用。詳見
created	在實例創建完成后被立即調用。詳見
beforeMount	在掛載開始之前被調用。詳見
mounted	掛載到實例上去之后調用。詳見注意：此處并不能確定子組件被全部掛載，如果需要子組件完全掛載之后在執行操作可以使用$nextTickVue官方文檔
beforeUpdate	數據更新時調用，發生在虛擬 DOM 打補丁之前。詳見	僅 H5 平臺支持
updated	由于數據更改導致的虛擬 DOM 重新渲染和打補丁，在這之后會調用該鉤子。詳見	僅 H5 平臺支持
beforeDestroy	實例銷毀之前調用。在這一步，實例仍然完全可用。詳見
destroyed	Vue 實例銷毀后調用。調用后，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。詳見

三、路由

uni-app頁面路由為框架統一管理，需要在pages.json里配置每個路由頁面的路徑和頁面樣式。類似的小程序在app.json中配置頁面路由相同

頁面棧

框架以棧的形式管理當前所有頁面，當發生路由切換的時候，頁面棧的表現如下：

路由方式頁面棧表現觸發時機

初始化	新頁面入棧	uni-app：的第一個頁面
新頁面	新頁面入棧	調用API uni.navigateTo ，使用組件 <navigator open-type =“ navigate” />
頁面重啟	當前頁面出棧，新頁面入棧	調用API uni.redirectTo ，使用組件 <navigator open-type =“ redirectTo” />
頁面返回	頁面不斷出棧，直到目標返回頁	調用API uni.navigateBack ，使用組件 <navigator open-type =“ navigateBack” /> ，用戶按左上角返回按鈕，安卓用戶點擊物理后退鍵
標簽切換	頁面全部出棧，只留下新的標簽頁面	調用API uni.switchTab ，使用組件 <navigator open-type =“ switchTab” /> ，用戶切換Tab
重加載	頁面全部出棧，只留下新的頁面	調用API uni.reLaunch ，使用組件 <navigator open-type =“ reLaunch” />

判斷平臺

平臺判斷有2種場景，一種是在編譯期判斷，一種是在運行期判斷。

編譯期判斷編譯期判斷，即條件編譯，不同平臺在編譯出包后已經是不同的代碼

// #ifdef H5alert("只有h5平臺才有alert方法") // #endif

運行期診斷運行期判斷是指代碼已經打入包中，仍然需要在運行期判斷平臺，此時可使用uni.getSystemInfoSync().platform判斷客戶端環境是Android，iOS還是小程序開發工具（在百度小程序開發工具，微信小程序開發工具，支付寶小程序開發工具中使用uni.getSystemInfoSync().platform返回值重置devtools）。

switch(uni.getSystemInfoSync().platform){case 'android':console.log('運行Android上')break;case 'ios':console.log('運行iOS上')break;default:console.log('運行在開發者工具上')break; }

四、樣式布局

uni-app 支持的通用 css 單位包括 px、rpx

px 即屏幕像素
rpx 即響應式px，一種根據屏幕寬度自適應的動態單位。以750寬的屏幕為基準，750rpx恰好為屏幕寬度。屏幕變寬，rpx 實際顯示效果會等比放大。

vue頁面支持普通H5單位，但在nvue里不支持：

rem 默認根字體大小為屏幕寬度/20（微信小程序、字節跳動小程序、App、H5）
vh viewpoint height，視窗高度，1vh等于視窗高度的1%
vw viewpoint width，視窗寬度，1vw等于視窗寬度的1%

nvue還不支持百分比單位。

App端，在 pages.json 里的 titleNView 或頁面里寫的 plus api 中涉及的單位，只支持 px。注意此時不支持 rpx

nvue中，uni-app 模式（nvue 不同編譯模式介紹）可以使用 px 、rpx，表現與 vue 中一致。weex 模式目前遵循weex的單位，它的單位比較特殊：

px:，以750寬的屏幕為基準動態計算的長度單位，與 vue 頁面中的 rpx 理念相同。（一定要注意 weex 模式的 px，和 vue 里的 px 邏輯不一樣。）
wx：與設備屏幕寬度無關的長度單位，與 vue 頁面中的 px 理念相同

樣式導入

使用@import語句可以導入外聯樣式表，@import后跟需要導入的外聯樣式表的相對路徑，用;表示語句結束。

內聯樣式

框架組件上支持使用 style、class 屬性來控制組件的樣式。

style：
class：

選擇器

目前支持的選擇器有：

選擇器樣例樣例描述

.class	.intro	選擇所有擁有 class=“intro” 的組件
#id	#firstname	選擇擁有 id=“firstname” 的組件
element	view	選擇所有 view 組件
element, element	view, checkbox	選擇所有文檔的 view 組件和所有的 checkbox 組件
::after	view::after	在 view 組件后邊插入內容，僅微信小程序和App生效
::before	view::before	在 view 組件前邊插入內容，僅微信小程序和App生效

注意：

在 uni-app 中不能使用 * 選擇器。
page 相當于 body 節點，例如：page { background-color:#ccc; }

全局樣式與局部樣式

定義在 App.vue 中的樣式為全局樣式，作用于每一個頁面。在 pages 目錄下的 vue 文件中定義的樣式為局部樣式，只作用在對應的頁面，并會覆蓋 App.vue 中相同的選擇器。

注意：

App.vue 中通過 @import 語句可以導入外聯樣式，一樣作用于每一個頁面。
nvue頁面暫不支持全局樣式

背景圖片

uni-app 支持使用在 css 里設置背景圖片，使用方式與普通 web 項目大體相同，但需要注意以下幾點：

支持 base64 格式圖片。
支持網絡路徑圖片。
小程序不支持在css中使用本地文件，包括本地的背景圖和字體文件。需以base64方式方可使用
使用本地路徑背景圖片需注意：在背景圖片小于 40kb 時，uni-app 編譯到不支持本地背景圖的平臺時，會自動將其轉化為 base64 格式；圖片大于等于 40kb，會有性能問題，不建議使用太大的背景圖，如必須使用，則需自己將其轉換為 base64 格式使用，或將其挪到服務器上，從網絡地址引用。本地背景圖片的引用路徑推薦使用以 ~@ 開頭的絕對路徑。 .test2 { background-image: url(‘~@/static/logo.png’); }

注意

微信小程序不支持相對路徑（真機不支持，開發工具支持）

字體圖標

uni-app 支持使用字體圖標，使用方式與普通 web 項目相同，需要注意以下幾點：

支持 base64 格式字體圖標。
支持網絡路徑字體圖標。
小程序不支持在css中使用本地文件，包括本地的背景圖和字體文件。需以base64方式方可使用。
網絡路徑必須加協議頭 https。
從 http://www.iconfont.cn 上拷貝的代碼，默認是沒加協議頭的。
從 http://www.iconfont.cn 上下載的字體文件，都是同名字體（字體名都叫iconfont，安裝字體文件時可以看到），在nvue內使用時需要注意，此字體名重復可能會顯示不正常。
使用本地路徑圖標字體需注意：在字體文件小于 40kb 時，uni-app 會自動將其轉化為 base64 格式；字體文件大于等于 40kb，仍轉換為 base64 方式使用的話可能有性能問題，如必須使用，則需自己將其轉換為 base64 格式使用，或將其挪到服務器上，從網絡地址引用；字體文件的引用路徑推薦使用以 ~@ 開頭的絕對路徑。 @font-face { font-family: test1-icon; src: url(‘~@/static/iconfont.ttf’); }

nvue中不可直接使用css的方式引入字體文件，需要使用以下方式在js內引入。nvue內不支持本地路徑引入字體，請使用網絡鏈接或者base64形式。src字段的url的括號內一定要使用單引號。

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 模板中嵌套和，用來進行列表渲染和條件渲染。

和并不是一個組件，它們僅僅是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬性。

代碼示例

<template><view><template v-if="test"><view>test 為 true 時顯示</view></template><template v-else><view>test 為 false 時顯示</view></template></view> </template> <template><view><block v-for="(item,index) in list" :key="index"><view>{{item}} - {{index}}</view></block></view> </template>

五、條件編譯

條件編譯

條件編譯是用特殊的注釋作為標記，在編譯時根據這些特殊的注釋，將注釋里面的代碼編譯到不同平臺。

寫法：以 #ifdef 或 #ifndef 加 %PLATFORM% 開頭，以 #endif 結尾。

#ifdef：if defined 僅在某平臺存在
#ifndef：if not defined 除了某平臺均存在
%PLATFORM%：平臺名稱

條件編譯寫法說明

#ifdef APP-PLUS 需條件編譯的代碼 #endif	僅出現在 App 平臺下的代碼
#ifndef H5 需條件編譯的代碼 #endif	除了 H5 平臺，其它平臺均存在的代碼
#ifdef H5 \|\| MP-WEIXIN 需條件編譯的代碼 #endif	在 H5 平臺或微信小程序平臺存在的代碼（這里只有\|\|，不可能出現&&，因為沒有交集）

%PLATFORM% 可取值如下：

值平臺

APP-PLUS	App
APP-PLUS-NVUE	App nvue
H5	H5
MP-WEIXIN	微信小程序
MP-ALIPAY	支付寶小程序
MP-BAIDU	百度小程序
MP-TOUTIAO	字節跳動小程序
MP-QQ	QQ小程序
MP	微信小程序/支付寶小程序/百度小程序/字節跳動小程序/QQ小程序

支持的文件

.vue
.js
.css
pages.json
各預編譯語言文件，如：.scss、.less、.stylus、.ts、.pug

注意：條件編譯是利用注釋實現的，在不同語法里注釋寫法不一樣，js使用 // 注釋、css 使用 /* 注釋 */、vue/nvue 模板里使用；

API 的條件編譯

// #ifdef %PLATFORM% 平臺特有的API實現 // #endif

示例，如下代碼僅在 App 下出現:

示例，如下代碼不會在 H5 平臺上出現：

除了支持單個平臺的條件編譯外，還支持多平臺同時編譯，使用 || 來分隔平臺名稱。

示例，如下代碼會在 App 和 H5 平臺上出現：

組件的條件編譯

平臺特有的組件

示例，如下廣告組件僅會在微信小程序中出現：

樣式的條件編譯

/* #ifdef %PLATFORM% */ 平臺特有樣式 /* #endif */

注意：樣式的條件編譯，無論是 css 還是 sass/scss/less/stylus 等預編譯語言中，必須使用 /注釋/ 的寫法。

正確寫法

錯誤寫法

pages.json 的條件編譯

下面的頁面，只有運行至 App 時才會編譯進去。

不同平臺下的特有功能，以及小程序平臺的分包，都可以通過 pages.json 的條件編譯來更好地實現。這樣，就不會在其它平臺產生多余的資源，進而減小包體積。

注意

Android 和 iOS 平臺不支持通過條件編譯來區分，如果需要區分 Android、iOS 平臺，請通過調用 uni.getSystemInfo 來獲取平臺信息。支持ifios、ifAndroid代碼塊，可方便編寫判斷。

總結

以上是生活随笔為你收集整理的【uni-app基础教程】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： AWVS acunetix_WVS13下
下一篇： TeamViewer使用的设备数量达到上