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

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

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

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

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

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

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

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

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

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

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

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

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

夠直白的解釋了。

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

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

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

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

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

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

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

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

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

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

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

大家有個(gè)概念就好啦?！疚恼聛碓从诰W(wǎng)絡(luò)】