引言

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

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

以往最早的以Cordova為代表的Hybrid開發(fā)，主要依賴于WebView。但是WebView是一個很重的控件，很容易產生內存問題，而且復雜的UI在WebView上顯示的性能不理想。JS與Native代碼之間的通信需要使用JSBridge進行上下文切換，因此會降低一些性能。

Cordova原理示意圖

直至Facebook革命性地推出了ReactNative技術，才得以拋開了WebView組件，改為利用JavaScriptCore來做橋接，將JS調用轉為Native調用，只犧牲了API轉換的小部分性能，這是跨平臺開發(fā)的一大步進步。 UniApp框架的構建思想正是來源于此，并且引入Vue Runtime 深度定制進一步優(yōu)化了渲染性能和用戶體驗，而其采用的VueJS通用語法也一并解決了React Native各平臺代碼差異化過大，且需要較多原生知識的問題。

React Native及UniApp原理示意圖

二、UniApp框架介紹與應用

1. 什么是UniApp

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

2. 為什么是UniApp

對比其他移動端跨平臺框架（如Cordova/ReactNative/NativeJS），UniApp在跨端抹平度、擴展靈活性、性能體驗、周邊生態(tài)、開發(fā)成本等幾個方面上擁有明顯的優(yōu)勢。

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

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

（3）生態(tài)開放豐富：UniApp的插件市場，集成了近千余第三方插件，各種輪子拿來即用；同時，由于UniApp的接口API采用了小程序規(guī)范，微信生態(tài)的各種SDK可直接用于跨平臺App。在這個方面作對比，React Native框架的社區(qū)活躍度和資料文檔都較為有限。

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

同時，HBuilderX工具搭配UniApp可以免終端調試，可視化創(chuàng)建項目、可視化安裝組件和擴展編譯器，研發(fā)人員的開發(fā)體驗也變得更好，從而能夠更高效地編寫代碼。

3. 功能框架示意圖

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

4. 應用生命周期

UniApp 支持如下的應用生命周期函數：

5. 如何使用UniApp

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

App開發(fā)版本: http://www.dcloud.io/hbuilderx.html

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

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

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

(5) 工程目錄結構

6. 開發(fā)規(guī)范

（1）頁面文件 遵循Vue單頁面組件規(guī)范，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）接口能力 微信小程序規(guī)范，接口地址前綴由wx修改uni

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

（4）樣式控制：以upx為尺寸單位，UniApp規(guī)定屏幕的基準寬度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

總結

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