前端技術(shù)有HTML5、CSS3、JavaScript、Node，目前較火的前端框架有Vue、React，流行的多端開發(fā)框架有uni-app、Taro等。本文主要介紹uni-app。

一、uni-app到底是什么

簡單來講，uni-app是一個使用 Vue.js 開發(fā)所有前端應(yīng)用的框架，開發(fā)者編寫一套代碼，即可發(fā)布到iOS、Android、H5及各種小程序（如微信、支付寶、百度、頭條、QQ、釘釘、淘寶等）、快應(yīng)用等多個平臺。

uni-app在開發(fā)者數(shù)量、案例數(shù)量、跨平臺能力、擴(kuò)展靈活性、性能體驗、周邊生態(tài)、學(xué)習(xí)成本、開發(fā)成本八大關(guān)鍵指標(biāo)上擁有巨大的優(yōu)勢。

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

2. 跨平臺能力與擴(kuò)展靈活性更強(qiáng)

• 開發(fā)者編寫一套代碼，可發(fā)布到iOS、Android及各種小程序、快應(yīng)用等多個平臺。

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

• 支持原生代碼混寫和原生SDK集成。

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

• 體驗更好的Hybrid框架，加載新頁面時速度更快。

• App端支持Weex原生渲染，可支撐更流暢的用戶體驗。

• 小程序端的性能優(yōu)于市場其他框架。

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

• 插件市場擁有數(shù)千款插件。

• 支持NPM（Node Package Manager，Node.js包管理和分發(fā)工具），支持小程序組件和SDK，兼容mpvue組件和項目，兼容Weex組件。

• 微信生態(tài)的各種SDK可直接用于跨平臺App。

1. 學(xué)習(xí)成本低 基于通用的前端技術(shù)棧，采用Vue語法和微信小程序API，無額外學(xué)習(xí)成本。

2. 開發(fā)成本低

• 招聘、管理、測試各方面的成本都大幅下降。

• HBuilderX是高效開發(fā)神器，熟練掌握后研發(fā)效率至少翻倍。

uni-app的功能框架如圖1.1所示。

從圖1.1可以看出，uni-app在跨平臺過程中不犧牲平臺特色，可“優(yōu)雅”地調(diào)用平臺專有能力，真正做到海納百川、各取所長。

接下來看如何搭建uni-app的實操環(huán)境。

二、 uni-app 環(huán)境搭建

要使用 uni-app ，需要安裝 HBuilder X 開發(fā)者工具，在 HBuilder X 中運行項目，編寫代碼。當(dāng)然，也可以使用 Vscode、WebStorm 等軟件編寫，最后用 HBuilder X 運行即可。

2.1 下載與使用 HBuilder X 開發(fā)者工具

在使用uni-app項目之前，必須使用 HBuilder X 運行項目和生成生產(chǎn)環(huán)境的代碼。

下載時選擇正式版，可以選擇Windows版和Mac OS版，這兩種又各有兩個版本，分別是標(biāo)準(zhǔn)版和App開發(fā)版。其中，標(biāo)準(zhǔn)版可直接用于Web開發(fā)、MarkDown、字處理場景、小程序等。如果開發(fā)App，則需要手動安裝插件。App開發(fā)版預(yù)置開發(fā)App所需的插件，開箱即用。如果只是開發(fā)小程序和h5，則安裝標(biāo)準(zhǔn)版即可。此處以App開發(fā)版為例演示。

HBuilder X 下載完成后安裝即可（Windows版和Mac OS版的安裝都很簡單，按提示操作就行）。

2.2 創(chuàng)建項目

使用HBuilder X創(chuàng)建項目有以下兩種方式。

2.2.1 通過 HBuilder X 可視化界面創(chuàng)建項目

這里以Mac OS版為實例進(jìn)行演示。打開HBuilder X，選擇“文件”→“新建”→“1.項目”命令，如圖2.1所示。

彈出“新建項目”對話框，如圖2.2所示。

選中uni-app單選按鈕，自定義項目名稱為uniappdemo，模板選擇“uni-ui項目”，單擊“創(chuàng)建”按鈕。項目創(chuàng)建完成后即可運行，打開項目中的任意文件，如App.vue，如圖2.3所示。

