前言：Hybird混合開發如今是前端開發的大趨勢，那麼好處就是跨平臺，那麼就能大大提升開發效率。但是肯定有不足之處，那就是沒有native開發的使用者體驗好，關於兩者的區別，這裡不做說明。

          weex是阿里巴巴公開開源的混合開發的SDK，既能提高開發效率，又能有native的效果。

一：如何將weexSDK整合到iOS專案中，本文重在說明，參照官方文件的每一個細節知識點進行詳細說明，以及一些不起眼的坑，

       先附加下weex的中文版官方文件 https://github.com/weexteam/article/issues ，對於官方文件中的說明，我也是無力吐槽了，（話不多說，如果官方文件寫的好，你也就不會搜部落格解決問題了，希望阿里能逐步完善吧）。

      樓主也一步步配置過，一路上坎坷不斷，關鍵是還沒人指引，本篇我就盡力寫到詳細吧。

二：為了您的更好理解weex，再次強調下，先看看 https://github.com/weexteam/article/issues連結下的  Weex快速上手教程(Weex Tutorial)這個文件。

   樓主在配置的時候，也是先上手的這裡，如果您不想了解，可直接看iOSweex整合入門中Hybird開發中整合weex到iOS工程（二），整合到IOS的工程中。。

三：Weex快速上手教程(Weex Tutorial)這個文件的詳細解釋,(我會給出詳細的提示，圖片提供參考)；

   3.1  我們先編寫一個列表項

請建立一個名為 tech_list.we 的檔案(.we 是Weex推薦的字尾名 ) ，請複製貼上以上程式碼於其中

說明：.we檔案是什麼，怎麼建立，是不是矇蔽了（樓主當時就憤怒了，為何不詳細），下面樓主講一步步說明

       3.1.1 ： 首先建立一個資料夾，tech_list.we資料夾，資料夾（重要的事情說三遍，資料夾），資料夾目錄下在建立一個tech_list.we的檔案，這個不是資料夾。

       3.2.2 ： .we的檔案怎麼建立，對不起找不到資料怎麼建立，但是可以弄出來，（gitHub下載weex的包），在ios/playground裡面，會有很多.we的檔案，複製一個出來，重新命名

<template>

  <divclass="container" >

    <divclass="cell">

       <imageclass="thumb"src="http://t.cn/RGE3AJt"></image>  

       <textclass="title">JavaScript</text>

    </div>

  </div>

</template>

<style>

.cell{margin-top:10 ;margin-left:10 ;flex-direction: row; }

.thumb {width:200;height:200; }

.title {text-align:center ;flex:1;color:grey;font-size:50; }  

</style>

     就是弄成這樣就行了

  3.2   下載 Node.js ，

    3.2.1:開啟終端，什麼都不用寫 ，直接複製，

      brew install node

     默默等待5分鐘左右，由於樓主已經裝過了，沒有圖了，回頭換了電腦不上，終端會出現一個長方形在轉圈，然後一個大的長方形，反正耐心等待就行了。

 3.3  在Node.js安裝成功後,你可以執行下面的命令來安裝Weex命令列程式Weex Toolkit ，直接複製

         npm install -g weex-toolkit

出現這種情況就是已經裝好了，

確保weex版本號大於0.1.0，終端輸入（）

    $weex--version

    info0.3.4

到這裡，環境也已經配置好了

 3.4  執行.we檔案 ，開啟終端，切換到tech_list.we資料夾下，（這就是一開始強調的為什麼是資料夾）

     cd  將tech_list.we資料夾，拖進來

   weex tech_list.we

   然後就會出現介面了，後來的配置基本沒問題，https://github.com/weexteam/article/issues/4，參照這個文件接著往後弄吧，基本不會出問題。

 3.5 最後出現的二維碼：

這個二維碼需要配合 Weex Playground App工作。下載安裝後點擊App中的掃碼圖示，然後用你的手機攝像頭掃描終端中的二維碼。一個漂亮的列表將出現在你的手機中。

 拿起你的蘋果手機，APPStore中下載weex playground  開啟App，左上角的掃碼，OK了。

  最後說兩句：相信大家也是一樣，在接觸新的東西操作的時候，都希望有一些過程能附加上階段性的執行效果，因為哪一步錯了，都很難找到結果。。不說了，說實話，我看官方文件已經看哭了，相信還有一些看英文文件的更是直接跪了，希望可以幫到你，致於配置這個有什麼用，我是不清楚。文件中說這是，Weex快速上手教程，那麼就說明你已經快速上手了。。

   看這篇文章時，請開啟我給的連結對比著看，只是對官方文件進行了說明，如有不對的地方請指正，，後來的兩篇文章會寫如何整合weex到工程中，以及github中下載的weexdemo怎麼執行。。樓主其他部落格中有聯絡方式，如今還沒解決問題，歡迎前來交流。

  請看iOSweex整合入門，weex整合到iOS工程注意事項（二） 

         iOSweex整合入門，weex demo如何執行，以及如何修改（三）http://blog.csdn.net/horisea/article/details/52084155

如果你喜歡這篇文章，或者有任何疑問，可以掃描第一個二維碼，加樓主好友哦

也可以掃第二個二維碼，關注樓主個人微信公眾號。這裡有很多生活，職業，技術相關的文章哦。歡迎您的到來。

微訊號：                                             公眾號