一、移動端框架選型

1、原生or 混合 or web

選型問題其實我并沒有考慮，因為根據我們實際情況，最適合的還是混合開發。這里大概闡述一下原生、混合、web的區別。

原生開發沒什么可說的，體驗肯定是最好的，但是需Android、IOS兩批人，小程序還要加人，人力成本相對較高。

這里所說的web是指用webview包裝，主要問題是體驗不太好，開發成本最低。

而混合開發則結合兩者的優勢，即可感受原生的體驗，也可享受熱更新。原生通過js調用android及ios的API（iOS是jscore，Android是v8）。特別是首頁，列表等頁面達到近似于原生的性能，也可以通過webview達到熱更新的便利。

這里選型主要考慮人力情況、開發成本情況、人才的知識結構等。見下圖：

2、三大框架

不討論。根據人員知識結構決定了選擇vue。

3、flutter or uniApp

這里特別說下flutter,因為它是google的產品，性能高。但它也只是個界面庫。渲染性能排序：flutter>js調用原生渲染（react native/weex/uni-app）>webview渲染。但是flutter的寫法很有可奇葩，不適應web開發者；另外三方接口調用方面能力弱。雖然flutter的發展勢頭不錯，但對我們團隊來說，成本還是太高。

二、uniapp框架選擇

其實在寫文章之前已經決定采用uniapp了，并不是它有多好，而是它適合我們目前的小團隊。由于之前我們已經用uniapp來開發app,但由于庫太舊，對nvue的支持弱，就決定升級原框架及頁面，但并不想從頭開始構造，于是選擇合適的基礎通用框架。

1、uni-starter

dcloud官方提供的快速框架，官方描述：uni-starter是一個集成了大量商用項目常見功能的，云端一體應用快速開發基本項目模版。APP有很多通用的功能，比如登錄注冊、頭像、設置、banner、... uni-starter將這些功能都已經集成好。

其實已經基本滿足一個通用框架的基本條件，本來準備采用它，但是它后臺基于uniCloud，而且“不能將后臺改成php、JAVA等其他后臺，這將違反使用許可協議“，由于我們后臺有自己的框架，所以只能放棄了。

2、uni-xiaofan

最終我們采用的基礎框架。

原因有三：

（1） 跟舊框架一脈相承，升級成本低。

（2） 采用uview2,支持nvue。

（3） Mit協議，且目前作者在維護。

3、ruoyi-uniapp

基于ruoyi的基礎框架，目前只實現部分功能，界面可借鑒。

最終我們采用uni-xiaofan框架，并借鑒uni-starter及ruoyi-uniapp的部分功能。

三、uniapp實踐

1、實踐目標

（1）平臺必須支持app(android和Ios)，微信小程序、Chrome。

（2）app盡量采用nvue,特別是首頁和列表部分。

（3）盡量采用flex布局，布局不使用百分比、沒有媒體查詢。

（4）基本框架支持vue3，盡量同時支持vue3。

（5）部分功能用uni-cloud實踐，如版本升級及問題反饋功能。

2、UI庫

本項目UI庫主要采用uni-app自帶的，再結合第三方庫。第三方基礎庫主要采用uview2.0。

優先級：內置組件>uni-ui擴展組件>uview2.0組件>…

可通過uni_modules來安裝擴展組件，不需要引用、注冊，并可以通過右鍵快速更新組件。

3、布局

支持跨平臺，框架使用 Flex 布局。

4、css

※盡量不使用百分比布局，如width：100%

※class 進行綁定時只支持數組語法。

※不支持媒體查詢。

※不能在 style 中引入字體文件。

※不支持在css里寫背景圖background-image，但可以使用image組件和層級來實現類似web中的背景效果。因為原生開發本身也沒有web這種背景圖概念。

※設置background-color。

※文字內容，必須只能在text組件下，text組件不能換行寫內容，否則會出現無法去除的周邊空白。

※只有text標簽可以設置字體大小，字體顏色。

另外盡量不使用uview2.0中的內置樣式。

5、國際化

目前框架已支持國際化。使用時{{$t('mine.notLoggedInfo')}}or$t('mine.feedback')調用即可。

6、支持uniCloud

雖然我們不完全采用uniCloud，但是部分功能可通過unicloud實現，如版本升級及問題反饋等，實現更便捷。

四、uniapp頁面

1、我的

2、消息

3、通訊錄

4、工作臺