移動(dòng)前端開(kāi)發(fā)和 Web 前端開(kāi)發(fā)的區(qū)別

1，普通PC端開(kāi)發(fā)與移動(dòng)端開(kāi)發(fā)區(qū)別。

先說(shuō)背景，我大言不慚的說(shuō)一下，我pc端的前端開(kāi)發(fā)干了有快4年多，不算大牛，也算一個(gè)標(biāo)準(zhǔn)的前端開(kāi)發(fā)工程師吧，可憐的是我2015年之前做過(guò)的移動(dòng)端項(xiàng)目不超過(guò)1個(gè)。。所以幾乎經(jīng)驗(yàn)為零。我對(duì)這個(gè)神秘又被炒的火熱的名字迷惑了很久，移動(dòng)前端開(kāi)發(fā)工程師，h5前端開(kāi)發(fā)工程師，native前端開(kāi)發(fā)工程師，Hybrid前端開(kāi)發(fā)工程師，感覺(jué)很厲害有木有啊。。

所以我在15年決定棄坑了(pc的代碼實(shí)在寫膩歪了。。)，投身到專屬的移動(dòng)開(kāi)發(fā)中，業(yè)余時(shí)間也做過(guò)phonegap，也知道和了解過(guò)一些h5+native開(kāi)發(fā)的方式，下面就慢慢給大家【科普】一下。

普通pc端開(kāi)發(fā)，我理解就是你拿電腦打開(kāi)的網(wǎng)頁(yè)都算。

那么移動(dòng)端前端開(kāi)發(fā)工程師，說(shuō)白了就很好理解了，做手機(jī)網(wǎng)頁(yè)的前端開(kāi)發(fā)工程師。

這么一比，是不是感覺(jué)，移動(dòng)端開(kāi)發(fā)簡(jiǎn)單多了?

pc，我們需要考慮什么呢?有點(diǎn)開(kāi)發(fā)經(jīng)驗(yàn)的同學(xué)都知道，ie6-11，firefox，chrome，safari都得兼容的吧。哪個(gè)都?jí)蚰愠砸粔氐?，無(wú)論是css還是js。

mobile的網(wǎng)頁(yè)開(kāi)發(fā)，我們需要考慮什么呢?

就目前來(lái)說(shuō)，我們只需要考慮webkit內(nèi)核的瀏覽器和chrome，uc，qq，小米手機(jī)瀏覽器就好了。。?！竞竺嫣匾鈺?huì)說(shuō)這幾只國(guó)產(chǎn)瀏覽器哪里屌了】

相比較而言，除了經(jīng)驗(yàn)是0以外，需要兼容的東西還是少了，少了，少了呢。

ok，單純說(shuō)pc和移動(dòng)端開(kāi)發(fā)的區(qū)別，其實(shí)也就是這個(gè)，可以簡(jiǎn)單的概括來(lái)說(shuō)，mobile端的網(wǎng)頁(yè)開(kāi)發(fā)比pc端的網(wǎng)頁(yè)開(kāi)發(fā)，更簡(jiǎn)單一些?！卷?yè)面小了啊，裝的東西少了，css和html寫的少了吧】交互簡(jiǎn)單一些【滑動(dòng)，觸屏，手勢(shì)，平時(shí)看看手機(jī)你還能有啥特殊操作?】

so，別被這玩意嚇壞了，根據(jù)我的經(jīng)驗(yàn)來(lái)看，pc端的前端開(kāi)發(fā)程序員，轉(zhuǎn)mobile開(kāi)發(fā)，一點(diǎn)問(wèn)題沒(méi)有，而且上手會(huì)很快。

夠直白的解釋了。

2，移動(dòng)端web app開(kāi)發(fā)與套殼開(kāi)發(fā)區(qū)別。

移動(dòng)端web app，移動(dòng)端網(wǎng)頁(yè)，Hybrid開(kāi)發(fā)【我喜歡叫套殼開(kāi)發(fā)工程師……】，無(wú)所謂叫什么，移動(dòng)端開(kāi)發(fā)無(wú)疑就是這3種了。下面一一解釋下我的理解。

