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

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

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

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

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

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

這么一比，是不是感覺，移動端開發(fā)簡單多了?

pc，我們需要考慮什么呢?有點開發(fā)經驗的同學都知道，ie6-11，firefox，chrome，safari都得兼容的吧。哪個都夠你吃一壺的，無論是css還是js。

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

就目前來說，我們只需要考慮webkit內核的瀏覽器和chrome，uc，qq，小米手機瀏覽器就好了。。?！竞竺嫣匾鈺f這幾只國產瀏覽器哪里屌了】

相比較而言，除了經驗是0以外，需要兼容的東西還是少了，少了，少了呢。

ok，單純說pc和移動端開發(fā)的區(qū)別，其實也就是這個，可以簡單的概括來說，mobile端的網頁開發(fā)比pc端的網頁開發(fā)，更簡單一些。【頁面小了啊，裝的東西少了，css和html寫的少了吧】交互簡單一些【滑動，觸屏，手勢，平時看看手機你還能有啥特殊操作?】

so，別被這玩意嚇壞了，根據我的經驗來看，pc端的前端開發(fā)程序員，轉mobile開發(fā)，一點問題沒有，而且上手會很快。

夠直白的解釋了。

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

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

移動端web app是什么呢?簡單理解就是頁面頭部加入了下面這一句話的東西：

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

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

以上2種我覺得可以總結為web app。而不是普通的移動端網頁，如果想看移動端網頁，可以參考手機新浪網，手機網頁，手機騰訊新聞，手機鳳凰，是很好的對比。

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

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

理解了這塊，其實做套殼的比做普通web app和網頁都簡單，因為在native的webview中是可以指定是什么版本的webview，用什么內核，擁有什么等級的安全權限等等，ios和android做法不一樣，但是原理一致，對于前端開發(fā)工程師來說是無差的。

而且套殼開發(fā)還有個好處就是，因為資源是本地化的，所以可以使用比較重的框架，如angular，react，一些三方框架，因為最終都是通過和native代碼捆綁發(fā)布的。

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

大家有個概念就好啦?！疚恼聛碓从诰W絡】