Hybrid框架UI重構之路 一 師其長技以自強

2022-02-21 11:08:33 字數 2219 閱讀 9301

這兩年在支撐公司的hybrid框架的運維發展,讓人確認這種移動開發方式確實是一條不錯的路。混合應用這種開發方式降低開發難度,極大的提高開發效率,最重要的一點效果可以接近原生應用。框架的本身是需要持續不斷發展的,這裡開始我講述我重構hybird框架的ui的這三個月(2014-11——2015-1),而在重構之前,預先調查了目前所了解的幾個混合應用的框架,師其長技以自強。

ps:hybrid應用是web頁面與原生殼(android、ios)的結合最後打成安裝包的應用。

重構的前奏曲:

apicloud

這個移動端混合應用框架產品我是最熟悉的,為了理解深入理解還做了乙個示例應用。apicloud的開發環境還是不錯的,有自定義的ide,但沒有模板工程,同時也有svn控制專案,與其web站點相同步。而他將他的api分為「雲」端api,「終」端api。他的原生的殼做得非常好,外掛程式分模組(可選),且支援使用者自定義原生外掛程式,但我對他的ui控制項、元件的實現方式不是那麼贊同。因為此次我是針對自身hybrid框架的ui部分進入重構的,所以我更關注的是這方面的東西。

apicloud的控制項是絕大部分原生實現的,沒錯,是原生顯示的,無論是選單、列表還是頁面效果,都是原生實現的。不是說原生實現的不好,相反,原生實現的控制項的相容性更好,更流暢,也有更好的體驗。但問題來了,原生實現的控制項是固定的,除了提供出來的介面去設定控制項的樣式、狀態,沒有其他辦法修改,這就導致乙個問題,現在網際網路的應用的需求千變萬化,可能在使用控制項時候需要做一些小調整(加一行日期或說明什麼的),但原生無法改變,動都動不了。

我曾經諮詢過apicloud這種問題怎麼解決,他們告訴的解決辦法是自己可以寫web前端**實現(無法改原生提供的),但我想說的是,使用者都是很「傻」的,如果你提供了東西,他們就會想去用,一旦用不了要自己實現就會很煩。所以我想說,原生實現的固定性導致即使有原生之前提到的優點,我ui部分的控制項我也不想用原生實現,web實現更適合微調和自定義(做過框架運維的我深刻體會,到,ui的可微調是很重要的)。而ui控制項原生實現有另外乙個問題,就是定位的問題,是絕對定位,使用控制項時候需要設定x、y軸,這會出現——例如頁面有三個塊a、b、c,a、c是使用原生實現的控制項,b是自己的html塊,那問題來了,c需要設定x、y的值,當b是動態高度怎麼辦(我到現在也沒搞明白怎麼弄,我覺得終端還是要自己實現c)。

apicloud由於控制項都是原生實現的,他就乾脆連ui使用什麼依賴庫都不建議。官方是說使用者可以自己使用任意的前端框架,看似是為了放大自由度,但我覺得是在減輕產品ui部分的負擔,不提供、不建議ui使用的css、js,產品的運維成本將會大大降低(我現在運維的框架80%都是ui的問題),這點不得不說是apicloud的聰明之處。

這個框架是另外乙個同事去**的,我關注的是他的ui部分,但並沒有多大的驚喜,他是參照某個移動端框架(jingle)做的,雖然是示例工程改頭換面了一下,但抄的影子還是太深了。而在這裡也是提醒我的一點,好的東西可以抄(抄是沒有問題的,別人實現了,你為什麼還要實現一次,浪費時間),但必須符合自己的需求,別讓自己的思路被引導了。

jingle

單頁模式

也就是說,不同的檢視都是乙個html片段,而不是完整的html頁面。

優點1.共用的依賴庫不必重複載入,只需在主頁面載入一次,其他(html片段)不需要,這也間接提公升頁面載入速度。

2.使用css3做頁面之間的切換,速度比原生切換webview快很多。

缺點1.因為所有的html最終都是載入在主頁面,所以可能存在js、css命名衝突。(所以js和css的命名都需要進行有效管理,這一點需要時刻注意)

2.單頁模式會使乙個介面不斷載入新的元素而導致介面邏輯複雜和頁面膨脹

3.其實有乙個很嚴重的一點,就是記憶體洩露的問題。

多頁模式

缺點1.每個頁面可能都會重複載入一些資料(js、css、部分html**等)

2.頁面切換速度慢

總結

不同的框架,有不同的優點,在這裡找到了幾點可用於自身的東西,也是希望能增強自身。

Hybrid框架UI重構之路 二 事出有因

上文回顧 hybird框架ui重構之路 一 師其長技以自強 一切的重構都是有原因的,或許為了更快速度 更好體驗 更快捷開發等,於是就有了自己的開發目標,簡單看看未重構前ui 中國移動式 風格 1 規範開發 1.svn版本控制。之前的ui框架部分是沒有進行svn版本控制的,於是會導致個問題 有些檔案在...

新一代的Hybrid框架kerkee

kerkee是乙個多主體共存型hybrid框架,具有跨平台 使用者體驗好 效能高 擴充套件性好 靈活性強 易維護 規範化 整合雲服務 具有debug環境 徹底解決跨域問題。從開發者角度來說,它支援三種的團隊開發模式 針對web開發者 這種模式其中的乙個場景是 只會web開發,卻不會native開發的...

cocos creator中使用UI框架 一

已上傳到github 滿意請點個星星 謝謝 簡單的ui框架 將其中的uiframe資料夾匯入到你的cocos creator中 uiframe的簡單介紹 以上七個類 其中baseuiform和uimanager是我們的重點內容,baseuiform 中定義了一些方法 狀態相關的 display 顯示...