一套程式碼,14個平臺執行,牛!

語言: CN / TW / HK

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

一、uni-app到底是什麼

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

uni-app在 開發者數量、案例數量、跨平臺能力、擴充套件靈活性、效能體驗、周邊生態、學習成本、開發成本 八大關鍵指標上擁有巨大的優勢。

  1. 開發者數量與案例數量更多

  2. 跨平臺能力與擴充套件靈活性更強

  • 開發者編寫一套程式碼,可釋出到iOS、Android及各種小程式、快應用等多個平臺。

  • 在跨平臺的同時,通過條件編譯和平臺特有API呼叫,可以“優雅”地為某平臺編寫個性化程式碼,呼叫專有能力而不影響其他平臺。

  • 支援原生程式碼混寫和原生SDK整合。

  1. 效能體驗優秀

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

  • App端支援Weex原生渲染,可支撐更流暢的使用者體驗。

  • 小程式端的效能優於市場其他框架。

  1. 周邊生態豐富

  • 外掛市場擁有數千款外掛。

  • 支援NPM(Node Package Manager,Node.js包管理和分發工具),支援小程式元件和SDK,相容mpvue元件和專案,相容Weex元件。

  • 微信生態的各種SDK可直接用於跨平臺App。

  1. 學習成本低 基於通用的前端技術棧,採用Vue語法和微信小程式API,無額外學習成本。

  2. 開發成本低

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

  • HBuilderX是高效開發神器,熟練掌握後研發效率至少翻倍。

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

圖1.1  uni-app 的功能框架

從圖1.1可以看出,uni-app在跨平臺過程中不犧牲平臺特色,可“優雅”地呼叫平臺專有能力,真正做到海納百川、各取所長。

接下來看如何搭建uni-app的實操環境。

二、 uni-app 環境搭建

要使用 uni-app ,需要安裝 HBuilder X 開發者工具,在 HBuilder X 中執行專案,編寫程式碼。當然,也可以使用 Vscode、WebStorm 等軟體編寫,最後用 HBuilder X 執行即可。

2.1下載與使用 HBuilder X 開發者工具

在使用uni-app專案之前,必須使用 HBuilder X 執行專案和生成生產環境的程式碼。

HBuilder X 的下載地址: https://www.dcloud.io/hbuilderx.html

下載時選擇正式版,可以選擇Windows版和Mac OS版,這兩種又各有兩個版本,分別是標準版和App開發版。其中,標準版可直接用於Web開發、MarkDown、字處理場景、小程式等。如果開發App,則需要手動安裝外掛。App開發版預置開發App所需的外掛,開箱即用。如果只是開發小程式和H5,則安裝標準版即可。此處以App開發版為例演示。

HBuilder X 下載完成後安裝即可(Windows版和Mac OS版的安裝都很簡單,按提示操作就行)。

2.2建立專案

使用HBuilder X建立專案有以下兩種方式。

2.2.1 通過 HBuilder X 視覺化介面建立專案

這裡以Mac OS版為例項進行演示。開啟HBuilder X,選擇“檔案”→“新建”→“1.專案”命令,如圖2.1所示。

圖2.1選擇“1. 專案”命令

彈出“新建專案”對話方塊,如圖2.2所示。

圖2.2“新建專案”對話方塊

選中uni-app單選按鈕,自定義專案名稱為uniappdemo,模板選擇“uni-ui專案”,單擊“建立”按鈕。專案建立完成後即可執行,開啟專案中的任意檔案,如App.vue,如圖2.3所示。

圖2.3開啟 App.vue 檔案

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

2.2.2 通過 vue-cli 命令列建立專案

首先,安裝執行環境。在命令提示符視窗輸入以下命令:

npm install -g @vue/cli

全域性安裝vue-cli,如果安裝過vue-cli可省略此步驟。使用正式版(對應HBuilder X最新正式版)建立uni-app專案,在命令提示符視窗輸入以下命令:

