作為一名移動開發(fā)者，見證了公司的移動產(chǎn)品架構(gòu)杖虾，從純web 網(wǎng)頁到native烂瘫，再到hybrid的過程。hybrid 指app里一部分用native的代碼實現(xiàn)奇适，一部分用webview加載web 網(wǎng)頁實現(xiàn)坟比。越來越多的公司對移動app采用hybrid的開發(fā)模式，一是可以和pc端共享代碼嚷往，節(jié)省資源葛账，二是web部分有更新不用再次發(fā)布app就能實現(xiàn)。
對于hybrid app里的web開發(fā)皮仁，不是簡單的把pc端的代碼直接拿過來給hybrid app用籍琳。PC和mobile的設(shè)備有區(qū)別，這就需要我們在為二者實現(xiàn)web端時關(guān)注的重點不同贷祈。以下是我對mobile web開發(fā)的一點思考趋急。
1. 界面布局， css設(shè)置
mobile設(shè)備屏幕較小势誊，這就意味著我們不能用pc端設(shè)置界面的思維來設(shè)計mobile的界面呜达。mobile屏幕上只能放有限的內(nèi)容，而且內(nèi)容大小要易于手指操作粟耻，比如點擊查近，滑動等等。如果要適配多種mobile 設(shè)備挤忙，那就需要界面設(shè)計師設(shè)計出能在一定范圍內(nèi)動態(tài)調(diào)整的界面霜威。除此之外，mobile設(shè)備可以旋轉(zhuǎn)饭玲，對于豎屏和橫屏的界面侥祭，可能得設(shè)計出兩套展示方案。
2. 用戶操作
pc端的用戶操作是通過鼠標(biāo)完成： 單擊， 雙擊矮冬，右鍵等谈宛，對應(yīng)web的處理事件是pointer event。而mobile的操作是通過手指完成：點擊胎署，長按吆录，滑動等，對應(yīng)的web處理事件是touch event琼牧。 這二者之間有可以共用的部分： 比如pc端的單擊操作恢筝，在mobile端通過手指點擊也能觸發(fā)。 而對于mobile端的滑動手勢巨坊，需要mobile端去額外處理撬槽。
綜上所述，mobile web需要處理手勢操作趾撵。
3. 性能
pc 端和mobile端不同侄柔，除了屏幕大小以外， 還包括內(nèi)存占调，處理器的區(qū)別暂题。在pc端一個應(yīng)用程序可以占用很多的內(nèi)存，有的web app甚至能達到1-2G左右的內(nèi)存究珊。但在mobile端薪者，一個app如果占用1-2G的內(nèi)存是不可取的，容易導(dǎo)致mobile 設(shè)備卡頓剿涮，app被系統(tǒng)殺掉等言津。因此，對于mobile web幔虏，需要對性能進行優(yōu)化纺念，使用懶加載技術(shù)贝椿，嚴(yán)格限制內(nèi)存使用想括，
web app是先請求靜態(tài)資源比如js， css 文件烙博，然后再執(zhí)行js代碼來加載數(shù)據(jù)渲染網(wǎng)頁瑟蜈。在mobile中， app的啟動速度對于用戶體驗十分重要渣窜，hybrid app中的web部分铺根，如果靜態(tài)資源過大，或?qū)е录虞d速度過慢乔宿。這就需要我們啟動的js 位迂， css 文件盡量縮小，加快mobile web的啟動速度。即使我們把靜態(tài)資源綁定在app中發(fā)布掂林，也可能遇到服務(wù)器升級臣缀，而用戶未及時升級app的情況。
4. 總結(jié)
對于mobile web的開發(fā)泻帮，我們需要從界面精置， 用戶操作，性能等方面進行考慮锣杂。歡迎留言探討脂倦。
