天天看點
傳回

React-day1

移動App第1天

什麼是混合移動App開發【重點】

  1. 蘋果上的軟體是如何開發出來的：使用的是 OC、或者使用Swift這門語言
  2. 安卓平台上的軟體又是如何開發出來的：使用安卓相關的語言開發的，Java，安卓的控件進行開發
  3. 蘋果和安卓平台上共有的軟體是如何開發出來的：騰訊招兩套開發人員【開發組】，手機京東
  4. 前端移動 App（Application）開發技術，去開發手機端的應用程式；
  5. 前端的混合移動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開發

從程式員的角度分析：

  1. 掙錢多（别人不會的你會，别人會的，你精通）
  2. 對于找工作來說：（React Native）市場需求量大，好找工作，提高我們的行業競争力
  3. 能接觸到前端流行的技術和架構（各大公司基本都再用React），注意：再React中我們全部都使用ES6文法（class）
  • 前端是一個永恒的行業???（隻要世界上還有浏覽器的存在，必然需要前端，隻不過，随着時間的推移，技術更新換代，可能我們對新技術的要求會越來高）
  • 屌絲的崛起之路：​

    ​隻能做頁面​

     ​​ ->​

    ​Ajax前背景資料互動​

     ​​ ->​

    ​Jquery、Bootstrap​

     ​​ -> webApp ->​

    ​三大架構​

     ​​ ->​

    ​可以做手機混合App/桌面應用​

     ​​ ->​

    ​可以做手機原生App​

     ​​ ->​

    ​将來或許可以發射火箭發射衛星發射飛彈​

     ​​ ->​

    ​終極目标：統一全宇宙​

     ​
  1. （搞前端App開發）能購置一批牛逼的裝置【蘋果筆記本、IOS測試機、安卓手機（三星的、華為、小米）】

從企業的角度分析:(選擇合适自身的移動App開發方式)【重點】

  • 節省開發成本
  • 從工資上：盡最大的可能，壓榨員工的剩餘勞動力
  • 從時間上：因為 原生的安卓和IOS開發，它們的開發效率并不是很高，因為原生的代碼複雜度比較高，是以原生的開發周期比較慢；如果采用移動App開發，那麼，我們的開發周期會很短；因為 HTML + CSS + JS 足夠簡單；（對于前端開發APP來說，有兩種方式，其中，比較早的一種，也是比較簡單的一種，就是 先開發出一個網站， 然後再把網站運作一行打包的指令，就能得到一個 APP了）
  1. 市面上常見的App開發方式
  • WebApp：基于浏覽器實作的，有特定功能的網站，稱作WebApp
  • 例如：百度腦圖、https://m.jd.com/、https://m.taobao.com/#index
  • 優點：跨平台
  • 缺點：依賴網絡，有白屏效果，相對來說，使用者體驗差；不能調用硬體底層得裝置，比如攝像頭；
  • NativeApp：用android和Object-C等原生語言開發的應用
  • 優點：體驗好；使用者使用起來很流暢；非常适合做遊戲【性能高】；可以直接調用硬體底層的API；
  • 缺點：不能跨平台
  • HybirdApp：利用前端所學的知識去開發移動端App，兼具2者的優勢
  • 優點：能夠跨平台；體驗會好一些；也能夠調用硬體底層的API
  • 缺點：相對于原生體驗稍微弱一丢丢；不适合做遊戲；适合做非遊戲類型的手機App；
  • 應用場景：
  • 注意： 使用 Java 或者 IOS 寫出來的代碼和程式，在最終運作的時候，普通的文本代碼，都會被編譯為 原生的機器碼去運作，并不像 JS 這樣，解析執行，Java代碼是 編譯執行的；
  1. 三種開發方式的原理和對比
    2. React-day1
  2. ​​誰在使用React Native？？？​​

企業如何選擇合适自己的App開發方式

  1. 如果這個企業中，曾經使用原生技術開發過一些APP，那麼在維護的時候，必然需要使用原生技術來維護
  2. 如果企業中，需要做一些遊戲級别的應用，那麼推薦使用原生，因為原生運作效率高，對耗電量處理的很好；
  3. 如果企業做一些應用級别的非遊戲軟體，比如 淘寶、京東、美團，就可以使用 混合APP了；
  4. 在企業中，最主要的是好的點子，如果有了一個好的項目立案，那麼最好要立即把這個項目做出來；這時候，使用混合App非常合适，因為開發周期很短，能快速上線，搶先占領市場；【褲衩開發】

