引言

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

一、移動(dòng)端跨平臺(tái)技術(shù)演進(jìn)

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

Cordova原理示意圖

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

React Native及UniApp原理示意圖

二、UniApp框架介紹與應(yīng)用

1. 什么是UniApp

uni-app 是一個(gè)使用 Vue.js 開(kāi)發(fā)跨平臺(tái)應(yīng)用的前端框架，開(kāi)發(fā)者編寫(xiě)一套代碼，可編譯到IOS、Android、H5、小程序等多個(gè)平臺(tái)，由DCloud(數(shù)字天堂)公司推出和運(yùn)營(yíng)維護(hù)。

2. 為什么是UniApp

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

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

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

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

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

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

3. 功能框架示意圖

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

4. 應(yīng)用生命周期

UniApp 支持如下的應(yīng)用生命周期函數(shù)：

5. 如何使用UniApp

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

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

(2) 安裝并打開(kāi)IDE之后，在點(diǎn)擊工具欄里的文件 -> 新建 -> 項(xiàng)目

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

(4) 進(jìn)入項(xiàng)目，點(diǎn)擊工具欄的運(yùn)行 -> 運(yùn)行到瀏覽器/真機(jī)下運(yùn)行/模擬器運(yùn)行，也可以選擇小程序在微信開(kāi)發(fā)者工具里運(yùn)行。

(5) 工程目錄結(jié)構(gòu)

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

（1）頁(yè)面文件 遵循Vue單頁(yè)面組件規(guī)范，Vue中的結(jié)構(gòu)依然采用三大頂級(jí)代碼塊

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

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

（所以不能使用標(biāo)準(zhǔn)的HTML標(biāo)簽，JS對(duì)DOM操作也得盡量避免）

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

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

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

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

總結(jié)

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