混合移動App乾貨:一篇就可以徹底搞懂!
引言
本文會詳細的講解什麼是混合App開發、混合App開發概念、原理、區別、為什麼要學習混合App、混合App開發的幾種方式以及具體的環境配置和踩坑指南等乾貨十足。
1-什麼是混合移動App開發
- 蘋果上的軟體是如何開發出來的:使用的是 OC、或者使用Swift這門語言
- 安卓平臺上的軟體又是如何開發出來的:使用安卓相關的語言開發的,Java,安卓的控制元件進行開發
- 蘋果和安卓平臺上共有的軟體是如何開發出來的:騰訊招兩套開發人員【開發組】,手機京東
- 前端移動 App(Application)開發技術,去開發手機端的應用程式;
- 前端的混合移動App開發技術,並沒有使用 蘋果 或 安卓 官方推薦的 開發平臺和開發方式,而是拋棄了 官方提供的方式,使用 前端的獨有的技術進行移動App開發體驗;
什麼是移動App開發:通俗的理解,就是把開發Web網站的技
(HTML+CSS+JS),透過某種方式,移植到移動App開發上進行使用,這種利用Web開發技術進行移動端開發體驗的方式,叫做混合移動App開發!
關於移動App開發,需要知道的幾個概念:
- 原生開發:它的英文單詞是(NativeApp),指的就是使用 IOS、Android 官方提供的工具、開發平臺、配套語言進行 手機App開發的方式;
- 混合開發:(HybirdApp)就是使用前端已有的技術,HTML + CSS + JS ,然後再搭配一些相關的打包編譯技術,就能夠開發出一個手機App,安裝到手機中進行使用;
什麼是App:App是(Application的縮寫),意思是:可安裝的應用程式;
App的分類:
按照平臺來劃分:
- PC端:瀏覽器、程式碼編輯器、PC端的遊戲、聽歌的、看影片的、聊天的
- 移動端:手機QQ、手機微信、手機愛奇藝、亡者農藥
按照功能來劃分: - 遊戲:憤怒的小雞仔、植物大戰殭屍、亡者農藥…LOL
- 應用:非遊戲類的軟體,支付寶、陌陌、美團外賣、
App和Web的區別:
APP概念:App是(Application的縮寫),意思是:可安裝的應用程式;
- 優點:流暢、穩定、基本上一些App都可以脫網執行,使用者體驗好;
- 缺點:不能跨平臺
Web概念:特指那些基於瀏覽器的web網站(本質:就是網頁)
- 優點:可以跨平臺(瀏覽器天生就是跨平臺的)
- 缺點:沒有App流暢、不穩定,受限於網速和網路
倆種APP開發型別的本質區別:
2-為什麼要學混合App開發
從程式設計師的角度分析:
-
掙錢多(別人不會的你會,別人會的,你精通)
-
對於找工作來說:(React Native)市場需求量大,好找工作,提高我們的行業競爭力
-
能接觸到前端流行的技術和框架(各大公司基本都再用React),注意:再React中我們全部都使用ES6語法(class)
-
前端是一個永恆的行業???(只要世界上還有瀏覽器的存在,必然需要前端,只不過,隨著時間的推移,技術更新換代,可能我們對新技術的要求會越來高)
-
屌絲的崛起之路:只能做頁面 -> Ajax前後臺資料互動 -> Jquery、Bootstrap -> webApp -> 三大框架 -> 可以做手機混合App/桌面應用 -> 可以做手機原生App -> 將來或許可以發射火箭發射衛星發射導,彈 -> 終極目標:統一全宇宙
(搞前端App開發)能購置一批牛逼的裝置【蘋果筆記本、IOS測試機、安卓手機(三星的、華為、小米)】
從企業的角度分析:(選擇合適自身的移動App開發方式)【重點】
- 節省開發成本
- 從工資上:盡最大的可能,壓榨員工的剩餘勞動力
- 從時間上:因為 原生的安卓和IOS開發,它們的開發效率並不是很高,因為原生的程式碼複雜度比較高,因此原生的開發週期比較慢;如果採用移動App開發,那麼,我們的開發週期會很短;因為 HTML + CSS + JS 足夠簡單;(對於前端開發APP來說,有兩種方式,其中,比較早的一種,也是比較簡單的一種,就是 先開發出一個網站, 然後再把網站執行一行打包的命令,就能得到一個 APP了)
1. 市面上常見的App開發方式
WebApp:****基於瀏覽器實現的,有特定功能的網站,稱作WebApp
NativeApp:****用android和Object-C等原生語言開發的應用
- 優點:體驗好;使用者使用起來很流暢;非常適合做遊戲【效能高】;可以直接呼叫硬體底層的API;
- 缺點:不能跨平臺
HybirdApp:****利用前端所學的知識去開發移動端App,兼具2者的優勢
- 優點:能夠跨平臺;體驗會好一些;也能夠呼叫硬體底層的API
- 缺點:相對於原生體驗稍微弱一丟丟;不適合做遊戲;適合做非遊戲型別的手機App;
應用場景:
注意:使用 Java 或者 IOS 寫出來的程式碼和程式,在最終執行的時候,普通的文字程式碼,都會被編譯為 原生的機器碼去執行,並不像 JS 這樣,解析執行,Java程式碼是 編譯執行的;
三種開發方式的原理和對比
3-企業如何選擇合適自己的App開發方式
- 如果這個企業中,曾經使用原生技術開發過一些APP,那麼在維護的時候,必然需要使用原生技術來維護
- 如果企業中,需要做一些遊戲級別的應用,那麼推薦使用原生,因為原生執行效率高,對耗電量處理的很好;
- 如果企業做一些應用級別的非遊戲軟體,比如 淘寶、京東、美團,就可以使用 混合APP了;
- 在企業中,最主要的是好的點子,如果有了一個好的專案立案,那麼最好要立即把這個專案做出來;這時候,使用混合App非常合適,因為開發週期很短,能快速上線,搶先佔領市場;【褲衩開發】
4-企業中專案開發流程
- 需求調研:產品定位、受眾群體、市場需求、開發價值;【產出物:需求文件】
- 產品設計:功能模組、流程邏輯;【產出物:設計文件,互動稿】,確定專案的基本功能;
- 專案開發:專案架構、美工、前端、後臺、測試【產品的把控】要理解前後端分離的概念
- 運營維護:上線試執行、調Bug、微調功能模組、產品迭代
根據需求搞設計,根據設計做開發
5-企業技術選型 - 幾大主流技術之間的關係
1. Angular.js 和 Ionic
- Angular1官網
- Angular2官網
- Ionic 中文網
- Ionic 英文官網
2. Vue.js 和 Weex
- Vue.js官網
- Weex文件
- Weex - github地址 - 新
- Weex - github地址 - 舊
3. React.js 和 React-Native
- React.js英文官網
- ReactNative中文網
- ReactNative英文網
Angular, Vue, React 這三個都是前端框架,我們在進行混合App開發的時候,只是用到了這三個框架的【基礎語法】而已;Ionic, Weex, ReactNatvie 這三個都是打包工具(提供了相關的命令列,只要執行指定的命令,就能夠把專案打包成一個手機App出來),能夠把我們開發出來的應用,最終打包成一個可安裝的手機端程式安裝包;同時,這三個東西,也提供了好用的一些小元件,方便我們去構建移動App的使用者介面;
6-前端混合App開發框架
- Html5+、ReactNative、Weex、Ionic
- 認識HTML5+
h5+是一個產業聯盟,它有一些網際網路成員,專門在中國推廣H5 - HBuilder官網
7-開發框架之間的區別
- Html5+ 和 Ionic
- ReactNative 和 Weex
8-使用HBuilder生成安卓應用(線上)
Hbuilder這個工具,是一個線上打包工具,使用很方便,不需要在本地配置開發環境;直接將做好的網站,透過一些簡單的操作,就能線上打包為一個App出來;在專案上右鍵 -> 發行 -> 發行為原生安裝包
- 好處:本地不用配置開發環境;操作方便,對於程式設計師來說不關心打包的過程,打包過程對於我們來說是透明的;
- 缺點:程式設計師很少能干預打包的過程;原始碼被提交到了雲端的伺服器,存在專案核心程式碼被洩露的風險;
9-環境變數的使用
作用:將需要全域性使用的工具或者應用程式,配置到Path環境變數中,可以很方便的透過命令列的形式,在任何想要執行這些應用程式的地方,執行它們;
10-移動App開發環境配置【重點】
10.1-安裝最新版本的java jdk
- 修改環境變數,新增JAVA_HOME的系統環境變數,值為C:\Program Files (x86)\Java\jdk1.8.0_112,也就是安裝JDK的根目錄
- 修改系統環境變數Path,在Path之後新增%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;
- 新建系統環境變數CLASSPATH,值為.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;
- 儲存所有的系統環境變數,同時退出系統環境變數配置視窗,然後執行cmd命令列工具,輸入javac,如果能出現javac的命令選項,就表示配置成功!
10.2-安裝Node.js環境
注意:需要安裝最新的長期穩定版本,不要實驗版本;安裝完畢之後的node.js會自動配置到全域性系統環境變數中安裝完畢後,可以輸入node -v檢視node版本號;
10.3-安裝C++環境
大多數情況下作業系統自帶C++環境,不需要手動安裝C++環境;如果執行報錯,則需要手動安裝visual studio中的C++環境;
10.4-安裝Git環境
Git安裝完畢後,會自動配置到系統環境變數中;可以透過執行git --version來檢查是否正確安裝和配置了Git的環境變數;
10.5-安裝Python環境
- 注意:安裝Python時候,只能安裝2.×的版本,注意勾選安裝介面上的Add Python to path,這樣才能自動將Python安裝到系統環境變數中;
- 安裝完畢之後,可以在命令列中執行python,檢查是否成功安裝了python。
10.6-配置安卓環境
- 安裝installer_r24.3.4-windows.exe,最好手動選擇安裝到C盤下的android目錄
- 開啟安裝的目錄,將android-25、android-23(react-native必須依賴這個)解壓後,放到platforms資料夾下
- 解壓platform-tools,放到platform-tools資料夾下
- 【這一步直接忽略即可!】tools資料夾不解壓覆蓋也行;解壓tools,放到安裝根目錄中
- 解壓build-tools_r23.0.1-windows.zip(react-native必須依賴這個)、build-tools_r23.0.2-windows.zip(weex必須依賴這個)和build-tools_r23.0.3-windows.zip,並將解壓出來的資料夾,分別改名為版本號23.0.1、23.0.2和23.0.3;在安裝目錄中新建資料夾build-tools,並將改名為版本號之後的資料夾,放到新建立出來的build-tools資料夾下
- 在安裝目錄中,新建extras資料夾,在extras資料夾下新建android資料夾;解壓m2responsitory資料夾和support資料夾,放到新建的extras -> android資料夾下
- 配置安裝環境變數:在系統環境變數中新建ANDROID_HOME,值為android SDK Manager的安裝路徑C:\Users\liulongbin\AppData\Local\Android\android-sdk,緊接在Path中新增;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;
11-ReactNative快速打包
安裝完node後建議設定npm映象以加速後面的過程(或使用科學上網工具)。注意:不要使用cnpm!cnpm安裝的模組路徑比較奇怪,packager不能正常識別!
最後
想要看以前的Android進階內容,推一下我的GitHub交友地址:
star一下 ,一起學習
害我大家準備了一份
Android面試指南
希望可以給你們幫助
免費領取方式:點贊+評論,關注我,私信【面試指南
】獲取
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69952849/viewspace-2673558/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 徹底搞懂徹底搞懂事件驅動模型 - Reactor事件模型React
- 乾貨預警,一篇文章帶你徹底搞懂 Laravel 框架的執行原理!!!Laravel框架
- 一篇文章徹底搞懂java動態代理的實現Java
- 徹底搞懂 RxJavaRxJava
- 兩張圖徹底搞懂MyBatis的Mapper原理!MyBatisAPP
- 【愣錘筆記】一篇小短文讓你徹底搞懂this、call、apply和bind筆記APP
- 徹底搞懂https原理HTTP
- 徹底搞懂JavaScript作用域JavaScript
- 徹底搞懂Bean載入Bean
- 徹底搞懂 Git-RebaseGit
- 徹底搞懂Composer自動載入原理
- 深入JavaScript系列(四):徹底搞懂thisJavaScript
- 徹底搞懂 Channel 實現原理
- 徹底搞懂 RxJava — 基礎篇RxJava
- 徹底搞懂 RxJava — 中級篇RxJava
- 徹底搞懂 RxJava — 高階篇RxJava
- 什麼。你還沒有搞懂Spring事務增強器 ,一篇文章讓你徹底搞懂Spring事務,雖然很長但是乾貨滿滿Spring
- 徹底搞懂JavaScript中的繼承JavaScript繼承
- 徹底搞懂Python中的類Python
- 看完讓你徹底搞懂Websocket原理Web
- 兩萬字長文,徹底搞懂Kafka!Kafka
- 徹底搞懂JavaScript原型和原型鏈JavaScript原型
- 徹底搞懂原型、原型鏈和繼承原型繼承
- 從原理到實戰,徹底搞懂NginxNginx
- Flutter(五)之徹底搞懂Dart非同步FlutterDart非同步
- 徹底搞懂瀏覽器Event-loop瀏覽器OOP
- 徹底搞懂Scrapy的中介軟體(三)
- 徹底搞懂Scrapy的中介軟體(二)
- 徹底搞懂Scrapy的中介軟體(一)
- 徹底搞懂HTTPS的加密機制HTTP加密
- 徹底搞懂Object和Function的關係ObjectFunction
- 絕對乾貨!徹底理解Js物件導向程式設計(一)JS物件程式設計
- 這一次,徹底搞懂 Go CondGo
- 徹底搞懂容器技術的基石: namespace (下)namespace
- 徹底搞懂同步非同步與阻塞非阻塞非同步
- 徹底搞懂 python 中文亂碼問題Python
- 徹底搞懂訪問者模式的靜態、動態和偽動態分派模式
- 徹底搞懂 MySQL 事務的隔離級別MySql