首頁技術(shù)文章正文

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

更新時間:2018-01-26 來源:黑馬程序員 瀏覽量:

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

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

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

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

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

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

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

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

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

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

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

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

夠直白的解釋了。

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

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

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

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

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

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

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

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

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

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

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

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

分享到:
在線咨詢 我要報名
和我們在線交談!