vue create -p dcloudio/uni-preset-vue 專案名稱

使用Alpha版(對應HBuilder X最新Alpha版)建立uni-app專案,在命令提示符視窗輸入以下命令:

vue create -p dcloudio/uni-preset-vue#alpha 專案名稱

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

圖2.4選擇 uni-app 專案模板

建立完成後,使用以下命令執行和釋出專案:

npm run dev:%PLATFORM% //執行專案
npm run build:%PLATFORM% //釋出專案

%PLATFORM% 的取值見表2.1。

表 2.1 %PLATFORM% 的取值

平 臺
app-plus App 平臺生成打包資源(支援 npm run build:app-plus,可用於持續整合。不支援 run,執行除錯仍需在 HBuilder X 中操作)
h5 H5 Web 版在瀏覽器執行
mp-alipay 支付寶小程式
mp-baidu 百度小程式
mp-weixin 微信小程式
mp-toutiao 位元組跳動小程式
mp-qq QQ 小程式
mp-360 360 小程式
quickapp-webview 快應用 (webview)
quickapp-webview-union 快應用聯盟
quickapp-webview-huawei 快應用華為

以執行、釋出微信小程式為例,輸入以下命令:

npm run dev:mp-weixin //執行微信小程式
npm run build:mp-weixin //釋出微信小程式

這樣即可執行、釋出微信小程式。當然,執行微信小程式必須先安裝微信小程式開發者工具。

uni-app標準的專案結構如圖2.5所示。

圖2.5 uni-app 標準的專案結構

2.3 App 真機執行

開發Android手機App通常使用Windows作業系統,使用uni-app開發App在執行除錯時可以使用模擬器或真機。

2.3.1真機執行

真機執行需要連線手機,開啟USB除錯,進入uniappdemo專案,選擇“執行”→“執行到手機或模擬器”命令,在其下拉選單中選擇執行的裝置,即可在該裝置中體驗uni-app,如圖2.6所示。

圖2.6真機執行

如果不用真機執行,也可以使用模擬器執行,如圖2.7所示。

圖2.7模擬器執行

2.3.2打包發行

將App打包為原生App有兩種模式——雲端和離線。 1. 雲端 開啟HBuilder X,選擇“發行”→“原生App-雲打包”命令,如圖8所示,開啟圖2.9所示的雲端打包介面。

圖2.8選擇“原生 App- 雲打包”命令
圖2.9App 雲端打包介面

在App正式運營時要選擇自有證書,如果不知道如何生成證書,可單擊“如何生成證書”超連結按照教程自己生成。如果不生成iOS版的App包,則取消勾選iOS(ipa包)複選框。單擊“打包”按鈕,進入打包狀態。注意,必須在https://www.dcloud.io官網註冊成為會員並登入才能使用雲端打包功能,如果沒有註冊或登入會員,HBuilder X會給出提示和註冊地址,按照提示操作即可。打包成功後,在HBuilder X軟體的控制檯會給出下載apk包的地址,如圖2.10所示。

圖2.10apk 包下載地址

2. 離線離線打包配置比較複雜,需要使用App離線開發者工具包,即App離線SDK。把App執行環境(runtime)封裝為原生開發呼叫介面,開發者可以在自己的 Android 及 iOS 原生開發環境配置工程中使用,包括 Android離線開發SDK和iOS離線開發SDK。App離線SDK主要用於App本地離線打包及擴充套件原生能力,對應HBuilder X的雲端打包功能。當uni-app、h5+App等專案發行為原生App時,無須將App資源及打包要使用的簽名證書等提交到雲端打包伺服器,在開發者本地配置的原生開發環境中即可生成安裝apk/ipa包。

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

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

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

圖2.11App 離線打包

由於離線打包需要安裝Android開發環境和iOS開發環境,對於沒有原生App開發基礎的人員來說,安裝及配置難度較高,因此推薦使用雲端打包。