企業中項目開發流程

  • 需求調研：産品定位、閱聽人群體、市場需求、開發價值；【産出物：需求文檔】
  • 産品設計：功能子產品、流程邏輯；【産出物：設計文檔，互動稿】，确定項目的基本功能；
  • 項目開發：項目架構、美工、前端、背景、測試【産品的把控】要了解前後端分離的概念
  • 營運維護：上線試運作、調Bug、微調功能子產品、産品疊代
根據需求搞設計，根據設計做開發

企業技術選型 - 幾大主流技術之間的關系

  1. Angular.js 和 Ionic
  • ​​Angular1官網​​
  • ​​Angular2官網​​
  • ​​Ionic 中文網​​
  • ​​Ionic 英文官網​​
  1. Vue.js 和 Weex
  • ​​Vue.js官網​​
  • ​​Weex文檔​​
  • ​​Weex - github位址 - 新​​
  • ​​Weex - github位址 - 舊​​
  1. React.js 和 React-Native
  • ​​React.js英文官網​​
  • ​​ReactNative中文網​​
  • ​​ReactNative英文網​​

Angular, Vue, React 這三個都是前端架構，我們在進行混合App開發的時候，隻是用到了這三個架構的【基礎文法】而已；

Ionic， Weex， ReactNatvie 這三個都是打包工具（提供了相關的指令行，隻要運作指定的指令，就能夠把項目打包成一個手機App出來），能夠把我們開發出來的應用，最終打包成一個可安裝的手機端程式安裝包；同時，這三個東西，也提供了好用的一些小元件，友善我們去建構移動App的使用者界面；

前端混合App開發架構

  1. Html5+、ReactNative、Weex、Ionic
  2. ​​認識HTML5+​​
  • h5+是一個産業聯盟，它有一些網際網路成員，專門在中國推廣H5
  1. ​​HBuilder官網​​

開發架構之間的差別

  1. Html5+ 和 Ionic
  2. ReactNative 和 Weex

使用HBuilder生成安卓應用（線上）

​​API位址​​ Hbuilder這個工具，是一個線上打包工具，使用很友善，不需要在本地配置開發環境；直接将做好的網站，通過一些簡單的操作，就能線上打包為一個App出來；

  • 在項目上右鍵 -> 發行 -> 發行為原生安裝包

好處：本地不用配置開發環境；操作友善，對于程式員來說不關心打包的過程，打包過程對于我們來說是透明的；

缺點：程式員很少能幹預打包的過程；源代碼被送出到了雲端的伺服器，存在項目核心代碼被洩露的風險；

環境變量的使用

作用：将需要全局使用的工具或者應用程式，配置到Path環境變量中，可以很友善的通過指令行的形式，在任何想要運作這些應用程式的地方，運作它們；

移動App開發環境配置【重點】

安裝最新版本的java jdk

  1. 修改環境變量，新增​

    ​JAVA_HOME​

     ​​的系統環境變量，值為​

    ​C:\Program Files (x86)\Java\jdk1.8.0_112​

     ​，也就是安裝JDK的根目錄
  2. 修改系統環境變量​

    ​Path​

     ​​，在​

    ​Path​

     ​​之後新增​

    ​%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;​

     ​
  3. 建立系統環境變量​

    ​CLASSPATH​

     ​​，值為​

    ​.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;​

     ​
  4. 儲存所有的系統環境變量，同時退出系統環境變量配置視窗，然後運作cmd指令行工具，輸入​

    ​javac​

     ​，如果能出現javac的指令選項，就表示配置成功！

安裝Node.js環境

注意：需要安裝最新的長期穩定版本，不要實驗版本；安裝完畢之後的node.js會自動配置到全局系統環境變量中

安裝完畢後，可以輸入​​

​node -v​

​檢視node版本号；

安裝C++環境

大多數情況下作業系統自帶C++環境，不需要手動安裝C++環境；

如果運作報錯，則需要手動安裝visual studio中的C++環境；

安裝Git環境

Git安裝完畢後，會自動配置到系統環境變量中；

可以通過運作​​

​git --version​

​來檢查是否正确安裝和配置了Git的環境變量；

安裝Python環境

  1. 注意：安裝Python時候，隻能安裝2.×的版本，注意勾選安裝界面上的​

    ​Add Python to path​

     ​，這樣才能自動将Python安裝到系統環境變量中；
  2. 安裝完畢之後，可以在指令行中運作​

    ​python​

     ​，檢查是否成功安裝了python。

