引言

CRM改造項目需要研發涵蓋網上營業廳（web版）主要業務能力的移動端掌廳App，項目整體開發周期較短，且要求支持多平臺上線（IOS、Android/ target=_blank class=infotextkey>安卓、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

(2) 安裝并打開IDE之后，在點擊工具欄里的文件 -> 新建 -> 項目

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

(4) 進入項目，點擊工具欄的運行 -> 運行到瀏覽器/真機下運行/模擬器運行，也可以選擇小程序在微信開發者工具里運行。

(5) 工程目錄結構

6. 開發規范

（1）頁面文件 遵循Vue單頁面組件規范，Vue中的結構依然采用三大頂級代碼塊

https://vue-loader.vuejs.org/zh/spec.html#%E7%AE%80%E4%BB%8B

（2）組件標簽 VUE通用模板寫法，編譯后以IOS或Android原生UI控件渲染

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

https://uniapp.dcloud.io/component/README

3）接口能力 微信小程序規范，接口地址前綴由wx修改uni

https://uniapp.dcloud.io/api/README

（4）樣式控制：以upx為尺寸單位，UniApp規定屏幕的基準寬度750upx，使用 flex布局

https://uniapp.dcloud.io/frame?id=%E9%A1%B5%E9%9D%A2%E6%A0%B7%E5%BC%8F%E4%B8%8E%E5%B8%83%E5%B1%80

總結

任何框架都首先要服務于實際業務需求，技術的選型也需根據研發團隊成員的技術方向和具體情況而定，對于項目建設而言技術框架沒有最好的只有最適合的。綜合來講， UniApp是一個非常優秀的移動端跨平臺框架，在UI表現力、性能體驗、生態成熟度幾個維度都能經得起推敲，從推出至目前一年多的時間行業內的接受態度也都是比較認可和反饋較佳的，比較適合這個做項目做產品講究短平快，組件化，小而美的時代，所以推薦給大家學習和應用。

想了解更多前端知識歡迎評論區留言或私信我！

歡迎關注公眾號：fkdcxy 瘋狂的程序員丶 獲取更多前端教程！