本期六篇文章目錄(可點選跳轉)

1. 前言

通過前面四篇文章的介紹，相信大家對weex基本熟悉了，下面就開始動手做專案，一些細節問題，在專案實戰中繼續消化。

2.開發工具和環境

俗話說，工欲善其事必先利器，我選的IDE開發工具為webstorm，webstorm相信做前端的同學非常熟悉。我本身就是做android原生開發的，android studio非常熟悉，而這兩款IDE操作介面接近相同，上手無障礙。

安裝過程如下：
1）下載webstorm
我用的版本如下所示：大家自行去百度下載，實在找不到的，私聊我，我郵件發你們。

2）安裝完webstorm後，開啟webstorm後，在webstorm中下載weex外掛，從而讓webstorm支援weex的語法，並且可以實時編譯。
如圖所示：
一.點選File->Settings

二.在Settings列表中找到Plugins

三.在輸入框中輸入weex，會出現如下的兩個外掛，點選install，及開始安裝。

安裝完成，重啟IDE後，則可以新建.we檔案，如下所示：

新建test.we檔案後，點選確定，則自動生成weex的模板，如下所示：

到這裡開發工具已經安裝完畢，可以進入weex的神祕探索之旅了。

mac環境下，在.we檔案下畫介面的時候，右側會動態呈現所畫介面，跟android studio一樣。不過很遺憾，window下不能，我用的就是window，不過屌絲總會有辦法活下去。在windos環境下，隨便寫個.we檔案，用weex test.we –qr生成二維碼，再用playground去掃生成的二維碼，因為playgrund實現了websocket長連線，所以你介面佈局會實時更新在playground中，也相當於可以實時觀察自己的佈局了，後面的專案中會用到，這裡就不細說了，只要大概知道就好。

如有錯誤歡迎指出來，一起學習。

交流討論群
群號：469890293