2.4 uni-app 微信小程式除錯

使用uni-app開發小程式非常方便,其開發效率遠遠高於原生小程式開發。本篇的實戰專案也是小程式專案。

2.4.1下載微信小程式開發者工具

要開發小程式,必須下載對應小程式的開發者工具。這裡以微信小程式為例,首先下載微信小程式開發者工具。開啟網址,進入如圖2.12所示頁面。

圖2.12下載微信小程式開發者工具頁面

這裡選擇穩定版,下載的是MacOS版本。下載完成後,進行安裝,根據提示操作即可。安裝完成後,開啟微信小程式開發者工具的服務埠,進入微信小程式開發者工具,選擇“設定”→“安全設定”命令,開啟如圖2.13所示的視窗,將“服務埠”改為開啟狀態。

圖2.13微信小程式開發者工具服務埠

2.4.2  執行專案

安裝並配置完成微信小程式開發者工具後,開啟HBuilder X,進入專案,選擇“執行”→“執行到小程式模擬器”→“微信開發者工具”命令,即可在微信小程式開發者工具中體驗uni-app,如圖2.14所示。

圖2.14使用 HBuilder X 執行微信小程式

注意:如果是第一次使用,需要先配置小程式IDE的相關路徑才能執行成功。選擇“執行”→執行到小程式模擬器→“執行設定”命令,在圖2.15所示的位置輸入微信小程式開發者工具的安裝路徑即可。

圖2.15配置微信小程式開發者工具路徑

uni-app預設把專案編譯到專案根目錄的unpackage目錄中。

2.4.3發行小程式