以“瀏覽器運行模式”為例，選擇“運行”→“運行到瀏覽器”命令，選擇瀏覽器，即可在瀏覽器中體驗uni-app的H5版。

2.2.2 通過 vue-cli 命令行創(chuàng)建項目

首先，安裝運行環(huán)境。在命令提示符窗口輸入以下命令：

npm install -g @vue/cli


全局安裝vue-cli，如果安裝過vue-cli可省略此步驟。使用正式版（對應(yīng)HBuilder X最新正式版）創(chuàng)建uni-app項目，在命令提示符窗口輸入以下命令：

vue create -p dcloudio/uni-preset-vue 項目名稱


使用Alpha版（對應(yīng)HBuilder X最新Alpha版）創(chuàng)建uni-app項目，在命令提示符窗口輸入以下命令：

vue create -p dcloudio/uni-preset-vue#alpha 項目名稱


此時，會提示選擇項目模板，初次體驗建議選擇 Hello uni-app 項目模板，如圖2.4所示。

創(chuàng)建完成后，使用以下命令運行和發(fā)布項目：

npm run dev:%PLATFORM% //運行項目
npm run build:%PLATFORM% //發(fā)布項目


%PLATFORM% 的取值見表2.1。

表 2.1 %PLATFORM% 的取值

以運行、發(fā)布微信小程序為例，輸入以下命令：

npm run dev:mp-weixin //運行微信小程序
npm run build:mp-weixin //發(fā)布微信小程序


這樣即可運行、發(fā)布微信小程序。當(dāng)然，運行微信小程序必須先安裝微信小程序開發(fā)者工具。

uni-app標(biāo)準(zhǔn)的項目結(jié)構(gòu)如圖2.5所示。

2.3 App 真機(jī)運行

開發(fā)Android手機(jī)App通常使用Windows操作系統(tǒng)，使用uni-app開發(fā)App在運行調(diào)試時可以使用模擬器或真機(jī)。

2.3.1 真機(jī)運行

真機(jī)運行需要連接手機(jī)，開啟USB調(diào)試，進(jìn)入uniappdemo項目，選擇“運行”→“運行到手機(jī)或模擬器”命令，在其下拉菜單中選擇運行的設(shè)備，即可在該設(shè)備中體驗uni-app，如圖2.6所示。

如果不用真機(jī)運行，也可以使用模擬器運行，如圖2.7所示。

2.3.2 打包發(fā)行

將App打包為原生App有兩種模式——云端和離線。1. 云端打開HBuilder X，選擇“發(fā)行”→“原生App-云打包”命令，如圖8所示，打開圖2.9所示的云端打包界面。

在App正式運營時要選擇自有證書，如果不知道如何生成證書，可單擊“如何生成證書”超鏈接按照教程自己生成。如果不生成iOS版的App包，則取消勾選iOS(ipa包)復(fù)選框。單擊“打包”按鈕，進(jìn)入打包狀態(tài)。注意，必須在https://www.dcloud.io官網(wǎng)注冊成為會員并登錄才能使用云端打包功能，如果沒有注冊或登錄會員，HBuilder X會給出提示和注冊地址，按照提示操作即可。打包成功后，在HBuilder X軟件的控制臺會給出下載apk包的地址，如圖2.10所示。

2. 離線離線打包配置比較復(fù)雜，需要使用App離線開發(fā)者工具包，即App離線SDK。把App運行環(huán)境（runtime）封裝為原生開發(fā)調(diào)用接口，開發(fā)者可以在自己的 Android 及 iOS 原生開發(fā)環(huán)境配置工程中使用，包括 Android離線開發(fā)SDK和iOS離線開發(fā)SDK。App離線SDK主要用于App本地離線打包及擴(kuò)展原生能力，對應(yīng)HBuilder X的云端打包功能。當(dāng)uni-app、h5 App等項目發(fā)行為原生App時，無須將App資源及打包要使用的簽名證書等提交到云端打包服務(wù)器，在開發(fā)者本地配置的原生開發(fā)環(huán)境中即可生成安裝apk/ipa包。

Android平臺App本地離線打包官方文檔地址

iOS平臺App本地離線打包官方文檔地址

按照官方文檔安裝及配置完成離線SDK后，在HBuilder X中選擇“發(fā)行”→“原生App-本地打包”→“生成本地打包App資源”命令，如圖2.11所示。

