最近開在始做一個移動端的專案，使用的技術棧是 React 相關的技術棧，完成之後，頁面放到其他手機客戶端裡面展示。專案初期可能只是放在其他手機客戶端裡面展示，後面會考慮做成獨立手機客戶端，所以預先熟悉一下這方面的技術，比如 Weex，比如 React Native。
之前在網上看到一些 Weex 文件的吐槽，所以我也是帶著一點忐忑的心情來除錯這個初始化專案的。-_-||
在參考網上其他文章除錯這個專案的時候，會出現一兩個因為工具版本或者是自身電腦環境的緣故而中途執行不起來，你在參考這篇文章除錯的時候，也可能會出現類似的問題，表慌，坑都是這樣踩出來的，歡迎在評論下面分享出你遇到的坑。: )
我當時的電腦環境是：
# 系統版本
macOS Sierra: 10.12.5
# 我用另一臺電腦的系統版本是 OS X EI Capitan 10.11
node: v6.11.3
# 我用另一臺電腦試的時候，當時那臺電腦的 node 版本是 v4.x。
# 我抱著試一試的心態從 Node 官網直接下了 v6.11.4 的 dmg 安裝包，安裝成功後，node 版本就變成了 v6.11.4。
# 這樣就算升級了 node 版本了，*_*。
npm: v5.4.2
# 因為官網介紹 weex-toolkit1.0.8 版本後新增了 npm5 規範的 npm-shrinkwrap.json 用於鎖定包依賴
# 所以 npm 的版本升級到了 5.x，故 npm 版本 < 5 的使用者需要通過 npm i npm@latest -g 更新一下 npm 的版本。
cnpm: v5.1.1 # 安裝命令：npm install -g cnpm --registry=https://registry.npm.taobao.org複製程式碼如果上面的工具還沒有安裝，那先安裝一下，儘量保證版本一致。這時候我還沒有裝 cocoapods，沒有裝 JDK，沒有指定 ANDROID_HOME 路徑，也不知道需要安裝這些，這些要到後面用模擬器執行 APP 時才會知道它們。
接下來先進行專案初始化。
專案初始化
一、安裝 weex-toolkit 工具。
cnpm install -g weex-toolkit
weex -v
# 檢視安裝的版本，我使用的版本是：v1.1.0-beta.1複製程式碼提示：如果提示許可權錯誤（'...permission error'），使用 sudo 關鍵字進行安裝。
二、建立專案
weex create weex-project複製程式碼三、開發
npm install
# 估計會比較慢，耐心等一下
npm run dev & npm run serve
# 會自動在瀏覽器裡面開啟專案頁面
# *注意上面的命令不是 npm run dev && npm run serve
# 也不是 npm run dev & npm run server，更不是 npm run dev && npm run server
# 這裡我之前老是搞混，導致不能正常啟動除錯。
# 預設是使用 8080 埠啟動，如果被佔用，需要換一個埠啟動。複製程式碼
頁面的程式碼是在 src/index.vue 檔案裡面定義的，純正的用 Vue 寫的 Web 程式碼。百聞不如一見，是不是感覺心跳在加速，可以用 Web 程式碼寫手機原生應用了。
模擬器執行 Native APP
既然是寫手機原生應用，那我們就把頁面放手機上展示看看。這裡如果沒有真機的話，就先用模擬器來展示。首先是 iOS 版本。
iOS 版
一、安裝一些軟體和工具。
Xcode
我現在用的是 Version 8.3.3 (8E3004b) 版，是從蘋果開發者中下載的歷史版本。因為現在從 APP Store 裡面 Xcode 版本是 9.0，我的系統支援不了。所以如果你的系統也不能相容這個版本的 Xcode，也需要到蘋果開發者中心裡面去下載歷史版本的 Xcode。
Simulator
-
它是 Swift 和 Objective-C Cocoa 專案的依賴管理工具，像 npm 一樣。
如果沒有安裝這個工具的話，之後 build 完後就沒有 WeexDemo.xcworkspace 檔案，然後只能在開啟 Xcode 專案時不知所措地選擇 WeexDemo.xcodeproj 檔案。結果會是一大堆報錯，報各種 iOS 的相容性問題，連最低版本的 iOS8 都不支援，專案根本執行不起來。
好了，不多說，我們先來安裝一下：
# Xcode 8 + 9 sudo gem install cocoapods複製程式碼
二、新增 iOS platform
weex platform add ios複製程式碼三、打包
weex build ios
# 用另一臺電腦試的時候，在 pod install 時由於網路問題報了 fatal: unable to access 'https://github.com/CocoaPods/Specs.git/':SSLRead() return error -9806 的錯誤，然後就沒有正常生成 WeexDemo.xcworkspace 檔案。
# 這個時候需要重新再來幾次，直到成功安裝上依賴。
# 成功安裝依賴後，到提問 ? enter your AppId: 時，ctrl + c 停止。複製程式碼四、用 Xcode 開啟專案，選中 WeexDemo.xcworkspace 檔案。
如果沒有這個檔案，請確認一下是否安裝了 cocoapods，並且 weex build ios 過程沒有報錯。
專案開啟後是這樣的：
五、選擇合適的模擬機型，點選執行。
要確保選擇的機型，你有對應的 simulator iOS 系統。
如果沒有什麼報錯，只是 warning 的話，會出現下面的圖示：
然後這時候 Xcode 會去連線模擬器，然後開啟 Weex Playground 執行專案頁面。
至此用 iOS 模擬器執行 Weex 開發的原生應用大功告成，接下來是 Android 版。
Android 版
和 iOS 版相比，使用 Android 模擬器來執行應用，除了安裝一些軟體和工具外，還需要在終端的配置檔案裡面新增一些變數路徑。
一、安裝一些軟體和工具
Android Studio && Android SDK
我現在使用的版本是 v2.3.3。
安裝完成後，新建一個 Android 專案。在 Minimum SDK 中選擇的是：API 22：Android 5.1（Lollipop）。
建立成功後進入專案介面，這時 Android Studio 會下載一些專案需要的檔案。
下載 Android SDK。開啟 Preferences（快捷鍵 command + ,），開啟 Appearance & Behavior > System Settings > Android SDK 欄，選擇 SDK Tools 項，需要勾選右下方的 Show Package Details，然後選中 Android SDK Build-Tools 目錄下的 23.0.2 版本，點選 OK 下載。
網上資料說，由於 Android Studio 不會配置環境變數，所以我們需要進行一些配置才能使用 weex 的相關命令。
這裡主要是需要在終端的配置檔案裡面新增一些變數路徑。我現在用是 iTerm2，裝了 ohmyzsh，所以我改的是 .zshrc 檔案的配置：
vim ~/.zshrc # 新增下面的兩行內容 export ANDROID_HOME=/Users/caiyongmin/Library/Android/sdk # 這個路徑是上面圖片中 Android SDK Location 的路徑 export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:$ANDROID_HOME/build-tools # 然後儲存修改，執行 source ~/.zshrc複製程式碼如果你使用的是系統自帶的終端，那就要修改 ~/.bash_profile 檔案的內容了。
Android Virtual Device
這裡同樣要安裝執行安卓系統的手機模擬器。在選單中選擇 Tools > Android > AVD Manager。
顯示開啟下面的介面，點選 Create Virtual Device 來建立一個手機模擬器。可以看到我已經下載了一個手機模擬器和安卓系統。
然後點選後面的 Actions 欄的三角按鈕，啟動我們的手機模擬器。到時候
weex run android的時候，專案的頁面會顯示在這個手機模擬器中。JDK
安裝完 Android Studio 和手機模擬之後，需要安裝 JDK。我安裝的版本是 JDK SE8。開始安裝的時候，我安裝de的是 JDK SE9 版本，但是這樣導致我 run android 專案的時候報方法相容錯誤，執行不起來，然後我就把版本降到了 JDK SE8，之後就正常執行了。
如果需要刪除之前安裝的 JDK，請看這篇文章。
好了，完成上面的安裝之後，就可以進行接下來的執行了。
二、新增 Android platform
weex platform add android複製程式碼三、執行
weex run android # 這裡不 build 了，直接 run，這也是和 iOS 模擬版本不一樣的地方。複製程式碼執行成功，專案頁面會顯示在剛剛啟動的手機模擬器上，看下面的畫面：
這樣 Android 版的也完成了。
The End！