移動端架構那些事

2021-08-09 09:45:39 字數 1157 閱讀 7677

好久沒有寫點什麼了,今天就來說說移動端架構的那些事兒吧。先來看看移動網際網路的發展史,看下圖

質量效率及效能不必多說,我來說說其他幾點:

動態性:舉個栗子,如果發現線上bug,通過傳統方式修改之後必須要重新打包發布應用市場,使用者安裝等一系列流程,一次兩次沒什麼所謂,次數多了,使用者肯定就會解除安裝掉你這個「辣雞「軟體了,如果能夠在使用者沒發現的時候,不知不覺的就修復了問題,是不是很爽,這就是動態性了。

跨平台:說白了就是一套**多端執行,極大的節約了開發成本。

hybrid:混合開發模式即原生+h5,用圖來說原理

reactnative的口號是 learn once write anywhere

weex的口號是write once run anywhere

仔細一看這兩句話其實不衝突,weex是基於reactnative的成果之下誕生的,如果非要說兩則的區別,那麼就是weex要狂一點,做得徹底一點~

來看看weex的架構圖

我簡單解釋下,我們都知道瀏覽器可以載入h5解決了動態性的問題,但是他的渲染機制決定了其體驗和原生比較相卻甚遠;而weex呢就改變了渲染機制,採用vue作為前端開發語言,通過轉換器轉換成jsbundle,然後用js引擎去解析,最後用原生控制項來進行渲染,既解決了動態性的問題又保證了原生的體驗,並且也最大程度的做到了跨平台化。

各類主流技術都講得差不多了(原生外掛程式化這裡就不多說了不能跨平台),最後奉獻一張自己理解的移動端框架的架構圖,希望能夠對在路上摸索前行的朋友有所啟迪~

移動端與rem那些事

這兩天在做移動端首頁,總結一下移動端相關的知識點。viewport 在未設定meta標籤時,viewport一般為980px。viewport主要有以下幾個設定 width 數值 不帶單位 device width height 數值 不帶單位 device height initial scale...

移動端的那些坑

首先我們來看乙個結構 div class header div div class main div div class footer textarea textarea div 其實就是最基本的上中下布局而已,問題是header和footer需要分別fixed到頭部和底部。遇到的都知道在ios的s...

移動端觸發onmousemoveout事件

對於input,移動端不能觸發onmousemoveout進行搜尋,那麼可以使用監聽來解決 var addhandler function element,type,handler else if element.attachevent else var move ontouchstart in d...