移動前端開發和 Web 前端開發的區別

http://www.itcast.cn/news/20180125/16033584753.shtml

1，普通PC端開發與移動端開發區別。

先說背景，我大言不慚的說一下，我pc端的前端開發幹了有快4年多，不算大牛，也算一個標準的前端開發工程師吧，可憐的是我2015年以前作過的移動端項目不超過1個。。因此幾乎經驗爲零。我對這個神祕又被炒的火熱的名字迷惑了好久，移動前端開發工程師，h5前端開發工程師，native前端開發工程師，Hybrid前端開發工程師，感受很厲害有木有啊。。

因此我在15年決定棄坑了(pc的代碼實在寫膩歪了。。)，投身到專屬的移動開發中，業餘時間也作過phonegap，也知道和了解過一些h5+native開發的方式，下面就慢慢給你們【科普】一下。

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

那麼移動端前端開發工程師，說白了就很好理解了，作手機網頁的前端開發工程師。

這麼一比，是否是感受，移動端開發簡單多了?

pc，咱們須要考慮什麼呢?有點開發經驗的同窗都知道，ie6-11，firefox，chrome，safari都得兼容的吧。哪一個都夠你吃一壺的，不管是css仍是js。

mobile的網頁開發，咱們須要考慮什麼呢?

就目前來講，咱們只須要考慮webkit內核的瀏覽器和chrome，uc，qq，小米手機瀏覽器就行了。。。【後面特地會說這幾隻國產瀏覽器哪裏屌了】

相比較而言，除了經驗是0之外，須要兼容的東西仍是少了，少了，少了呢。

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

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

夠直白的解釋了。

2，移動端web app開發與套殼開發區別。

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

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

這個meta的做用是讓普通移動網頁被添加到主屏幕後，擁有一些類native的功能，不少同窗應該都很熟悉了。就是相似隱藏ios的上下狀態欄，實現全屏，禁止彈性拖拽，全屏，修改頂部顏色等。

我理解這種模式的網頁爲web app，固然還有一種類型就是你們平時都訪問的那些網站，好比手機taobao，手機美團，手機微博的網頁版，你們打開的時候，不是全屏的，可是用起來，開發者把它們假裝的很像這種web app的交互體驗而已。

以上2種我以爲能夠總結爲web app。而不是普通的移動端網頁，若是想看移動端網頁，能夠參考手機新浪網，手機網頁，手機騰訊新聞，手機鳳凰，是很好的對比。

以後我來講下套殼的吧。這部分若是沒有開發過phonegap或者相似和native連調過webview的同窗，可能以爲很陌生，其實不是，這種套殼開發和開發普通的網頁沒什麼區別，只不過資源大部分是file開頭的，本地資源，網絡資源分爲使用js異步接口獲取和native獲取，再和js的接口交互，相似ios中，能夠直接在oc或者swift能夠直接在webview中執行js，android同理，可是js想調用native功能怎麼辦呢?

咱們這邊的作法是有一個負責通信的iframe，咱們經過修改這個iframe的url，來讓native來監控一系列特殊的url地址請求，再在native中調用對應的功能，好比攝像頭，特殊交互，呼起，或者提供接口數據。數據的提供方式相似jsonp的原理，在執行函數的參數中傳回來。

理解了這塊，其實作套殼的比作普通web app和網頁都簡單，由於在native的webview中是能夠指定是什麼版本的webview，用什麼內核，擁有什麼等級的安全權限等等，ios和android作法不同，可是原理一致，對於前端開發工程師來講是無差的。

並且套殼開發還有個好處就是，由於資源是本地化的，因此可使用比較重的框架，如angular，react，一些三方框架，由於最終都是經過和native代碼捆綁發佈的。

套殼native的靜態前端部分的更新，咱們可使用遠程下載靜態資源包的方法實現，不發佈大版本而修改webview中邏輯的需求，這一點也是大部分公司選擇一半native一半h5來開發的緣由。都知道ios審覈發版很慢。

你們有個概念就好啦。【文章來源於網絡】