Weex開發系列（一）：初識Weex

本系列文章將記錄 Weex 的 學習、開發之路、各類文檔乾貨。鑑於當前 Weex 的普及性不高、文檔不全，但願該系列文章能幫助到想要學習或者正在使用 Weex 的童鞋快速入門。

0 系列文章

系列整理 Weex開發系列之文檔整理
系列一 初識Weex

1 Weex是什麼

Weex官網的解釋是 Weex 是一個動態化的高擴展跨平臺解決方案。就個人理解就是爲了達到寫一份代碼能夠同時在移動端（Android端、iOS端），Web端 同時運行的目的而開發的一系列系統或者提出瞭解決方案。這個系統方案包含各類native sdk、weex項目、構建工具、調試工具、文檔等等。

相似的解決方案還有React Native。

weex

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）等這些關鍵詞都要有所瞭解。有個印象，等後面真正用到了回頭細看。

1. MDN JavasScript文檔
2. ECMAScript 6 入門

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的入門學習。

1. 進入vue官網，學習瞭解vue的概念，是個什麼東西、作什麼用的？而後配合搜索引擎，瞭解vue的基本發展，概念，使用場景概念等。
2. 使用 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複製代碼

3. 經過腳手架建立好項目，首先我想了解webpack模板建立出來的項目結構是怎樣的、入口在哪、配置文件在哪、我該在哪寫業務代碼、怎麼運行等等。因而Google搜索關鍵字 vue cli webpack結構 ，有不少很好的解釋，好比滴滴前端團隊的 vue-cli#2.0 webpack 配置分析、Vue.js——60分鐘webpack項目模板快速入門 等等文章，能夠很好的讓你對這個項目結構有個初步認識。（注意不少文章內部又有其餘教程的指向連接，請不要忽略，由於不少博主本着不重複造輪子的宗旨，會直接貼上已有文章連接）
4. webpack模板項目中使用了 vue-router ，即 ’路由‘，說到 vue-router 就得說道單頁面應用（即SPA）。在vue項目中，如今更加流行單頁面應用，並搭配路由使用。這裏附上 vue-router 的文檔。要有個基本瞭解。
   • [vue-router 中文文檔]（router.vuejs.org/zh-cn/）
5. 這些基礎知識瞭解後，開始對照vue文檔一個個敲例子，使用dev模式觀察結果。敲例子過程當中還會涉及到不少其餘知識的回顧，好比css、html、ES6 等。要結合上面的文檔交互補充知識。

千萬別想着等vue學完我再去學weex，全部的知識都是先了解、使用過程當中深刻的過程。任何沒有應用的學習都是耍流氓。
vue 中還有不少東西要去學習，若是有機會我後面都會專門對一些vue知識進行深刻學習分析

2.5 Weex學習

終於來到了Weex的學習瞭解，對一個前端沒啥基礎的我來講真的不容易，又想快點直接學Weex可是前面基礎知識的步驟又跳不過去，實在糾結。

照例，先看 Weex官方文檔。而且配合官方 Github 上的 Playground 代碼在本地運行起來。（我是運行的android端）如下是個人學習順序

1. 官方文檔瀏覽一遍（Weex的官方文檔很少，徹底能夠全局瀏覽一遍）
2. 到Github上，把官方的 Playground 代碼下下來。在本地部署好Weex代碼和Android代碼，並跑起來。
3. 把調試工具 DevTools 也運行起來，學習該怎麼web端調試App端的js代碼。
4. 因爲官方 Playground 中的 weex 代碼仍是使用 .we 文件進行編譯運行，因此我使用官方推薦的腳手架 weex-toolkit 從新生成了一個項目。生成的項目是使用 vue 文件寫的，也符合當前 weex 的推薦作法。
5. 本身的Sample項目跑起來後，使用官方的 Playground 項目掃碼能夠運行。而後我單首創建了一個Android項目，把Playground中核心代碼轉移過來，造成本身的一個項目結構。
6. 最後基於本身整理出的Android項目框架和 weex-toolkit 生成的 weex-sample 項目把 weex文檔-手冊 中的全部內建組件和內建模塊的例子代碼敲一遍（也能夠直接貼上去看效果）瞭解官方的組件有哪些功能。這時候寫一個使用手機號驗證碼登陸的頁面應該沒問題。服務端就本身搭建一個模擬下請求便可。

至此，能夠說對Weex有了一個入門瞭解，而且能夠寫sample頁面，能夠對寫的代碼進行調試、運行等。

3 結尾

整個前端的知識不只廣並且深，上面內容中的每一點拿出來均可以說好多好多。上面只是我我的的一個Weex入門學習路徑，旨在幫助一些徹底沒有前端基礎的人有個學習目標和大體路線。我本身自己也是在剛入門的路上。後面深刻過程會仔細的把一些小點專門拿出來進行深刻學習。

感受不光學習前端，不少知識的學習都是要依賴於真正的應用。沒有應用開發的驅動，空無目的的學習知識效率很低並且沒有目的性。

最後個人 Weex開發系列之文檔整理 正在進行中，但願你們在評論中提供好的前端乾貨資源。

更多文章關注個人公衆號

個人公衆號