UniAPP基礎(chǔ)

基于 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é)前須知:

  1. 掌握 HTML、CSS、JS基礎(chǔ),能夠構(gòu)建靜態(tài)頁面
  2. 掌握 Vue 基礎(chǔ),能夠使用腳手架構(gòu)建應(yīng)用
  3. 掌握微信小程序基礎(chǔ),對微信小程序組件、API服務(wù)有一定的了解

課程簡介:

  1. 課程大綱介紹
  2. 實戰(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 ?

  1. 開發(fā)者/案例數(shù)量更多

幾十萬應(yīng)用、uni 統(tǒng)計月活12億、70+ 微信 / QQ群

  1. 平臺能力不受限

在跨端的同時,通過條件編譯 + 平臺特有 API 調(diào)用,可以優(yōu)雅的為某平臺寫個性化代碼,調(diào)用專有能力而不影響其他平臺

  1. 性能體驗優(yōu)秀

加載新頁面速度更快、自動 diff 更新數(shù)據(jù),App 端支持原生渲染支撐更流暢的用戶體驗,小程序端的性能優(yōu)于市場其他框架

  1. 周邊生態(tài)豐富

插件市場數(shù)千款插件,支持 NPM、支持小程序組件和SDK,微信生態(tài)的各種 sdk 可直接用于跨平臺 APP

  1. 學(xué)習(xí)成本低

基于通用的前端技術(shù)棧,采用 vue 語法+微信小程序 api,無額外學(xué)習(xí)成本

(3)UniAPP 功能框架

[圖片上傳失敗...(image-e5737b-1646726387347)]

(4)UniAPP 開發(fā)環(huán)境搭建

  1. 下載開發(fā)工具 HBuilderX

HBuilderX 是通用的前端開發(fā)工具,但為uni-app做了特別強化。

下載 App 開發(fā)版,可開箱即用;如下載標準版,在運行或發(fā)行uni-app時,會提示安裝uni-app插件,插件下載完成后方可使用

  1. 創(chuàng)建 uni-app 項目

選擇uni-app類型,輸入工程名,選擇模板,點擊創(chuàng)建,即可成功創(chuàng)建。

uni-app自帶的模板有 Hello uni-app ,是官方的組件和API示例。

還有一個重要模板是 uni ui項目模板,日常開發(fā)推薦使用該模板,已內(nèi)置大量常用組件。

  1. 運行 uni-app

主要包括:瀏覽器運行、真機運行、小程序運行等

  1. 發(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ī)范及資源路徑

  1. 開發(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ā)
  1. 資源路徑說明

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) texta 轉(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)父子組件通信

  1. 父組件通過自定義屬性向子組件傳遞數(shù)據(jù)

  2. 子組件通過 props 接收父組件傳遞的數(shù)據(jù)

  1. 父組件通過自定義事件標簽向子組件傳遞事件
  2. 子組件通過觸發(fā)父組件定義事件方式修改父組件數(shù)據(jù)

(3)slot 數(shù)據(jù)分發(fā)與作用域插槽

  1. 父組件通過調(diào)用子組件內(nèi)部嵌套 html 內(nèi)容作為slot分發(fā)給子組件
  2. 子組件通過在 slot 標簽上添加屬性,向父組件通信數(shù)據(jù),作用域插槽

(4)全局事件定義及通信

  1. 在整個應(yīng)用的任何地方均可以使用uni.$on創(chuàng)建一個全局事件
  2. 在整個應(yīng)用的任何地方也均可以使用 uni.$emit 來觸發(fā)全局事件,實現(xiàn)多組件見的數(shù)據(jù)通信

八、UniAPP Vuex 狀態(tài)管理

  1. 概念

Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。

  1. 應(yīng)用場景

Vue多個組件之間需要共享數(shù)據(jù)或狀態(tài)。

  1. 關(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 模塊化
  1. 交互關(guān)系

[圖片上傳失敗...(image-c44ca2-1646726387347)]

  1. 使用方式
import {
      mapState,
      mapActions
} from 'vuex'
export default {
      computed: {
          ...mapState(['loginState', 'userInfo'])
      },
      methods: {
          ...mapActions(['userLoginAction', 'userLogoutAction']),
      }
}
  1. 體驗案例:模擬用戶登陸邏輯實現(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)用華為
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • uni-app的基本使用 課程介紹: 基礎(chǔ)部分: 環(huán)境搭建 頁面外觀配置 數(shù)據(jù)綁定 uni-app的生命周期 組件...
    __Mr_Xie__閱讀 1,473評論 0 1
  • uni-app的基本使用 課程介紹: 基礎(chǔ)部分: 環(huán)境搭建 頁面外觀配置 數(shù)據(jù)綁定 uni-app的生命周期 組件...
    flyjar閱讀 759評論 0 2
  • uni-app的基本使用 課程介紹: 基礎(chǔ)部分: 環(huán)境搭建 頁面外觀配置 數(shù)據(jù)綁定 uni-app的生命周期 組件...
    Neo_duan閱讀 2,159評論 1 1
  • 1. uni-app 介紹 1.1 什么是uni-app https://uniapp.dcloud.io/REA...
    努力的瑩瑩閱讀 1,686評論 0 3
  • 學(xué)習(xí)導(dǎo)覽 uniapp調(diào)研資料 1.認識vue 2.搭建vue應(yīng)用 3.組件與api 4.生命周期 5.條件編譯 ...
    Man不經(jīng)心閱讀 17,276評論 1 6