基于 UniAPP 從入門到社區(qū)項目實戰(zhàn)
課程背景:
咱們作為前端開發(fā)人員,單純的Web 端開發(fā)已經(jīng)慢慢無法滿足我們的業(yè)務(wù)需求了,微信小程序、安卓 APP、IOS APP,甚至是 Windows 桌面端開發(fā)都成了我們需要掌握的技能。所以呢,市面上各種「跨平臺」開發(fā)解決方案層出不窮,比較有代表性的就是: UniAPP 、 Flutter、 React Native、Taro、Weex等等。
UniAPP 是基于「 Vue + 微信小程序 」語言體系,開發(fā)人員上手快學(xué)習(xí)成本低,同時隨著如今 UniAPP 生態(tài)也逐步趨于成熟。所以,基于 UniAPP 開發(fā)多端項目,已經(jīng)是很多中小型企業(yè)常用的技術(shù)解決方案。
那么,今天呢,我們就從 UniAPP 基礎(chǔ)開始,對照企業(yè)級實踐標準,從零到一,一步一步打造一個 多端(微信小程序 + H5 + 安卓 APP + IOS APP)的社區(qū)論壇類項目。
學(xué)前須知:
- 掌握 HTML、CSS、JS基礎(chǔ),能夠構(gòu)建靜態(tài)頁面
- 掌握 Vue 基礎(chǔ),能夠使用腳手架構(gòu)建應(yīng)用
- 掌握微信小程序基礎(chǔ),對微信小程序組件、API服務(wù)有一定的了解
課程簡介:
- 課程大綱介紹
- 實戰(zhàn)項目介紹
UniAPP 快速入門學(xué)習(xí)
一、UniAPP 介紹
(1)什么是 UniAPP ?
uni-app 是一個使用 Vue.js 開發(fā)所有前端應(yīng)用的框架,開發(fā)者編寫一套代碼,可發(fā)布到 iOS、Android、H5,以及各種小程序(微信/支付寶/百度/頭條/ QQ /釘釘)等多個平臺,方便開發(fā)者快速交付,不需要轉(zhuǎn)換開發(fā)思維,不需要更改開發(fā)習(xí)慣。
(2)為什么要選擇 UniAPP ?
- 開發(fā)者/案例數(shù)量更多
幾十萬應(yīng)用、uni 統(tǒng)計月活12億、70+ 微信 / QQ群
- 平臺能力不受限
在跨端的同時,通過條件編譯 + 平臺特有 API 調(diào)用,可以優(yōu)雅的為某平臺寫個性化代碼,調(diào)用專有能力而不影響其他平臺
- 性能體驗優(yōu)秀
加載新頁面速度更快、自動 diff 更新數(shù)據(jù),App 端支持原生渲染支撐更流暢的用戶體驗,小程序端的性能優(yōu)于市場其他框架
- 周邊生態(tài)豐富
插件市場數(shù)千款插件,支持 NPM、支持小程序組件和SDK,微信生態(tài)的各種 sdk 可直接用于跨平臺 APP
- 學(xué)習(xí)成本低
基于通用的前端技術(shù)棧,采用 vue 語法+微信小程序 api,無額外學(xué)習(xí)成本
(3)UniAPP 功能框架
[圖片上傳失敗...(image-e5737b-1646726387347)]
(4)UniAPP 開發(fā)環(huán)境搭建
- 下載開發(fā)工具 HBuilderX
HBuilderX 是通用的前端開發(fā)工具,但為
uni-app
做了特別強化。下載 App 開發(fā)版,可開箱即用;如下載標準版,在運行或發(fā)行
uni-app
時,會提示安裝uni-app
插件,插件下載完成后方可使用
- 創(chuàng)建 uni-app 項目
選擇
uni-app
類型,輸入工程名,選擇模板,點擊創(chuàng)建,即可成功創(chuàng)建。uni-app自帶的模板有 Hello uni-app ,是官方的組件和API示例。
還有一個重要模板是 uni ui項目模板,日常開發(fā)推薦使用該模板,已內(nèi)置大量常用組件。
- 運行 uni-app
主要包括:瀏覽器運行、真機運行、小程序運行等
- 發(fā)布 uni-app
主要包括:云端原生 APP 、離線原生 APP、H5、各種小程序
二、UniAPP 初始化相關(guān)配置
(1)工程目錄結(jié)構(gòu)
┌─components uni-app組件目錄
│ └─comp-a.vue 可復(fù)用的a組件
├─hybrid 存放本地網(wǎng)頁的目錄(自建)
├─platforms 存放各平臺專用頁面的目錄(自建)
├─pages 業(yè)務(wù)頁面文件存放的目錄
│ ├─index
│ │ └─index.vue index頁面
│ └─list
│ └─list.vue list頁面
├─static 存放應(yīng)用引用靜態(tài)資源(如圖片、視頻等)的目錄,注意:靜態(tài)資源只能存放于此
├─wxcomponents 存放小程序組件的目錄(自建)
├─common 公共資源(自建)
├─api 請求封裝(自建)
├─store 狀態(tài)管理(自建)
├─main.js Vue初始化入口文件
├─App.vue 應(yīng)用配置,用來配置App全局樣式以及監(jiān)聽 應(yīng)用生命周期
├─manifest.json 配置應(yīng)用名稱、appid、logo、版本等打包信息
└─pages.json 配置頁面路由、導(dǎo)航條、選項卡等頁面類信息
提示
static
下目錄的 js 文件不會被 webpack 編譯,里面如果有 es6 的代碼,不經(jīng)過轉(zhuǎn)換直接運行,在手機設(shè)備上會報錯。- 所以
less、scss
等資源同樣不要放在static
目錄下,建議這些公共的資源放在common
目錄下
(2)應(yīng)用配置 manifest.json
manifest.json
文件是應(yīng)用的配置文件,用于指定應(yīng)用的名稱、圖標、權(quán)限等,我們也可以在這里為 Vue 為H5 設(shè)置跨域攔截處理器
(3)編譯配置 vue.config.js
vue.config.js
是一個可選的配置文件,如果項目的根目錄中存在這個文件,那么它會被自動加載,一般用于配置 webpack 等編譯選項。官方文檔
(4)全局配置 page.json
pages.json
文件用來對 uni-app 進行全局配置,決定頁面文件的路徑、窗口樣式、原生的導(dǎo)航欄、底部的原生tabbar 等。它類似微信小程序中app.json
的頁面管理部分。
屬性 | 類型 | 必填 | 描述 |
---|---|---|---|
globalStyle | Object | 否 | 設(shè)置默認頁面的窗口表現(xiàn) |
pages | Object Array | 是 | 設(shè)置頁面路徑及窗口表現(xiàn) |
easycom | Object | 否 | 組件自動引入規(guī)則 |
tabBar | Object | 否 | 設(shè)置底部 tab 的表現(xiàn) |
condition | Object | 否 | 啟動模式配置 |
subPackages | Object Array | 否 | 分包加載配置 |
preloadRule | Object | 否 | 分包預(yù)下載規(guī)則 |
(5)全局樣式 uni.scss
uni.scss
文件的用途是為了方便整體控制應(yīng)用的風(fēng)格。比如按鈕顏色、邊框風(fēng)格,uni.scss
文件里預(yù)置了一批scss變量預(yù)置。官方文檔
uni-app
官方擴展插件(uni ui)及 插件市場 上很多三方插件均使用了這些樣式變量,如果你是插件開發(fā)者,建議你使用 scss 預(yù)處理,并在插件代碼中直接使用這些變量(無需 import 這個文件),方便用戶通過搭積木的方式開發(fā)整體風(fēng)格一致的App。
uni.scss
是一個特殊文件,在代碼中無需 import 這個文件即可在scss代碼中使用這里的樣式變量。uni-app的編譯器在webpack配置中特殊處理了這個 uni.scss,使得每個 scss 文件都被注入這個uni.scss,達到全局可用的效果。如果開發(fā)者想要less、stylus的全局使用,需要在vue.config.js中自行配置webpack策略。
(6)主組件 App.vue
App.vue
是uni-app的主組件,所有頁面都是在App.vue
下進行切換的,是頁面入口文件。但App.vue
本身不是頁面,這里不能編寫視圖元素。這個文件的作用包括:調(diào)用應(yīng)用生命周期函數(shù)、配置全局樣式、配置全局的存儲globalData
應(yīng)用生命周期僅可在
App.vue
中監(jiān)聽,在頁面監(jiān)聽無效。
(7)入口文件 main.js
main.js
是uni-app的入口文件,主要作用是初始化vue
實例、定義全局組件、使用需要的插件如vuex。
(8)UniAPP 開發(fā)規(guī)范及資源路徑
- 開發(fā)規(guī)范約定
- 頁面文件向?qū)?Vue單文件組件(SFC)規(guī)范
- 組件標簽靠近小程序規(guī)范,詳見 uni-app 組件規(guī)范
- 互連能力(JS API)靠近微信小程序規(guī)范,但需要將替換替換 wx 為 uni ,詳見uni-app接口規(guī)范
- 數(shù)據(jù)綁定及事件處理同 Vue.js 規(guī)范,同時補充了 App 和頁面的生命周期
- 為兼容多端運行,建議使用 flex 布局進行開發(fā)
- 資源路徑說明
template 內(nèi)約會靜態(tài)資源,如 image,video 等標簽的 src 屬性時,可以使用相對路徑或絕對路徑,形式如下:
<!-- 絕對路徑,/static指根目錄下的static目錄,在cli項目中/static指src目錄下的static目錄 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- 相對路徑 -->
<image class="logo" src="../../static/logo.png"></image>
注意
- @ 初始的絕對路徑以及相對路徑會通過 base64 轉(zhuǎn)換規(guī)則校驗
- 約會的靜態(tài)資源在非 h5 平臺,均不轉(zhuǎn)為 base64
- H5平臺,小于4kb的資源會被轉(zhuǎn)換成base64,其余不轉(zhuǎn)
js 文件或 script 標簽內(nèi),可以使用相對路徑和絕對路徑,形式如下:
// 絕對路徑,@指向項目根目錄,在cli項目中@指向src目錄
import add from '@/common/add.js'
// 相對路徑
import add from '../../common/add.js'
css 文件或 style 標簽內(nèi),可以使用相對路徑和絕對路徑,形式如下:
/* 絕對路徑 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相對路徑 */
@import url('../../common/uni.css');
css 文件或 style 標簽內(nèi)引用的圖片路徑,可以使用相對路徑也可以使用絕對路徑,形式如下:
/* 絕對路徑 */
background-image: url(/static/logo.png);
background-image: url(@/static/logo.png);
/* 相對路徑 */
background-image: url(../../static/logo.png);
三、UniAPP 生命周期
學(xué)習(xí)一個工具的目的核心是什么?是為了解決核心業(yè)務(wù)邏輯問題,業(yè)務(wù)邏輯很多時候簡單的解釋一句話:“在合適的時機干合適的事情”,OK!什么是合適的時機呢?簡單的說,頁面運行過程中,各個階段的回調(diào)函數(shù)就是頁面中的時機,我們也叫這個為“生命周期鉤子函數(shù)”,當然,業(yè)務(wù)中我們也會寫到很多「回調(diào)」的邏輯,這些回調(diào)其實也是咱們自定義的時機,UniAPP 的生命周期鉤子函數(shù)回調(diào)函數(shù)有哪些呢?我們來理解一下!
uni-app
完整支持Vue
實例的生命周期,同時還新增 應(yīng)用生命周期 及 頁面生命周期。
(1)應(yīng)用生命周期
函數(shù)名 | 說明 |
---|---|
onLaunch | 當uni-app 初始化完成時觸發(fā)(全局只觸發(fā)一次) |
onShow | 當 uni-app 啟動,或從后臺進入前臺顯示 |
onHide | 當 uni-app 從前臺進入后臺 |
onError | 當 uni-app 報錯時觸發(fā) |
onUniNViewMessage | 對 nvue 頁面發(fā)送的數(shù)據(jù)進行監(jiān)聽,可參考 nvue 向 vue 通訊
|
onUnhandledRejection | 對未處理的 Promise 拒絕事件監(jiān)聽函數(shù)(2.8.1+) |
onPageNotFound | 頁面不存在監(jiān)聽函數(shù) |
onThemeChange | 監(jiān)聽系統(tǒng)主題變化 |
(2)頁面生命周期
函數(shù)名 | 說明 |
---|---|
onLoad | 監(jiān)聽頁面加載,其參數(shù)為上個頁面?zhèn)鬟f的數(shù)據(jù),參數(shù)類型為Object(用于頁面?zhèn)鲄ⅲ瑓⒖?a target="_blank">示例 |
onShow | 監(jiān)聽頁面顯示。頁面每次出現(xiàn)在屏幕上都觸發(fā),包括從下級頁面點返回露出當前頁面 |
onReady | 監(jiān)聽頁面初次渲染完成。注意如果渲染速度快,會在頁面進入動畫完成前觸發(fā) |
onHide | 監(jiān)聽頁面隱藏 |
onUnload | 監(jiān)聽頁面卸載 |
onResize | 監(jiān)聽窗口尺寸變化 |
onPullDownRefresh | 監(jiān)聽用戶下拉動作,一般用于下拉刷新,參考示例 |
onReachBottom | 頁面滾動到底部的事件(不是scroll-view滾到底),常用于下拉下一頁數(shù)據(jù)。具體見下方注意事項 |
onTabItemTap | 點擊 tab 時觸發(fā),參數(shù)為Object,具體見下方注意事項 |
onShareAppMessage | 用戶點擊右上角分享 |
onPageScroll | 監(jiān)聽頁面滾動,參數(shù)為Object |
onNavigationBarButtonTap | 監(jiān)聽原生標題欄按鈕點擊事件,參數(shù)為Object |
onBackPress | 監(jiān)聽頁面返回 |
onNavigationBarSearchInputChanged | 監(jiān)聽原生標題欄搜索輸入框輸入內(nèi)容變化事件 |
onNavigationBarSearchInputConfirmed | 監(jiān)聽原生標題欄搜索輸入框搜索事件,用戶點擊軟鍵盤上的“搜索”按鈕時觸發(fā)。 |
onNavigationBarSearchInputClicked | 監(jiān)聽原生標題欄搜索輸入框點擊事件 |
onShareTimeline | 監(jiān)聽用戶點擊右上角轉(zhuǎn)發(fā)到朋友圈 |
onAddToFavorites | 監(jiān)聽用戶點擊右上角收藏 |
四、UniAPP 路由配置及頁面跳轉(zhuǎn)
(1)路由配置
uni-app 頁面路由全部交給框架統(tǒng)一管理,開發(fā)者需要在pages.json里配置每個路由頁面的路徑及頁面樣式(類似小程序在 app.json 中配置頁面路由)。
"pages": [
{
"path": "pages/index",
"style": {
"navigationBarTitleText": "路由配置",
"navigationBarBackgroundColor": "#FFFFFF",
"navigationBarTextStyle": "black",
"backgroundColor": "#FFFFFF",
"enablePullDownRefresh": true
}
},
{
"path": "pages/user",
"style": {
"navigationBarTitleText": "路由配置",
"navigationBarBackgroundColor": "#FFFFFF",
"navigationBarTextStyle": "black",
"backgroundColor": "#FFFFFF",
"enablePullDownRefresh": true
}
}
]
(2)路由跳轉(zhuǎn)
uni-app
有兩種頁面路由跳轉(zhuǎn)方式:使用navigator組件跳轉(zhuǎn)(標簽式導(dǎo)航)、調(diào)用API跳轉(zhuǎn)(編程式導(dǎo)航)框架以棧的形式管理當前所有頁面, 當發(fā)生路由切換的時候,頁面棧的表現(xiàn)如下:
路由方式 | 頁面棧表現(xiàn) | 觸發(fā)時機 |
---|---|---|
初始化 | 新頁面入棧 | uni-app 打開的第一個頁面 |
打開新頁面 | 新頁面入棧 | 調(diào)用 API uni.navigateTo 、<br />使用組件 <navigator open-type="navigate" />
|
頁面重定向 | 當前頁面出棧,新頁面入棧 | 調(diào)用 API uni.redirectTo 、<br />使用組件 |
頁面返回 | 頁面不斷出棧,直到目標返回頁 | 調(diào)用 API uni.navigateBack 、<br />使用組件 、<br />用戶按左上角返回按鈕、安卓用戶點擊物理back按鍵 |
Tab 切換 | 頁面全部出棧,只留下新的 Tab 頁面 | 調(diào)用 API uni.switchTab 、<br />使用組件 、<br />用戶切換 Tab |
重加載 | 頁面全部出棧,只留下新的頁面 | ?調(diào)用 API uni.reLaunch 、<br />使用組件 |
(3)獲取當前頁面棧
getCurrentPages() 函數(shù)用于獲取當前頁面棧的實例,以數(shù)組形式按棧的順序給出,第一個元素為首頁,最后一個元素為當前頁面。
注意
: getCurrentPages() 僅用于展示頁面棧的情況,請勿修改頁面棧,以免造成頁面狀態(tài)錯誤。
(4)路由傳參與接收
說明:頁面生命周期的 onLoad()監(jiān)聽頁面加載,其參數(shù)為上個頁面?zhèn)鬟f的數(shù)據(jù),如:
//頁面跳轉(zhuǎn)并傳遞參數(shù)
uni.navigateTo({
url: 'page2?name=liy&message=Hello'
});
url為將要跳轉(zhuǎn)的頁面路徑 ,路徑后可以帶參數(shù)。參數(shù)與路徑之間使用
?
分隔,參數(shù)鍵與參數(shù)值用=
相連,不同參數(shù)用&
分隔。如 'path?key1=value2&key2=value2',path為下一個頁面的路徑,下一個頁面的onLoad函數(shù)可得到傳遞的參數(shù)。
// 頁面 2 接收參數(shù)
onLoad: function (option) { //option為object類型,會序列化上個頁面?zhèn)鬟f的參數(shù)
console.log(option.name); //打印出上個頁面?zhèn)鬟f的參數(shù)。
console.log(option.message); //打印出上個頁面?zhèn)鬟f的參數(shù)。
}
注意
:url 有長度限制,太長的字符串會傳遞失敗,并且不規(guī)范的字符格式也可能導(dǎo)致傳遞失敗,所以對于復(fù)雜參數(shù)建議使用 encodeURI、decodeURI 進行處理后傳遞
(5)小程序路由分包配置
因小程序有體積和資源加載限制,各家小程序平臺提供了分包方式,優(yōu)化小程序的下載和啟動速度。
所謂的主包,即放置默認啟動頁面及 TabBar 頁面,而分包則是根據(jù) pages.json 的配置進行劃分。
在小程序啟動時,默認會下載主包并啟動主包內(nèi)頁面,當用戶進入分包內(nèi)某個頁面時,會把對應(yīng)分包自動下載下來,下載完成后再進行展示,此時終端界面會有等待提示。
"subPackages": [
{
"root": "news",
"pages": [{
"path": "index",
"style": {
"navigationBarTitleText": "新聞中心",
"navigationBarBackgroundColor": "#FFFFFF",
"navigationBarTextStyle": "black",
"backgroundColor": "#FFFFFF"
}
}
]
}
...
],
// 預(yù)下載分包設(shè)置
"preloadRule": {
"pages/index": {
"network": "all",
"packages": ["activities"]
}
}
五、UniAPP 常用組件簡介
uni-app 為開發(fā)者提供了一系列基礎(chǔ)組件,類似 HTML 里的基礎(chǔ)標簽元素,但 uni-app 的組件與 HTML 不同,而是與小程序相同,更適合手機端使用。
雖然不推薦使用 HTML 標簽,但實際上如果開發(fā)者寫了
div
等標簽,在編譯到非H5平臺時也會被編譯器轉(zhuǎn)換為view
標簽,類似的還有span
轉(zhuǎn)text
、a
轉(zhuǎn)navigator
等,包括 css 里的元素選擇器也會轉(zhuǎn),但為了管理方便、策略統(tǒng)一,新寫代碼時仍然建議使用view等組件。
開發(fā)者可以通過組合這些基礎(chǔ)組件進行快速開發(fā), 基于內(nèi)置的基礎(chǔ)組件,可以開發(fā)各種擴展組件,組件規(guī)范與vue組件相同。
案例
:知心姐姐布局實現(xiàn)
六、UniAPP 常用 API 簡介
uni-app
的 js 代碼,h5 端運行于瀏覽器中,非 h5 端 Android 平臺運行在 v8 引擎中,iOS 平臺運行在 iOS 自帶的 jscore 引擎中。所以,uni-app
的 jsAPI 由標準 ECMAScript 的 js API 和 uni 擴展 API 這兩部分組成。
ECMAScript 由 Ecma 國際管理,是基礎(chǔ) js 語法。瀏覽器基于標準 js 擴充了window、document 等 js API;Node.js 基于標準 js 擴充了 fs 等模塊;小程序也基于標準 js 擴展了各種 wx.xx、my.xx、swan.xx 的 API。
標準 ecmascript 的 API 非常多,比如:console、settimeout等等。
非 H5 端,雖然不支持 window、document、navigator 等瀏覽器的 js API,但也支持標準 ECMAScript。
開發(fā)者不要把瀏覽器里的 js 等價于標準 js。
所以 uni-app 的非 H5 端,一樣支持標準 js,支持 if、for 等語法,支持字符串、數(shù)組、時間等變量及各種處理方法,僅僅是不支持瀏覽器專用對象。
案例
:知心姐姐聊天功能
七、UniAPP 自定義組件與通信
(1)自定義組件概念
組件是
vue
技術(shù)中非常重要的部分,組件使得與ui相關(guān)的輪子可以方便的制造和共享,進而使得vue使用者的開發(fā)效率大幅提升,在項目的component
目錄下存放組件,uni-app
只支持vue
單文件組件(.vue 組件)
組件可以使用「全局注冊」和「頁面引入」兩種方式進行使用,使用分為三步:
導(dǎo)入
import xxx from 'xxx'
注冊
Vue.use('xx',xx)
components:{ xxx }
使用
<xx />
(2)父子組件通信
父組件通過自定義屬性向子組件傳遞數(shù)據(jù)
子組件通過
props
接收父組件傳遞的數(shù)據(jù)
- 父組件通過自定義事件標簽向子組件傳遞事件
- 子組件通過觸發(fā)父組件定義事件方式修改父組件數(shù)據(jù)
(3)slot 數(shù)據(jù)分發(fā)與作用域插槽
- 父組件通過調(diào)用子組件內(nèi)部嵌套 html 內(nèi)容作為
slot
分發(fā)給子組件- 子組件通過在
slot
標簽上添加屬性,向父組件通信數(shù)據(jù),作用域插槽
(4)全局事件定義及通信
- 在整個應(yīng)用的任何地方均可以使用
uni.$on
創(chuàng)建一個全局事件- 在整個應(yīng)用的任何地方也均可以使用
uni.$emit
來觸發(fā)全局事件,實現(xiàn)多組件見的數(shù)據(jù)通信
八、UniAPP Vuex 狀態(tài)管理
- 概念
Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。
- 應(yīng)用場景
Vue多個組件之間需要共享數(shù)據(jù)或狀態(tài)。
- 關(guān)鍵規(guī)則
- State:存儲狀態(tài)數(shù)據(jù)
- Getter:從狀態(tài)數(shù)據(jù)派生數(shù)據(jù),相當于 State 的計算屬性
- Mutation:存儲用于同步更改狀態(tài)數(shù)據(jù)的方法,默認傳入的參數(shù)為 state
- Action:存儲用于異步更改狀態(tài)數(shù)據(jù),但不是直接更改,而是通過觸發(fā) Mutation 方法實現(xiàn),默認參數(shù)為context
- Module:Vuex 模塊化
- 交互關(guān)系
[圖片上傳失敗...(image-c44ca2-1646726387347)]
- 使用方式
import { mapState, mapActions } from 'vuex' export default { computed: { ...mapState(['loginState', 'userInfo']) }, methods: { ...mapActions(['userLoginAction', 'userLogoutAction']), } }
- 體驗案例:模擬用戶登陸邏輯實現(xiàn)
注意:配合使用 Storage 來實現(xiàn)刷新頁面后狀態(tài)持續(xù)保持的業(yè)務(wù)需求
九、運行環(huán)境判斷與跨端兼容
(1)開發(fā)環(huán)境和生產(chǎn)環(huán)境
uni-app
可通過process.env.NODE_ENV
判斷當前環(huán)境是開發(fā)環(huán)境還是生產(chǎn)環(huán)境,一般用于連接測試服務(wù)器或生產(chǎn)服務(wù)器的動態(tài)切換。在HBuilderX 中,點擊「運行」編譯出來的代碼是開發(fā)環(huán)境,點擊「發(fā)行」編譯出來的代碼是生產(chǎn)環(huán)境
if(process.env.NODE_ENV === 'development'){
console.log('開發(fā)環(huán)境')
}else{
console.log('生產(chǎn)環(huán)境')
}
(2)判斷平臺
平臺判斷有2種場景,一種是在編譯期判斷,一種是在運行期判斷。
編譯期判斷編譯期判斷,即條件編譯,不同平臺在編譯出包后已經(jīng)是不同的代碼,
// #ifdef H5 alert("只有h5平臺才有alert方法") // #endif // 如上代碼只會編譯到H5的發(fā)行包里,其他平臺的包不會包含如上代碼。
運行期判斷 運行期判斷是指代碼已經(jīng)打入包中,仍然需要在運行期判斷平臺,此時可使用
uni.getSystemInfoSync().platform
判斷客戶端環(huán)境是 Android、iOS 還是小程序開發(fā)工具switch(uni.getSystemInfoSync().platform){ case 'android': console.log('運行Android上') break; case 'ios': console.log('運行iOS上') break; default: console.log('運行在開發(fā)者工具上') break; }
(3)跨端兼容
uni-app 已將常用的組件、JS API 封裝到框架中,開發(fā)者按照 uni-app 規(guī)范開發(fā)即可保證多平臺兼容,大部分業(yè)務(wù)均可直接滿足,但每個平臺有自己的一些特性,因此會存在一些無法跨平臺的情況。
- 大量寫 if else,會造成代碼執(zhí)行性能低下和管理混亂。
- 編譯到不同的工程后二次修改,會讓后續(xù)升級變的很麻煩。
在 C 語言中,通過 #ifdef、#ifndef 的方式,為 windows、mac 等不同 os 編譯不同的代碼。
uni-app
參考這個思路,為uni-app
提供了條件編譯手段,在一個工程里優(yōu)雅的完成了平臺個性化實現(xiàn)。
條件編譯是用特殊的注釋作為標記,在編譯時根據(jù)這些特殊的注釋,將注釋里面的代碼編譯到不同平臺。
寫法:以 #ifdef 或 #ifndef 加 %PLATFORM% 開頭,以 #endif 結(jié)尾。
- #ifdef:if defined 僅在某平臺存在
- #ifndef:if not defined 除了某平臺均存在
- %PLATFORM%:平臺名稱
%PLATFORM% 可取值如下:
值 | 平臺 |
---|---|
APP-PLUS | App |
APP-PLUS-NVUE | App nvue |
H5 | H5 |
MP-WEIXIN | 微信小程序 |
MP-ALIPAY | 支付寶小程序 |
MP-BAIDU | 百度小程序 |
MP-TOUTIAO | 字節(jié)跳動小程序 |
MP-QQ | QQ小程序 |
MP-360 | 360小程序 |
MP | 微信小程序/支付寶小程序/百度小程序/字節(jié)跳動小程序/QQ小程序/360小程序 |
QUICKAPP-WEBVIEW | 快應(yīng)用通用(包含聯(lián)盟、華為) |
QUICKAPP-WEBVIEW-UNION | 快應(yīng)用聯(lián)盟 |
QUICKAPP-WEBVIEW-HUAWEI | 快應(yīng)用華為 |