發行微信小程式必須有微信小程式AppID。在微信公眾號平臺(網址為https://mp.weixin.qq.com)註冊賬號,進入小程式管理後臺,選擇“開發”→“開發設定”命令,即可在開啟的頁面中獲取微信小程式AppID。在HBuilder X中,選擇“發行”→“小程式-微信(僅適用於uni-app)”命令,彈出“微信小程式發行”對話方塊,輸入小程式名稱和AppID,單擊“發行”按鈕,在unpackage/dist/build/mp-weixin中生成微信小程式專案程式碼,如圖2.16所示。

圖2.16發行微信小程式

稍等片刻,系統會自動啟動微信小程式開發者工具。如果沒有自動啟動,則需要手動開啟微信小程式開發者工具。匯入專案,專案路徑在根目錄unpackage/dist/build/mp-weixin 檔案中,專案匯入後單擊“上傳”按鈕,按照“提交稽核”→“釋出”小程式標準流程逐步操作即可。

2.5H5 執行與發行

H5一般指HTML 5,是構建Web內容的一種語言描述方式,是指Web端在瀏覽器中執行,HBuilder X提供了Web執行環境,使用者只需要選擇執行的瀏覽器。

2.5.1執行專案

開啟專案,選擇“執行”→“執行到瀏覽器”命令,在其子選單中選擇合適的瀏覽器,如Chrome,即可在瀏覽器中體驗uni-app的H5版,如圖2.17所示。

圖2.17執行 H5 專案到瀏覽器

2.5.2發行專案

使用HBuilder X開啟專案根目錄下的manifest.json檔案,進入視覺化介面,如圖2.18所示。

圖2.18manifest.json 檔案 H5 配置視覺化介面

uni-app中的路由模式和Vue一樣,具有hash和history兩種模式。這裡選擇hash模式。應用的基礎路徑相當於vue.config.js配置檔案中的publicPath選項,如發行在網站根目錄,可不配置應用基本路徑。在HBuilder X中,選擇“發行”→“網站-H5手機版(僅適用於uni-app)”命令,即可生成H5的相關資原始檔,保存於 unpackage 目錄,如圖2.19所示。

圖2.19釋出 H5 手機版

生成的檔案儲存在unpackage/dist/build/h5資料夾中,將h5資料夾中的所有檔案上傳到伺服器即可。

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

3.1Flex 佈局

為了支援跨平臺,uni-app建議使用Flex佈局(Flexible Box,彈性佈局)。傳統的佈局基於盒狀模型,依賴 display 屬性、position屬性和float屬性。如果使用Flex佈局,則不建議使用float屬性。

3.1.1 Flex 佈局概述

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

.box{
display: flex;
}

行內元素也可以使用 Flex 佈局。程式碼示例如下:

.box{
display: inline-flex;
}

採用 Flex 佈局的元素稱為 Flex 容器(flex container),簡稱容器,如圖3.1所示。它的所有子元素自動成為容器成員,稱為 Flex 專案(flex item),簡稱專案。

圖3.1flex container 示意圖

容器預設存在兩條軸:水平的主軸(main axis)和垂直的交叉軸(cross axis)。主軸的開始位置(與邊框的交叉點)稱為main start,結束位置稱為main end;交叉軸的開始位置稱為cross start,結束位置稱為cross end。專案預設沿主軸排列。單個專案佔據的主軸空間稱為main size,佔據的交叉軸空間稱為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裡設定背景圖片,設定方式與普通Web專案大體相同,但是也有一些不同,下面介紹注意事項。

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

在CSS裡設定背景圖片時,為了多端相容,需要注意:(1)支援 base64 格式圖片。(2)支援網路路徑圖片。(3)小程式不支援在CSS中使用本地檔案,包括本地的背景圖片和字型檔案,需要是base64方式才可使用。App端在v3模式以前也有相同限制,從v3編譯模式起支援直接使用本地背景圖片和字型。

使用本地路徑背景圖片需要注意:(1)為方便開發者,當背景圖片小於 40KB且uni-app 編譯到不支援本地背景圖片的平臺時,會自動將其轉換為 base64 格式。(2)當背景圖片不小於 40KB時,會有效能問題,故不建議使用太大的背景圖片。如果開發者必須使用太大的背景圖片,則需要自己將其轉換為 base64 格式,或將其複製到伺服器上,從網路地址引用。(3)本地背景圖片的引用路徑推薦使用以 ~@ 開頭的絕對路徑。程式碼示例如下:

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

注意:微信小程式真機不支援相對路徑,但開發者工具支援。因此,以真機為主的開發不要使用相對路徑。

3.2.2程式碼演示及把圖片轉換為 base64 格式

在專案中引入背景圖片,觀察其能否轉換為base64格式。在static資料夾下建立images資料夾,將背景圖片複製到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>

元素是uni-app的元件,uni-app元件名稱以小程式命名為基準。有開發微信小程式經驗的讀者應該對該元件不陌生。接下來使用HBuilder X執行微信小程式,如果執行後在微信開發者工具控制檯中報以下錯誤:Cannot read property 'forceUpdate' of undefined,則需要配置微信小程式的AppID。使用HBuilder X開啟mainifest.json檔案,選擇微信小程式配置,輸入自己的微信小程式AppID,勾選“ES6轉ES5” “上傳程式碼時自動壓縮” “檢查安全域名和TLS版本”複選框,如圖3.2所示。

圖3.2微信小程式配置

在微信開發者工具中執行,效果如圖3.3所示。

圖3.3背景圖片轉換為 base64 格式

由圖3.3可以看出,當背景圖片小於40KB時,其會自動轉換為base64格式;如果背景圖片大於40KB,則應使用網路圖片。

以上就是對uni-app這一框架的學習與實踐筆記。本篇參考了 李傑編著的《uni-app多端跨平臺開發從入門到企業級實戰》 ,中國水利水電出版社出版。

感興趣的小夥伴可以掃碼購買啦!

本週的送書環節來啦, 小夥伴們留言說說你為什麼需要這本書 ,鬆哥會從留言的小夥伴中選出來5位幸運小夥伴,《uni-app多端跨平臺開發從入門到企業級實戰》包郵到家!