由于離線打包需要安裝Android開發(fā)環(huán)境和iOS開發(fā)環(huán)境，對于沒有原生App開發(fā)基礎(chǔ)的人員來說，安裝及配置難度較高，因此推薦使用云端打包。

2.4 uni-app 微信小程序調(diào)試

使用uni-app開發(fā)小程序非常方便，其開發(fā)效率遠(yuǎn)遠(yuǎn)高于原生小程序開發(fā)。本篇的實戰(zhàn)項目也是小程序項目。

2.4.1 下載微信小程序開發(fā)者工具

要開發(fā)小程序，必須下載對應(yīng)小程序的開發(fā)者工具。這里以微信小程序為例，首先下載微信小程序開發(fā)者工具。打開網(wǎng)址，進(jìn)入如圖2.12所示頁面。

這里選擇穩(wěn)定版，下載的是MacOS版本。下載完成后，進(jìn)行安裝，根據(jù)提示操作即可。安裝完成后，打開微信小程序開發(fā)者工具的服務(wù)端口，進(jìn)入微信小程序開發(fā)者工具，選擇“設(shè)置”→“安全設(shè)置”命令，打開如圖2.13所示的窗口，將“服務(wù)端口”改為打開狀態(tài)。

2.4.2 運行項目

安裝并配置完成微信小程序開發(fā)者工具后，打開HBuilder X，進(jìn)入項目，選擇“運行”→“運行到小程序模擬器”→“微信開發(fā)者工具”命令，即可在微信小程序開發(fā)者工具中體驗uni-app，如圖2.14所示。

注意：如果是第一次使用，需要先配置小程序IDE的相關(guān)路徑才能運行成功。選擇“運行”→運行到小程序模擬器→“運行設(shè)置”命令，在圖2.15所示的位置輸入微信小程序開發(fā)者工具的安裝路徑即可。

uni-app默認(rèn)把項目編譯到項目根目錄的unpackage目錄中。

2.4.3 發(fā)行小程序

發(fā)行微信小程序必須有微信小程序AppID。在微信公眾號平臺（網(wǎng)址為https://mp.weixin.qq.com）注冊賬號，進(jìn)入小程序管理后臺，選擇“開發(fā)”→“開發(fā)設(shè)置”命令，即可在打開的頁面中獲取微信小程序AppID。在HBuilder X中，選擇“發(fā)行”→“小程序-微信（僅適用于uni-app）”命令，彈出“微信小程序發(fā)行”對話框，輸入小程序名稱和AppID，單擊“發(fā)行”按鈕，在unpackage/dist/build/mp-weixin中生成微信小程序項目代碼，如圖2.16所示。

稍等片刻，系統(tǒng)會自動啟動微信小程序開發(fā)者工具。如果沒有自動啟動，則需要手動打開微信小程序開發(fā)者工具。導(dǎo)入項目，項目路徑在根目錄unpackage/dist/build/mp-weixin 文件中，項目導(dǎo)入后單擊“上傳”按鈕，按照“提交審核”→“發(fā)布”小程序標(biāo)準(zhǔn)流程逐步操作即可。

2.5 H5 運行與發(fā)行

H5一般指HTML 5，是構(gòu)建Web內(nèi)容的一種語言描述方式，是指Web端在瀏覽器中運行，HBuilder X提供了Web運行環(huán)境，用戶只需要選擇運行的瀏覽器。

2.5.1 運行項目

打開項目，選擇“運行”→“運行到瀏覽器”命令，在其子菜單中選擇合適的瀏覽器，如Chrome，即可在瀏覽器中體驗uni-app的H5版，如圖2.17所示。

2.5.2 發(fā)行項目

使用HBuilder X打開項目根目錄下的manifest.json文件，進(jìn)入可視化界面，如圖2.18所示。

uni-app中的路由模式和Vue一樣，具有hash和history兩種模式。這里選擇hash模式。應(yīng)用的基礎(chǔ)路徑相當(dāng)于vue.config.js配置文件中的publicPath選項，如發(fā)行在網(wǎng)站根目錄，可不配置應(yīng)用基本路徑。在HBuilder X中，選擇“發(fā)行”→“網(wǎng)站-H5手機(jī)版（僅適用于uni-app）”命令，即可生成H5的相關(guān)資源文件，保存于 unpackage 目錄，如圖2.19所示。