移動(dòng)端web app是什么呢?簡(jiǎn)單理解就是頁(yè)面頭部加入了下面這一句話的東西：

這個(gè)meta的作用是讓普通移動(dòng)網(wǎng)頁(yè)被添加到主屏幕后，擁有一些類native的功能，很多同學(xué)應(yīng)該都很熟悉了。就是類似隱藏ios的上下?tīng)顟B(tài)欄，實(shí)現(xiàn)全屏，禁止彈性拖拽，全屏，修改頂部顏色等。

我理解這種模式的網(wǎng)頁(yè)為web app，當(dāng)然還有一種類型就是大家平時(shí)都訪問(wèn)的那些網(wǎng)站，比如手機(jī)taobao，手機(jī)美團(tuán)，手機(jī)微博的網(wǎng)頁(yè)版，大家打開(kāi)的時(shí)候，不是全屏的，但是用起來(lái)，開(kāi)發(fā)者把它們偽裝的很像這種web app的交互體驗(yàn)而已。

以上2種我覺(jué)得可以總結(jié)為web app。而不是普通的移動(dòng)端網(wǎng)頁(yè)，如果想看移動(dòng)端網(wǎng)頁(yè)，可以參考手機(jī)新浪網(wǎng)，手機(jī)網(wǎng)頁(yè)，手機(jī)騰訊新聞，手機(jī)鳳凰，是很好的對(duì)比。

之后我來(lái)說(shuō)下套殼的吧。這部分如果沒(méi)有開(kāi)發(fā)過(guò)phonegap或者類似和native連調(diào)過(guò)webview的同學(xué)，可能覺(jué)得很陌生，其實(shí)不是，這種套殼開(kāi)發(fā)和開(kāi)發(fā)普通的網(wǎng)頁(yè)沒(méi)什么區(qū)別，只不過(guò)資源大部分是file開(kāi)頭的，本地資源，網(wǎng)絡(luò)資源分為使用js異步接口獲取和native獲取，再和js的接口交互，類似ios中，可以直接在oc或者swift可以直接在webview中執(zhí)行js，android同理，但是js想調(diào)用native功能怎么辦呢?

我們這邊的做法是有一個(gè)負(fù)責(zé)通訊的iframe，我們通過(guò)修改這個(gè)iframe的url，來(lái)讓native來(lái)監(jiān)控一系列特殊的url地址請(qǐng)求，再在native中調(diào)用對(duì)應(yīng)的功能，比如攝像頭，特殊交互，呼起，或者提供接口數(shù)據(jù)。數(shù)據(jù)的提供方式類似jsonp的原理，在執(zhí)行函數(shù)的參數(shù)中傳回來(lái)。

理解了這塊，其實(shí)做套殼的比做普通web app和網(wǎng)頁(yè)都簡(jiǎn)單，因?yàn)樵趎ative的webview中是可以指定是什么版本的webview，用什么內(nèi)核，擁有什么等級(jí)的安全權(quán)限等等，ios和android做法不一樣，但是原理一致，對(duì)于前端開(kāi)發(fā)工程師來(lái)說(shuō)是無(wú)差的。

而且套殼開(kāi)發(fā)還有個(gè)好處就是，因?yàn)橘Y源是本地化的，所以可以使用比較重的框架，如angular，react，一些三方框架，因?yàn)樽罱K都是通過(guò)和native代碼捆綁發(fā)布的。

套殼native的靜態(tài)前端部分的更新，我們可以使用遠(yuǎn)程下載靜態(tài)資源包的方法實(shí)現(xiàn)，不發(fā)布大版本而修改webview中邏輯的需求，這一點(diǎn)也是大部分公司選擇一半native一半h5來(lái)開(kāi)發(fā)的原因。都知道ios審核發(fā)版很慢。

大家有個(gè)概念就好啦。【文章來(lái)源于網(wǎng)絡(luò)】