混合app打包步驟（本地+雲端）HybirdApp本地環境配置步驟

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

1. HBuilder是線上進行打包的，所以，本地不用配置任何打包的環境；
2. 只需把開發好的HTML專案，通過線上的方式即可實現打包，最終將打包好的專案，下載到本地。

1.8. 環境變數的使用

1. 注意：修改了環境變數，一定要重啟命令列視窗，重新讀取修改過後的環境變數；
2. 環境變數分為“使用者環境變數”和“系統環境變數”：使用者環境變數是區域性的，僅限當前登入使用者實用；系統環境變數是全域性的，任何一位使用者都可以使用全域性的環境變數；
3. 當我們在命令列視窗輸入可執行命令的時候，系統會先查詢環境變數，看當前環境變數中，有沒有可執行此命令的可執行程式，如果有，則執行命令，如果沒有呢，就提示不是可用的執行程式；

1.9. 移動App開發環境配置

由於線上打包必須聯網，所以在沒有網路的情況下就無法正常進行打包；所以我們需要配置一下本地的打包環境，實現在本機上對混合App專案進行打包構建；

1.9.1. 安裝最新版本的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的命令選項，就表示配置成功！

1.9.2. 安裝Node.js環境

注意：需要安裝最新的長期穩定版本，不要實驗版本；安裝完畢之後的node.js會自動配置到全域性系統環境變數中 安裝完畢後，可以輸入node -v檢視node版本號；

1.9.3. 安裝C++環境

大多數情況下作業系統自帶C++環境，不需要手動安裝C++環境； 如果執行報錯，則需要手動安裝visual studio中的C++環境；

1.9.4. 安裝Git環境

Git安裝完畢後，會自動配置到系統環境變數中； 可以通過執行git --version來檢查是否正確安裝和配置了Git的環境變數；

1.9.5. 安裝Python環境

1. 注意：安裝Python時候，只能安裝2.×的版本，注意勾選安裝介面上的Add Python to path，這樣才能自動將Python安裝到系統環境變數中；
2. 安裝完畢之後，可以在命令列中執行python，檢查是否成功安裝了python。

1.9.6. 配置安卓環境

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，放到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;

1.10. 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）等任務。

     npm install -g yarn react-native-cli

   • 安裝完yarn後同理也要設定映象源：

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

3. 執行react-native init AwesomeProject建立React-Native專案
4. 執行cd AwesomeProject切換到專案根目錄中
5. 執行react-native run-android打包編譯安卓專案，並部署到模擬器或開發機中
6. 執行上一條命令之前，要確保有裝置連線到了電腦上，可以執行adb devices檢視當前接入的裝置列表
7. 入坑指南

   問題1：開啟懸浮框許可權；
   問題2：Could not get BatchedBridge, make sure your bundle is packaged correctly
   解決方案：在終端中，進入到專案的根目錄，執行下面這段命令列：
   react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
   執行之前，需要確保android/app/src/main/目錄下有assets資料夾，如果沒有，手動建立之~，再執行上面的命令；
   問題3：could not connect to development server
   解決方案：晃動手機，喚起設定屬性視窗，點選“Dev settings”，再點選Debuug server host 出現設定ip地址視窗，填寫Ip地址和埠號8081，例如192.168.1.111:8081

1.11. Weex快速打包

1. 安裝依賴:Weex 官方提供了 weex-toolkit 的腳手架工具來輔助開發和除錯。首先，你需要最新穩定版的 Node.js 和 Weex CLi。
2. 執行cnpm 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. 部署完成，檢視專案效果