【第1天】移動App-學習筆記

移動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 -> 將來或許可以發射火箭發射衛星發射導彈 -> 終極目標：統一全宇宙

4. （搞前端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代碼是 編譯執行的；

2. 三種開發方式的原理和對比
   
   
3. 誰在使用React Native？？？

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

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

企業中項目開發流程

• 需求調研：產品定位、受衆羣體、市場需求、開發價值；【產出物：需求文檔】
• 產品設計：功能模塊、流程邏輯；【產出物：設計文檔，交互稿】，確定項目的基本功能；
• 項目開發：項目架構、美工、前端、後臺、測試【產品的把控】要理解前後端分離的概念
• 運營維護：上線試運行、調Bug、微調功能模塊、產品迭代

根據需求搞設計，根據設計做開發

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

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的用戶界面；

前端混合App開發框架

1. Html5+、ReactNative、Weex、Ionic
2. 認識HTML5+

• h5+是一個產業聯盟，它有一些互聯網成員，專門在中國推廣H5

3. 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

2. Yarn、React Native的命令行工具（react-native-cli）

• Yarn是Facebook提供的替代npm的工具，可以加速node模塊的下載。React Native的命令行工具用於執行創建、初始化、更新項目、運行打包服務（packager）等任務。

內容來自網上，記錄學習筆記方便後期查看，如有問題請與我聯繫，謝謝

---

【第6天】React-學習筆記

【第5天】移動App-學習筆記

【第4天】移動App-學習筆記

【第3天】移動App-學習筆記

【第2天】移動App-學習筆記

【第1天】移動App-學習筆記