weex最近也比較火，公司也開始使用了該框架，於是就開始玩下，入手部分不會太難，但是除錯倒是折騰了不少時間。折騰完了，也寫了一兩個小頁面，那接下來就要拆下weex這個輪子啦~ 方便後面使用的時候，有什麼坑，希望可以跳的快一些。
先丟擲一個問題
如果我們要在Android裡，不用webview，通過線上的方式，動態的在一個FrameLayout裡，新增各種子View，進行展示，並且還可以給各個子View新增各種監聽事件。大家要怎麼實現這樣的功能呢？
我們可以這麼實現：
- 在Android端，先在佈局裡新增一個自定義的FrameLayout。
- 獲取該動態FrameLayout的線上配置資訊，根據這些配置資訊，動態生成各種子View，新增到這個FrameLayout上。
- 為了能夠響應各種監聽事件，那還需要在這個配置資訊裡，新增上一些事件監聽和監聽後的操作，例如，onClick事件，點選之後的操作。
- 配置資訊裡，新增上一些子View的佈局寬高之類的。 。。。
那這裡有些難點了，配置資訊該怎麼寫呢？ 恩，我們可以使用Android 佈局xml的方式，快速的寫出這些view的佈局，然後將xml佈局下發給客戶端，客戶端使用xml解析器將這個xml檔案進行解析，生成對應的子view，設定好各子view的佈局。 為了能夠讓子View新增各種監聽事件，並做響應的操作，我們需要擴充套件我們 xml檔案，定製各種語法，新增事件的監聽和處理方法。
說到這裡，如果你做過前端的話，那肯定會發現，這不就使用前端開發就好了嗎？正好裡面就有佈局的排列，樣式的定義，各種事件的監聽和方法的定義。
下面先來一份使用vue寫的H5頁面。
如果使用前端語言來編寫配置資訊，那也挺不錯的，至少配置資訊的編寫，比較通用，開放給其他人使用，學習門檻也比較低。最重要的是，比自己重新定義一套語法，輕鬆多了。weex的思想其實和這個是類似的，也就是將用vue來寫配置檔案，在android 層，將這些配置資訊進行解析，然後動態的生成各種子View，新增到我們剛剛說的FrameLayout上。好，記住這個思路，那我們接下來就需要看看，weex是怎麼實現這種方案的。
整體框架
為了不讓大家一開始就只看樹葉，不見森林，我們先來看看weex官網工作原理的這張整體框架圖。
看不懂，沒有關係，這裡說的，其實也不太複雜。下面來一一介紹下：
Vue File，就是我們上面說的配置資訊，可以新增各種子View，樣式，事件響應方法等。
Vue File transformer 為 JS Bundle，JS Bundle 就是vue編譯生成的結果檔案，一般命名是xxx.js，在weex工程的編譯結果目錄$weex-project-dir/dist下，這裡做下為什麼要轉為js檔案，而不直接用vue檔案呢？（可能是為了做檔案壓縮，還會把引用的其他vue檔案的內容給整合到一個js檔案裡，這樣Android端，就可以只載入一個最終的js檔案就可以了。）
server，這裡是指通過網路將js檔案傳送到Android端，當然這個js檔案，直接放在本地也行，讓weex SDK去載入本地的js檔案。
JavaScript Runtime，這裡是在解析上面的js檔案。因為vue是前端開發js框架語言，比較通用，於是weex團隊，也將其做的通用一些，可以讓vue專案，執行在H5，Android，IOS上。這樣的好處不言而喻了。 除了解析佈局，還可以用來執行在vue上定義的一些方法，不然，一些監聽事件的回撥，以及一些方法，都不知道要在哪裡執行才比較好了。這裡的JavaScript Runtime，在Android端其實就是 UC 提供的 v8 核心。
IOS，Android，H5 的 RenderEngine，自然就是將上面解析的js內容，轉成我們具體的子View樹，加到我們上面說的自定義FrameLayout上了，進行渲染，和設定各種監聽事件和方法了。為什麼JavaScript Runtime和RenderEngine在這裡是雙向通行的？是因為佈局的顯示是在各終端上渲染，但是一些方法的執行，還是在JavaScript Runtime上去執行，這就涉及到很多雙方通訊的情況，所以是雙向的。
總結：
為了能夠動態的將各種子view加在本地自定義FrameLayout中，需要Android端去解析用vue編寫的配置檔案，並生成對應的子View進行渲染。由於vue中有一些函式方法需要執行，可以在JavaScript Runtime裡執行。
後續：
看來在一篇文章裡，寫完全部的weex 原始碼解析，有點難度，那還是分開幾篇來寫好了，第一次在掘金上寫文件，以上是個人的理解，寫得有誤的地方，還請指出，以便更正，後續會繼續寫完剩下的解析。