更新時間:2018-01-26 來源:黑馬程序員 瀏覽量:
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絡】