生成的文件保存在unpackage/dist/build/h5文件夾中，將h5文件夾中的所有文件上傳到服務(wù)器即可。

三、 尺寸單位、Flex布局與背景圖片

3.1 Flex 布局

為了支持跨平臺，uni-app建議使用Flex布局（Flexible Box，彈性布局）。傳統(tǒng)的布局基于盒狀模型，依賴 display 屬性、position屬性和float屬性。如果使用Flex布局，則不建議使用float屬性。

3.1.1 Flex 布局概述

Flex用來為盒狀模型提供最大的靈活性。任何一個容器都可以指定為 Flex 布局。代碼示例如下：

.box{
display: flex;
}


行內(nèi)元素也可以使用 Flex 布局。代碼示例如下：

.box{
display: inline-flex;
}


采用 Flex 布局的元素稱為 Flex 容器（flex container），簡稱容器，如圖3.1所示。它的所有子元素自動成為容器成員，稱為 Flex 項目（flex item），簡稱項目。

容器默認(rèn)存在兩條軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）稱為main start，結(jié)束位置稱為main end；交叉軸的開始位置稱為cross start，結(jié)束位置稱為cross end。項目默認(rèn)沿主軸排列。單個項目占據(jù)的主軸空間稱為main size，占據(jù)的交叉軸空間稱為cross size。

3.1.2 容器的屬性

Flex布局支持6個容器屬性：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content。

3.1.3 項目的屬性

Flex布局支持6個項目屬性：order、flex-grow、flex-shrink、flex-basis、flex、align-self。

3.2 背景圖片

uni-app支持在CSS里設(shè)置背景圖片，設(shè)置方式與普通Web項目大體相同，但是也有一些不同，下面介紹注意事項。

3.2.1 使用本地背景圖片的問題

在CSS里設(shè)置背景圖片時，為了多端兼容，需要注意：（1）支持 base64 格式圖片。（2）支持網(wǎng)絡(luò)路徑圖片。（3）小程序不支持在CSS中使用本地文件，包括本地的背景圖片和字體文件，需要是base64方式才可使用。App端在v3模式以前也有相同限制，從v3編譯模式起支持直接使用本地背景圖片和字體。

使用本地路徑背景圖片需要注意：（1）為方便開發(fā)者，當(dāng)背景圖片小于 40KB且uni-app 編譯到不支持本地背景圖片的平臺時，會自動將其轉(zhuǎn)換為 base64 格式。（2）當(dāng)背景圖片不小于 40KB時，會有性能問題，故不建議使用太大的背景圖片。如果開發(fā)者必須使用太大的背景圖片，則需要自己將其轉(zhuǎn)換為 base64 格式，或?qū)⑵鋸?fù)制到服務(wù)器上，從網(wǎng)絡(luò)地址引用。（3）本地背景圖片的引用路徑推薦使用以 ~@ 開頭的絕對路徑。代碼示例如下：

.test2 {
background-image: url('~@/static/logo.png');
}


注意：微信小程序真機(jī)不支持相對路徑，但開發(fā)者工具支持。因此，以真機(jī)為主的開發(fā)不要使用相對路徑。

3.2.2 代碼演示及把圖片轉(zhuǎn)換為 base64 格式

在項目中引入背景圖片，觀察其能否轉(zhuǎn)換為base64格式。在static文件夾下創(chuàng)建images文件夾，將背景圖片復(fù)制到images文件夾下，在pages/index/index.vue文件中的代碼如下：

<template>
<view>
<view class="bg"></view>
</view>
</template>
<script>
</script>
<style>
.bg{
width:200rpx;
height:200rpx;
background-image: url("~@/static/images/1.jpg");
background-size:100%
}
</style>


在微信開發(fā)者工具中運行，效果如圖3.3所示。

由圖3.3可以看出，當(dāng)背景圖片小于40KB時，其會自動轉(zhuǎn)換為base64格式；如果背景圖片大于40KB，則應(yīng)使用網(wǎng)絡(luò)圖片。

以上就是對uni-app這一框架的學(xué)習(xí)與實踐筆記。