本系列文章將記錄 Weex 的 學習、開發之路、各種文件乾貨。鑑於當前 Weex 的普及性不高、文件不全，希望該系列文章能幫助到想要學習或者正在使用 Weex 的童鞋快速入門。
0 系列文章
系列整理 Weex開發系列之文件整理
系列一 初識Weex
1 Weex是什麼
Weex官網的解釋是 Weex 是一個動態化的高擴充套件跨平臺解決方案。就我的理解就是為了達到寫一份程式碼可以同時在移動端（Android端、iOS端），Web端 同時執行的目的而開發的一系列系統或者提出瞭解決方案。這個系統方案包含各種native sdk、weex專案、構建工具、除錯工具、文件等等。
類似的解決方案還有React Native。
2 Weex學習基礎
作為一個Android開發，一開始接觸Weex我是拒絕的。只會一些js和html基礎，對我來說是一個很陌生的領域，可以說從零開始。在這我將自己的Weex入門做一個簡單介紹。
2.1 前端基礎認知
首先要有 Html、Css和Js的簡單基礎。這個基礎可以僅知道各自概念、基本語法、基礎頁面繪製怎麼寫就夠了。相信一個能較熟練掌握某一門語言的程式設計師對前端概念應該在大學裡都有基礎。
2.2 深入學習ES6
ES6是JavaScript的一個標準，也是當前vue2.0使用的標準，當前主流瀏覽器基本支援。
建議看一遍MDN的JavaScript基礎文件和阮一峰的ES6電子書，這個階段建議大概瀏覽和查詢其中一些陌生的專業名詞和知識，對Lambda、模組化（import export）等這些關鍵詞都要有所瞭解。有個印象，等後面真正用到了回頭細看。
2.3 Node.js 和 npm
在學習vue之前，需要先了解node.js 和 npm 的概念。已經對此瞭解的同學可以直接略過。
Node.js是一個開放原始碼、跨平臺的、可用於伺服器端和網路應用的執行環境。 - From 維基百科
這方面沒有太多研究，大概知道這是一個伺服器端，類似nginx、apache之類的。（如果解釋有誤歡迎指出）Node.js使用Google V8 JavaScript 引擎。（聽說前端? x 的人都開始研究V8了，我先mark下）
然後就是npm，這個見得比較多。就是一個依賴包管理系統。就像Android裡的Gradle一樣。說到npm就要提到 package.json 檔案，在vue專案、weex專案中都會有這樣一個檔案，是一個json配置陣列。具體的配置規則可以見 npm-package.json，也可以搜尋中文翻譯。
對於以上的知識，我暫時只做到了瞭解，如果後面有需要我會細緻深入的學習。但對於weex的學習目的來說，暫時只作為一個工具。
2.4 vue學習
vue是一套構建使用者介面的漸進式框架。已經是當前前端最流行的前端框架之一。Vue的框架和各種外掛的學習點非常多，我是按照下面的順序進行了vue的入門學習。
- 進入vue官網，學習瞭解vue的概念，是個什麼東西、做什麼用的？然後配合搜尋引擎，瞭解vue的基本發展，概念，使用場景概念等。
- 使用
vue-cli（又名腳手架）建立一個模板Vue專案,使用WebStorm進行程式碼編輯，並dev模式跑起來。方便一邊看文件，一邊手動寫程式碼。# 全域性安裝 vue-cli $ npm install --global vue-cli # 建立一個基於 webpack 模板的新專案 $ vue init webpack my-project # 安裝依賴，走你 $ cd my-project $ npm install $ npm run dev複製程式碼 - 通過腳手架建立好專案，首先我想了解webpack模板建立出來的專案結構是怎樣的、入口在哪、配置檔案在哪、我該在哪寫業務程式碼、怎麼執行等等。於是Google搜尋關鍵字
vue cli webpack結構，有很多很好的解釋，比如滴滴前端團隊的 vue-cli#2.0 webpack 配置分析、Vue.js——60分鐘webpack專案模板快速入門 等等文章，可以很好的讓你對這個專案結構有個初步認識。（注意很多文章內部又有其他教程的指向連結，請不要忽略，因為很多博主本著不重複造輪子的宗旨，會直接貼上已有文章連結） - webpack模板專案中使用了
vue-router，即 ’路由‘，說到vue-router就得說道單頁面應用（即SPA）。在vue專案中，現在更加流行單頁面應用，並搭配路由使用。這裡附上vue-router的文件。要有個基本瞭解。- [vue-router 中文文件]（router.vuejs.org/zh-cn/）
- 這些基礎知識瞭解後，開始對照vue文件一個個敲例子，使用dev模式觀察結果。敲例子過程中還會涉及到很多其他知識的回顧，比如css、html、ES6 等。要結合上面的文件互動補充知識。
千萬別想著等vue學完我再去學weex，所有的知識都是先了解、使用過程中深入的過程。任何沒有應用的學習都是耍流氓。
vue 中還有很多東西要去學習，如果有機會我後面都會專門對一些vue知識進行深入學習分析
2.5 Weex學習
終於來到了Weex的學習瞭解，對一個前端沒啥基礎的我來說真的不容易，又想快點直接學Weex但是前面基礎知識的步驟又跳不過去，實在糾結。
照例，先看 Weex官方文件。並且配合官方 Github 上的 Playground 程式碼在本地執行起來。（我是執行的android端）以下是我的學習順序
- 官方文件瀏覽一遍（Weex的官方文件不多，完全可以全域性瀏覽一遍）
- 到Github上，把官方的 Playground 程式碼下下來。在本地部署好Weex程式碼和Android程式碼，並跑起來。
- 把除錯工具
DevTools也執行起來，學習該怎麼web端除錯App端的js程式碼。 - 由於官方 Playground 中的 weex 程式碼還是使用
.we檔案進行編譯執行，所以我使用官方推薦的腳手架weex-toolkit重新生成了一個專案。生成的專案是使用 vue 檔案寫的，也符合當前 weex 的推薦做法。 - 自己的Sample專案跑起來後，使用官方的 Playground 專案掃碼可以執行。然後我單獨建立了一個Android專案，把Playground中核心程式碼轉移過來，形成自己的一個專案結構。
- 最後基於自己整理出的Android專案框架和
weex-toolkit生成的 weex-sample 專案把 weex文件-手冊 中的所有內建元件和內建模組的例子程式碼敲一遍（也可以直接貼上去看效果）瞭解官方的元件有哪些功能。這時候寫一個使用手機號驗證碼登入的頁面應該沒問題。服務端就自己搭建一個模擬下請求即可。
至此，可以說對Weex有了一個入門瞭解，並且可以寫sample頁面，可以對寫的程式碼進行除錯、執行等。
3 結尾
整個前端的知識不僅廣而且深，上面內容中的每一點拿出來都可以說好多好多。上面只是我個人的一個Weex入門學習路徑，旨在幫助一些完全沒有前端基礎的人有個學習目標和大致路線。我自己本身也是在剛入門的路上。後面深入過程會仔細的把一些小點專門拿出來進行深入學習。
感覺不光學習前端，很多知識的學習都是要依賴於真正的應用。沒有應用開發的驅動，空無目的的學習知識效率很低而且沒有目的性。
最後我的 Weex開發系列之文件整理 正在進行中，希望大家在評論中提供好的前端乾貨資源。
更多文章關注我的公眾號