一、A New Start
在上一個系列文章中我們說到大前端一定是可以預見到的未來的趨勢之一，那麼從本篇文章中我將開啟一個新的系列，從入門到深入，一步步走近大前端的核心腹地。計劃本系列文章包含以下內容：
- Weex入門準備，包含學習資料、學習途徑等；
- Weex專案實踐，使用Weex開發一個原生的介面；
- Weex原始碼分析系列；
- Weex的本地接入封裝；
- 針對Weex不夠高的地方進行原始碼修改。
二、Why is Weex？
這個章節本來是想忽略的，因為說Weex那肯定繞不開ReactNative，而這個章節也極易引起口水；但是不寫總覺得技術選型沒有做到位。因此我就簡單說幾句：技術選型與團隊規模、團隊成員技術偏好、技術穩定性、易用性等方面息息相關，沒有最正確的選型，只有最合適的選型。引入一項新技術的初衷是為了解放生產力、跟進新技術，而不是為了趟坑自虐。錯誤的技術選型（例如一個小團隊卻選擇了一個需要持續維護的技術方向）不僅不會提升生產力，反而會降低生產力、傷害團隊成員的技術熱情。
三、What is Weex？
Weex 是一套簡單易用的跨平臺開發方案，能以 web 的開發體驗構建高效能、可擴充套件的 native 應用，為了做到這些，Weex 與 Vue 合作，使用 Vue 作為上層框架，並遵循 W3C 標準實現了統一的 JSEngine 和 DOM API，這樣一來，你甚至可以使用其他框架驅動 Weex，打造三端一致的 native 應用。
從Weex官網介紹我們可以看出幾個關鍵詞：跨平臺、高效能、Vue、W3C標準、三端一致；以上關鍵詞我們會在逐漸的深入瞭解過程中逐步體會到。
放一張Weex整體架構圖：可以參考下面備註。
Weex 表面上是一個客戶端技術，但實際上它串聯起了從本地開發環境到雲端部署和分發的整個鏈路。開發者首先可以在本地像撰寫 web 頁面一樣撰寫一個 app 的頁面（Weex File），然後編譯成一段 JavaScript 程式碼（transformer），形成 Weex 的一個 JS bundle；在雲端，開發者可以把生成的 JS bundle 部署上去（deploy），然後通過網路請求或預下發的方式傳遞到使用者的移動應用客戶端（Server————>JS FrameWork）；在移動應用客戶端裡，WeexSDK 會準備好一個 JavaScript 引擎（JSCore、V8），並且在使用者開啟一個 Weex 頁面時執行相應的 JS bundle，並在執行過程中產生各種命令傳送到 native 端進行的介面渲染或資料儲存、網路通訊、呼叫裝置功能、使用者互動響應等移動應用的場景實踐（callJs、callNative）；同時，如果使用者沒有安裝移動應用，他仍然可以在瀏覽器裡開啟一個相同的 web 頁面，這個頁面是使用相同的頁面原始碼，通過瀏覽器裡的 JavaScript 引擎執行起來的。
看起來是不是還有點抽象，那好人話來了！見下圖，忽略掉Weex FrameWork與Native的互動，可以參考理解為我們釋出新版本Apk的過程。
四、Quick Start
體驗Weex的Demo可以參考快速上手；
- 在dotWe編寫或者貼上Demo中的程式碼實時預覽；
- 下載Weex專門的一個 Playground App掃描網頁右邊的二維碼。
五、DevTools
Weex開發環境的搭建並不複雜，可以參考搭建開發環境章節。此處主要推薦下Weex的開發使用工具：
Sublime
- 安裝、破解可以參考《mac sublime3 破解版的安裝、外掛管理和配置》；
- 安裝的一些外掛：Emmet、HTML-CSS-JS Prettify、Vue Syntax Highlight、VueJs Snippets等。
WebStrom
- 安裝、破解可以參考《Webstorm 2017 MAC版本----------下載及破解碼》；
- 對Vue進行設定，參考《關於webstorm 對 vue的設定》；
- 新增weex的外掛，在plugin中搜尋weex，並且設定對vue的支援。
這樣就可以愉快的開發了。
六、Preparation
對Weex的學習鋪墊就到了這裡；環境、開發工具完成之後，對照官方文件，練習Demo即可。當然前提是對前端、Vue的瞭解，如果沒有相關姿勢的同學豈不是沒法破了？不瞭解還真沒法破！學習實踐Weex不需要你成為前端專家，但是語法、相關的一些知識還是必不可少的。
- 推薦看一些HTML+CSS的基礎課程，比較推薦慕課網（真不是廣告）；
- Vue也是比較好入門的，只要理解了雙向繫結，參考文章《Vue.js——60分鐘快速入門》；
歡迎關注微信公眾號：定期分享Java、Android乾貨！
