本文詳細講解如何搭建weex開發環境

一、前端必備node.js + webpack部分(weex-toolkit自帶webpack，可不裝webpack)

1、安裝node.js（現在的node一般都會整合npm,管理node依賴包用的）

windos系統推薦 win7 64位或者win10 64位

點選連結http://nodejs.cn/download/
選擇你需要安裝的版本（windows ，mac，linux 3種系統的版本），

下載你需要的版本（推薦用node8.7.0或者8.9.0 64位版本）如果是8.9的話能同時滿足egg.js的使用條件，win7 win10 64位系統下實測可用，太新的可能會導致weex-toolkit安裝失敗），

點選安裝包，下一步，下一步，安裝完成即可。

提示：注意確認系統是否自動添加了環境變數路徑

如果沒有，可自己新增系統環境變數路徑或者使用者環境變數 npm一般在使用者環境變數，node在系統環境

Path：C:\Users\Administrator\AppData\Roaming\npm;C:\Program Files\nodejs

執行cmd檢視node和npm版本號

node -v

npm -v

安裝npm淘寶映象（非必須）

npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝後可用cnpm代替npm執行命令列，一般在安裝依賴包出現下載失敗的時候用

2、安裝webpack（對weex來說非必須，weex-toolkit自帶webpack，可不裝webpack直接略過）

//全域性安裝（推薦webpack3）

npm install -g [email protected]

//或者

安裝到你的專案目錄

首先切換cd到你的專案目錄

如 cd myworkplace

//myworkplace為你建立的資料夾名字

然後

npm install --save-dev [email protected]

二、weex部分

1、安裝weex toolkit

一般全域性安裝
npm install -g weex-toolkit

驗證是否安裝成功

weex -v

如果失敗則解除安裝重新安裝試試

解除安裝命令

npm uninstall -g weex-toolkit 或 npm remove -g weex-toolkit

2、安裝java jdk（打包安卓必備）

現在java安裝包，網上的安裝包都是國外的，很難下載下來
就用這個連結下載，親測無毒，http://www.wmzhe.com/soft-30118.html
現在完成之後直接全部下一步，不要動配置，然後配置環境變數（具體操作可參考結尾備註網址）

使用者變數

變數名：JAVA_HOME，值：C:\Program Files\Java\jdk1.8.0_131

系統變數

變數名：path，值：%JAVA_HOME%\bin;

變數名：CLASSPATH，值：.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;

cmd測試是否安裝成功

輸入 javac 回車

3、安裝android studio（打包安卓必備）

這東西反正很好用，就是有點耗記憶體，使用方式這裡不介紹了，只做環境配置（具體操作可參考結尾備註網址）

傻瓜式安裝，安裝好之後，配置環境變數

注意安裝過程中，要記錄下你的sdk安裝路徑，因為配置系統變數要用到sdk下面的platform-tools和tools的路徑

使用者變數

變數名：ANDROID_HOME 變數值： D:\Android\sdk      就是你的sdk路徑

系統變數

變數名：path 變數值：;D:\Android\sdk\platform-tools; D:\Android\sdk\tools;      就是你的sdk路徑

注意
配置完成之後，開啟android studio進入sdk manager

之後切換到 sdk tools 選中下載 android sdk build-tools 中的23.0.2這個版本

cmd測試是否安裝成功

輸入 adb 回車

4、建立app專案
開啟命令列cmd
切換到要建立專案的目錄
生成目錄檔案
weex create my-firstapp

提示：由於生成app專案的時候有提示是否安裝vue-router（vue路由）的提示，如果需要的話可以直接打y安裝，其他選項一般用預設就可以了

切換到專案根目錄

cd my-firstapp

安裝專案

npm install

新增安卓工程

weex platform add android

打包執行安卓工程

weex run android

執行以上命令，不出意外的話，已經將官方demo打包成apk了

apk的位置在
my-firstapp\platforms\android\app\build\outputs\apk

如果想執行web端工程的話可用以下命令

weex run web

小提示
如果上面的步驟存在提示，說找不到android裝置，請把手機用usb插在電腦上，然後開啟usb除錯功能即可

5、安卓app數字證書籤名

打包出來的安卓app還需要進行簽名才能安裝在手機上，否則會出錯

推薦下載360加固寶進行簽名

操作步驟可看加固寶教程

簽名完後的app就可以直接執行在手機上面了

6、使用android studio執行app（可選的打包預覽方式，測試過不支援amd cpu，推薦用安卓模擬器打包預覽）

如果開發過程中每次像上面那樣打包再安裝是很麻煩，可以使用android studio的虛擬機器

將你的weex專案匯入到android studio中

將my-firstapp\platforms\android\app將這個資料夾匯入到android studio中來，

途中android studio控制檯可能會報錯，雙擊錯誤，等待安裝，完事兒了

然後點選AVD manager，選中一個裝置，如果沒有話先去機器人圖示那邊去添加個裝置，然後回來，點選執行按鈕，就可以開啟虛擬機器了

7、針對amd cpu的電腦可採用安卓模擬器如網易mumu打包預覽（推薦的打包預覽方式）
下載並安裝網易mumu安卓模擬器http://mumu.163.com/
開啟mumu 右下角系統應用裡面的設定裡把usb除錯開啟
連線到 mumu埠
cmd命令列
adb connect 127.0.0.1:7555
執行預覽安卓專案
切換到專案根目錄
cd my-firstapp

如果沒安卓工程可先新增安卓工程
weex platform add android

打包執行安卓工程
weex run android
成功的話安卓專案就會執行在mumu模擬器上了

三、weex開發除錯部分

1、新增weex debug（除錯套件）

用於除錯app用

cd到工程目錄下（app目錄的上一級）

weex debug

2、新增vuex（即vue路由，非必須，vue狀態管理一般配合vue-router即vue路由用）

切換cd到專案app根目錄

cd my-firstapp

安裝

npm install vuex --save

3.安裝weex-ui（非必須，前端開發一般配合ui更佳）

切換cd到專案app根目錄

cd my-firstapp

安裝
npm i [email protected] -S

4.安裝mockjs（非必須，前端開發模擬獲取後端資料用）

切換cd到專案app根目錄

cd my-firstapp

安裝
npm i [email protected] -S

四、備註

1、node.js、npm為初始必備條件,一般安裝完node.js會自帶npm

2、實用npm命令

（1）、查詢當前裝了多少node包

npm ls --depth 0 當前專案

npm ls -g --depth 0 全域性

（2）檢測更新依賴包（不推薦使用，會增加很多新的包，npm-check、npm-check-updates本身就是包）

檢測升級所有

npm install -g npm-check

npm install -g npm-check-updates

檢測升級當前專案

npm install npm-check

npm install npm-check-updates

3、其他具體安裝步驟和使用技巧可參考

4、這個最佳實踐是安卓的實踐,ios大同小異
…
新增ios工程
weex platform add ios
打包執行ios工程
weex run ios
…