給初學者的weex教程(一)
前言
隨著阿里開源的構建高效能、可擴充套件的原生應用跨平臺開發方案--weex的釋出，相信很多人都湧向了這股浪潮中，我也是從RN中抽了一腿出來踏進了這個“坑”中。隨著阿里勤奮的開發人員和我們不斷踏坑的開發者的填坑，現在weex已經來到V.13.0版本了，相對於剛開始的時候來說是比較完善的了，但是還需要這個不斷填坑的過程去完善。weex已經發布了一年多了，但目前的資料還比較少，我也是自己不斷摸索著過來的，所以寫下這個教程， 幫助那些沒有用過weex的朋友入門，一起探討下weex是否值得接入到專案中去。
注：如果你覺得寫得不好或者錯誤的地方，請直接批評指出。
首先，我先回答weex和RN有什麼區別嗎？有必要兩個都去學嗎？
這裡我也不詳細去談這個問題了，就貼一個說得比較好的出來供大家參考：weex&ReactNative對比
剛剛說到學習weex的途徑相對來說還是比較少的，第一個就是官網，直接度娘weex就可以找到，第二個就是github上weex的原始碼。
正文
這裡貼一個官網的一個原理圖
引用官網的話：Weex 表面上是一個客戶端技術，但實際上它串聯起了從本地開發環境到雲端部署和分發的整個鏈路。開發者首先可以在本地像撰寫 web 頁面一樣撰寫一個 app 的頁面，然後編譯成一段 JavaScript 程式碼，形成 Weex 的一個 JS bundle；在雲端，開發者可以把生成的 JS bundle 部署上去，然後通過網路請求或預下發的方式傳遞到使用者的移動應用客戶端；在移動應用客戶端裡，WeexSDK 會準備好一個 JavaScript 引擎，並且在使用者開啟一個 Weex 頁面時執行相應的 JS bundle，並在執行過程中產生各種命令傳送到 native 端進行的介面渲染或資料儲存、網路通訊、呼叫裝置功能、使用者互動響應等移動應用的場景實踐；同時，如果使用者沒有安裝移動應用，他仍然可以在瀏覽器裡開啟一個相同的 web 頁面，這個頁面是使用相同的頁面原始碼，通過瀏覽器裡的 JavaScript 引擎執行起來的。
按我的理解是這樣的，你寫好的weex程式碼，編譯成JS檔案，然後放在本地或者遠端伺服器上，客戶端去訪問，成功後客戶端進行渲染，這個渲染是怎麼個渲染呢？比如說吧，weex上的一個控制元件<text>，其實就是渲染成原生控制元件TextView了，其他的也是類似的，所以效果是跟原生一樣的。
如果你對weex產生了興趣，那接下來就要開始搭建開發環境了。
開發weex需要node.js、weex-toolkit，所以各位就自行去下載吧，官網也有非常詳細的介紹了。這裡我推薦一個weex的開發工具WebStorm(WS)，個人感覺這個IDE非常友好，而且跟AS是出自一家公司，所以對於Android的開發者來說再適合不過了。
第二步，開始你的weex之路，初始化一個weex專案，使用命令進行建立專案
weex init demo-project
結束之後你就可以看到目錄下有對應的demo-project了，那麼，我們就進行愉快的開發吧。
weex，使用 Vue 作為上層框架，並遵循 W3C 標準實現了統一的 JSEngine 和 DOM API。
Vue，Vue.js 是 Evan You 開發的漸進式 JavaScript 框架。開發者能夠通過撰寫 *.vue 檔案，基於 <template>, <style>, <script> 快速構建元件化的 web 應用。
熟悉的Hello World
<template>
<div>
<text class="text">{{text}}</text>
</div>
</template>
<style>
.text {
font-size: 25px;
}
</style>
<script>
module.exports={
data:{
text: 'Hello World.'
}
}
</script>編譯後，在瀏覽器訪問，你就可以看到我們熟悉的hello world了。
是不是看起來有點像HTML的格式，但是又不像呢？其實這個就是Vue的基於 <template>, <style>, <script>構建的一個Web頁面。
weex支援一些內建元件，比如上面的text、a、div、web、image、list、input等等，當你要用到時候不會用可以到官網上一查究竟，如果weex提供的元件還不能滿足你開發的需求的話，我們也是可以自定義元件在weex上使用，這個到後面我們再詳細講解。
還有比較重要的一點就是，不是所有的html5和css3的樣式在weex中都可以使用的，比如
border: 1 solid #ff0000;
這樣的組合寫法在weex上就不支援了，很多這樣的組合寫法也將不支援的。
然後weex預設的樣式是flex，不用主動去宣告display:flex，因為weex預設就是flex樣式進行開發的。
那麼我們就詳細講解下flex這個佈局模型。
flex-direction：定義了 flex 容器中 flex 成員項的排列方向。可選值為 row（從上到下排列） | column（從左到右排列），預設值為 column。
justify-content：定義了 flex 容器中 flex 成員項在主軸方向上如何排列以處理空白部分。可選值為 flex-start | flex-end | center | space-between，預設值為 flex-start。
flex-start：是預設值，所有的 flex 成員項都排列在容器的前部；
flex-end：則意味著成員項排列在容器的後部；
center：即中間對齊，成員項排列在容器中間、兩邊留白；
space-between：表示兩端對齊，空白均勻地填充到 flex 成員項之間。align-items：定義了 flex 容器中 flex 成員項在縱軸方向上如何排列以處理空白部分。可選值為 stretch | flex-start | center | flex-end，預設值為 stretch。
stretch 是預設值，即拉伸高度至 flex 容器的大小；
flex-start 則是上對齊，所有的成員項排列在容器頂部；
flex-end 是下對齊，所有的成員項排列在容器底部；
center 是中間對齊，所有成員項都垂直地居中顯示。Flex 成員項：flex 屬性定義了 flex 成員項可以佔用容器中剩餘空間的大小。如果所有的成員項設定相同的值 flex: 1，它們將平均分配剩餘空間. 如果一個成員項設定的值為 flex: 2，其它的成員項設定的值為 flex: 1，那麼這個成員項所佔用的剩餘空間是其它成員項的2倍。
flex {number}：值為 number 型別。
下來可以試一下各個屬性，看下佈局會如何變化的。
好了本次的教程到此結束，我會繼續抽時間將剩下的教程在最短的時間內寫完的。