配置安卓環境

  1. 安裝​

    ​installer_r24.3.4-windows.exe​

     ​，最好手動選擇安裝到C槽下的android目錄
  2. 打開安裝的目錄，将​

    ​android-25​

     ​​、​

    ​android-23​

     ​​(react-native必須依賴這個)解壓後，放到​

    ​platforms​

     ​檔案夾下
  3. 解壓​

    ​platform-tools​

     ​​，放到​

    ​platform-tools​

     ​檔案夾下
  4. 【這一步直接忽略即可！】tools檔案夾不解壓覆寫也行；解壓​

    ​tools​

     ​，放到安裝根目錄中
  5. 解壓​

    ​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​

     ​檔案夾下
  6. 在安裝目錄中，建立​

    ​extras​

     ​​檔案夾，在​

    ​extras​

     ​​檔案夾下建立​

    ​android​

     ​​檔案夾；解壓​

    ​m2responsitory​

     ​​檔案夾和​

    ​support​

     ​​檔案夾，放到建立的​

    ​extras -> android​

     ​檔案夾下
  7. 配置安裝環境變量：在系統環境變量中建立​

    ​ANDROID_HOME​

     ​​，值為android SDK Manager的安裝路徑​

    ​C:\Users\liulongbin\AppData\Local\Android\android-sdk​

     ​​，緊接着，在Path中新增​

    ​;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;​

     ​

​​ReactNative快速打包​​

  1. 安裝完node後建議設定npm鏡像以加速後面的過程（或使用科學上網工具）。注意：**不要使用cnpm！**cnpm安裝的子產品路徑比較奇怪，packager不能正常識别！

npm config set registry https://registry.npm.taobao.org --global

npm config set disturl https://npm.taobao.org/dist --global

  1. Yarn、React Native的指令行工具（react-native-cli）
  • Yarn是Facebook提供的替代npm的工具，可以加速node子產品的下載下傳。React Native的指令行工具用于執行建立、初始化、更新項目、運作打包服務（packager）等任務。
npm install -g yarn react-native-cli
  • 安裝完yarn後同理也要設定鏡像源：
  1. 運作​

    ​react-native init AwesomeProject​

     ​建立React-Native項目
  2. 運作​

    ​cd AwesomeProject​

     ​​切換到項目根目錄中，運作​

    ​adb devices​

     ​來確定有裝置連接配接到了電腦上
  3. 運作​

    ​react-native run-android​

     ​打包編譯安卓項目，并部署到模拟器或開發機中
  4. 運作上一條指令之前，要確定有裝置連接配接到了電腦上，可以運作​

    ​adb devices​

     ​​檢視目前接入的裝置清單，打包好的檔案，放到了​

    ​android\app\build\outputs\apk​

     ​目錄下
  5. ​​入坑指南​​

​​Weex快速打包​​

  1. 安裝依賴:Weex 官方提供了 weex-toolkit 的腳手架工具來輔助開發和調試。首先，你需要最新穩定版的 Node.js 和 Weex CLi。
  2. 運作​

    ​npm install -g weex-toolkit​

     ​​安裝Weex 官方提供的​

    ​weex-toolkit​

     ​ 腳手架工具到全局環境中
  3. 運作​

    ​weex create project-name​

     ​初始化Weex項目
  4. 進入到項目的根目錄中，打開cmd視窗，運作​

    ​weex platform add android​

     ​安裝android模闆，首次安裝模闆時，等待時間較長，建議fq安裝模闆
  5. 打開​

    ​android studio​

     ​​中的​

    ​安卓模拟器​

     ​​，或者将​

    ​啟用USB調試的真機​

     ​​連接配接到電腦上，運作​

    ​weex run android​

     ​，打包部署weex項目
  6. 部署完成，檢視項目效果

總結重點

  1. 什麼是前端移動App開發
  2. 市面上常見的App開發方式及優缺點
  3. 使用Hbuilder線上生成安卓應用

  4. 學會配置ReactNative開發環境

    . 打開​​

    ​android studio​

     ​​中的​

    ​安卓模拟器​

     ​​，或者将​

    ​啟用USB調試的真機​

     ​​連接配接到電腦上，運作​

    ​weex run android​

     ​，打包部署weex項目
  5. 部署完成，檢視項目效果

總結重點

  1. 什麼是前端移動App開發
  2. 市面上常見的App開發方式及優缺點
  3. 使用Hbuilder線上生成安卓應用
  4. 學會配置ReactNative開發環境
  5. 掌握ReactNative打包流程
react android 移動APP 環境變量
上一篇: uniapp canvas小程式分享海報的實作
下一篇: 機器學習--聚類系列--DBSCAN算法

繼續閱讀