引言

CRM改造專案需要研發涵蓋網上營業廳（web版）主要業務能力的移動端掌廳APP，專案整體開發週期較短，且要求支援多平臺上線（IOS、安卓、H5等）。每個平臺要求相對一致的展示效果和使用者體驗，多端多尺寸裝置的適配效果和SDK接入都成為痛點，引入一套跨平臺的Hybrid（混合開發）框架勢在必行。

一、移動端跨平臺技術演進

以往最早的以Cordova為代表的Hybrid開發，主要依賴於WebView。但是WebView是一個很重的控制元件，很容易產生記憶體問題，而且複雜的UI在WebView上顯示的效能不理想。JS與Native程式碼之間的通訊需要使用JSBridge進行上下文切換，因此會降低一些效能。

Cordova原理示意圖

直至Facebook革命性地推出了ReactNative技術，才得以拋開了WebView元件，改為利用JavaScriptCore來做橋接，將JS呼叫轉為Native呼叫，只犧牲了API轉換的小部分效能，這是跨平臺開發的一大步進步。 UniApp框架的構建思想正是來源於此，並且引入Vue Runtime 深度定製進一步優化了渲染效能和使用者體驗，而其採用的VueJS通用語法也一併解決了React Native各平臺程式碼差異化過大，且需要較多原生知識的問題。

React Native及UniApp原理示意圖

二、UniApp框架介紹與應用

1. 什麼是UniApp

uni-app 是一個使用 Vue.js 開發跨平臺應用的前端框架，開發者編寫一套程式碼，可編譯到IOS、Android、H5、小程式等多個平臺，由DCloud(數字天堂)公司推出和運營維護。

2. 為什麼是UniApp

對比其他移動端跨平臺框架（如Cordova/ReactNative/NativeJS），UniApp在跨端抹平度、擴充套件靈活性、效能體驗、周邊生態、開發成本等幾個方面上擁有明顯的優勢。

（1）跨端數量多：一套程式碼，編譯後可釋出到iOS、Android、H5、小程式等多個平臺，且跨端抹平度高，應用的顯示效果接近一致，真正能落實到生產力。這一點是UniApp的最大優勢，完勝其他跨平臺框架。

（2）效能體驗優秀：UniApp是體驗更好的Hybrid框架，載入新頁面速度更快。且App端支援weex原生渲染，可實現更流暢的動畫效果。相比較而言，依賴於WebView的Cordova框架效能方面就有所欠缺了。

（3）生態開放豐富：UniApp的外掛市場，集成了近千餘第三方外掛，各種輪子拿來即用；同時，由於UniApp的介面API採用了小程式規範，微信生態的各種SDK可直接用於跨平臺App。在這個方面作對比，React Native框架的社群活躍度和資料文件都較為有限。

（4）開發成本低：以前由N個平臺開發人員（IOS/安卓/H5）完成的開發任務，現在採用前端通用技術棧實現，研發、維護、測試各環節的成本都大幅下降。

同時，HBuilderX工具搭配UniApp可以免終端除錯，視覺化建立專案、視覺化安裝元件和擴充套件編譯器，研發人員的開發體驗也變得更好，從而能夠更高效地編寫程式碼。

3. 功能框架示意圖

UniApp在元件跨平臺（圖中綠色部分）的基礎上，同時支援某平臺下特色功能的定製開發。通過條件編譯引入該平臺個性化UI元件或呼叫專有API，即可實現單平臺下的定製化需求且不影響和干擾其他平臺。

4. 應用生命週期

UniApp 支援如下的應用生命週期函式：

5. 如何使用UniApp

(1) 下載開發工具：HBuilderX

App開發版本: http://www.dcloud.io/hbuilderx.html

(3) 選擇uni-app，輸入工程名，如：uni-test，點選建立，成功建立 UniApp應用。點選模板裡的 Hello uni-app 即可體驗官方示例。

(5) 工程目錄結構

6. 開發規範

（1）頁面檔案 遵循Vue單頁面元件規範，Vue中的結構依然採用三大頂級程式碼塊

/file/2019/10/24/20191024232754_3506.jpg.html VUE通用模板寫法，編譯後以IOS或Android原生UI控制元件渲染

（所以不能使用標準的HTML標籤，JS對DOM操作也得儘量避免）

/file/2019/10/24/20191024232754_3507.jpg flex佈局

/file/2019/10/24/20191024232754_3508.jpg UniApp是一個非常優秀的移動端跨平臺框架，在UI表現力、效能體驗、生態成熟度幾個維度都能經得起推敲，從推出至目前一年多的時間行業內的接受態度也都是比較認可和反饋較佳的，比較適合這個做專案做產品講究短平快，元件化，小而美的時代，所以推薦給大家學習和應用。