作為一名移動(dòng)開發(fā)者，見證了公司的移動(dòng)產(chǎn)品架構(gòu)，從純web 網(wǎng)頁到native，再到hybrid的過程。hybrid 指app里一部分用native的代碼實(shí)現(xiàn)，一部分用webview加載web 網(wǎng)頁實(shí)現(xiàn)。越來越多的公司對(duì)移動(dòng)app采用hybrid的開發(fā)模式，一是可以和pc端共享代碼，節(jié)省資源，二是web部分有更新不用再次發(fā)布app就能實(shí)現(xiàn)。

對(duì)于hybrid app里的web開發(fā)，不是簡(jiǎn)單的把pc端的代碼直接拿過來給hybrid app用。PC和mobile的設(shè)備有區(qū)別，這就需要我們?cè)跒槎邔?shí)現(xiàn)web端時(shí)關(guān)注的重點(diǎn)不同。以下是我對(duì)mobile web開發(fā)的一點(diǎn)思考。

1. 界面布局， css設(shè)置

mobile設(shè)備屏幕較小，這就意味著我們不能用pc端設(shè)置界面的思維來設(shè)計(jì)mobile的界面。mobile屏幕上只能放有限的內(nèi)容，而且內(nèi)容大小要易于手指操作，比如點(diǎn)擊，滑動(dòng)等等。如果要適配多種mobile 設(shè)備，那就需要界面設(shè)計(jì)師設(shè)計(jì)出能在一定范圍內(nèi)動(dòng)態(tài)調(diào)整的界面。除此之外，mobile設(shè)備可以旋轉(zhuǎn)，對(duì)于豎屏和橫屏的界面，可能得設(shè)計(jì)出兩套展示方案。

2. 用戶操作

pc端的用戶操作是通過鼠標(biāo)完成： 單擊， 雙擊，右鍵等，對(duì)應(yīng)web的處理事件是pointer event。而mobile的操作是通過手指完成：點(diǎn)擊，長按，滑動(dòng)等，對(duì)應(yīng)的web處理事件是touch event。 這二者之間有可以共用的部分： 比如pc端的單擊操作，在mobile端通過手指點(diǎn)擊也能觸發(fā)。 而對(duì)于mobile端的滑動(dòng)手勢(shì)，需要mobile端去額外處理。
綜上所述，mobile web需要處理手勢(shì)操作。

3. 性能

pc 端和mobile端不同，除了屏幕大小以外， 還包括內(nèi)存，處理器的區(qū)別。在pc端一個(gè)應(yīng)用程序可以占用很多的內(nèi)存，有的web app甚至能達(dá)到1-2G左右的內(nèi)存。但在mobile端，一個(gè)app如果占用1-2G的內(nèi)存是不可取的，容易導(dǎo)致mobile 設(shè)備卡頓，app被系統(tǒng)殺掉等。因此，對(duì)于mobile web，需要對(duì)性能進(jìn)行優(yōu)化，使用懶加載技術(shù)，嚴(yán)格限制內(nèi)存使用，

web app是先請(qǐng)求靜態(tài)資源比如js， css 文件，然后再執(zhí)行js代碼來加載數(shù)據(jù)渲染網(wǎng)頁。在mobile中， app的啟動(dòng)速度對(duì)于用戶體驗(yàn)十分重要，hybrid app中的web部分，如果靜態(tài)資源過大，或?qū)е录虞d速度過慢。這就需要我們啟動(dòng)的js ， css 文件盡量縮小，加快mobile web的啟動(dòng)速度。即使我們把靜態(tài)資源綁定在app中發(fā)布，也可能遇到服務(wù)器升級(jí)，而用戶未及時(shí)升級(jí)app的情況。

4. 總結(jié)

對(duì)于mobile web的開發(fā)，我們需要從界面， 用戶操作，性能等方面進(jìn)行考慮。歡迎留言探討。