APP開發跨端目前國內常見的跨端框架有React Native,Flutter,uni-app
uni-app是雙渲染引擎,webview和weex(原生渲染,性能比webview高,但本身坑較多)可切換。跟小程序的體驗類似,但是比小程序流暢,使用uniapp開發小程序比用小程序官方工具開發的舒服,因為使用的是vue語法,更新數據不需要頻繁的setData(uni-app基於Vue Runtime深度定制實現,並借助了Vue的nextTick機制,大幅降低了setData的調用頻次,比如更新多條數據,原生小程序是一條一條多次引發邏輯與視圖層通訊,uniapp是把數據合並后再觸發一次通訊。),性能遠在原生開發之上,這個結果,和web開發類似,web開發也有原生js開發、vue、react框架等情況。如果不做特殊優化,原生js寫的網頁,性能經常還不如vue、react框架的性能。uniapp對於支付、分享、第三方登錄、推送等功能都做了封裝,使用起來非常方便。但是在ui這塊有一些不足,缺少APP的靈活性,動畫使用不方便,css動畫使用多了會卡頓
React Native一般用於app的跨端,亦可以開發桌面端應用,開發小程序需要通過Alita轉編譯(不支持直接使用小程序的原生api,因此小程序如果出新功能還需要官方更新,因此不建議使用)。React Native 擁有龐大的生態圈,各種輪子幫助開發者快速開發跨平台的app,但是跟uniapp一樣,定制化的需求如果涉及到原生業務且沒有合適的輪子,還是需要原生處理ios/android端。
可以直接使用Native原生動畫,輕松實現果凍彈動,面板基於某個點展開等等,這些用Web來做就難上加難。
Flutter擁有自己的一套渲染引擎,因此ui方面天然的沒有兼容問題(也可以說Flutter的跨端是UI跨端)。Flutter的動畫對象會根據屏幕刷新率每秒產生很多個(一般是60個)浮點數,只需要將一個組件屬性通過補間(Tween)關聯到動畫對象上,Flutter會確保在每一幀渲染正確的組件,從而形成連貫的動畫。而web需要實現相同的動畫比較難而且還沒flutter順暢。Flutter的UI很“牛逼”,但最麻煩的也是寫UI,flutter布局書寫有些類似於vue的render函數渲染元素,一但嵌套過多保准上午寫的代碼下午要改,光要找准地方就頗費功夫。只能常規布局封裝為組件調用來盡量解決,而且一定要多注釋!
一些UI、前端可能有的誤解
1.透明(沉浸式)狀態欄的兼容
透明狀態欄是界面圖片延伸到狀態欄,形成程序和狀態欄的顏色一體的效果,但是這個說法一般指的是APP,小程序也有相關概念,都是取消原生導航欄然后自行定義,不同的是小程序固定右上角有個膠囊按鈕,APP可以在右上角放些按鈕,小程序是不行的。H5移動端(微信h5)則無此概念
2.真的能一套代碼運行多端么
UI確實可以多端兼容(小程序端前些日子發現子元素需要繼承page高度的話不能設height,自動繼承了,寫了反而有問題,以前不是這樣的。涉及到了需要單獨處理),但是功能不一定,有些個性化的功能還是需要原生去參與。而且跨端的框架UI有一致性,等於放棄了一些安卓和ios不同的體驗度
阿斯特網絡科技是一個專業開發app的企業 https://app.astgo.net