本系列文章將記錄 Weex 的 學(xué)習(xí)膛薛、開(kāi)發(fā)之路听隐、各種文檔干貨。鑒于當(dāng)前 Weex 的普及性不高相叁、文檔不全遵绰，希望該系列文章能幫助到想要學(xué)習(xí)或者正在使用 Weex 的童鞋快速入門(mén)辽幌。
0 系列文章
系列整理 Weex開(kāi)發(fā)系列之文檔整理
系列一 初識(shí)Weex
1 Weex是什么
Weex官網(wǎng)的解釋是 Weex 是一個(gè)動(dòng)態(tài)化的高擴(kuò)展跨平臺(tái)解決方案。就我的理解就是為了達(dá)到寫(xiě)一份代碼可以同時(shí)在移動(dòng)端（Android端椿访、iOS端）乌企，Web端 同時(shí)運(yùn)行的目的而開(kāi)發(fā)的一系列系統(tǒng)或者提出了解決方案。這個(gè)系統(tǒng)方案包含各種native sdk成玫、weex項(xiàng)目加酵、構(gòu)建工具、調(diào)試工具哭当、文檔等等猪腕。
類(lèi)似的解決方案還有React Native。
2 Weex學(xué)習(xí)基礎(chǔ)
作為一個(gè)Android開(kāi)發(fā)钦勘，一開(kāi)始接觸Weex我是拒絕的陋葡。只會(huì)一些js和html基礎(chǔ)，對(duì)我來(lái)說(shuō)是一個(gè)很陌生的領(lǐng)域彻采，可以說(shuō)從零開(kāi)始腐缤。在這我將自己的Weex入門(mén)做一個(gè)簡(jiǎn)單介紹。
2.1 前端基礎(chǔ)認(rèn)知
首先要有 Html肛响、Css和Js的簡(jiǎn)單基礎(chǔ)岭粤。這個(gè)基礎(chǔ)可以?xún)H知道各自概念、基本語(yǔ)法特笋、基礎(chǔ)頁(yè)面繪制怎么寫(xiě)就夠了剃浇。相信一個(gè)能較熟練掌握某一門(mén)語(yǔ)言的程序員對(duì)前端概念應(yīng)該在大學(xué)里都有基礎(chǔ)。
2.2 深入學(xué)習(xí)ES6
ES6是JavaScript的一個(gè)標(biāo)準(zhǔn)猎物，也是當(dāng)前vue2.0使用的標(biāo)準(zhǔn)虎囚，當(dāng)前主流瀏覽器基本支持。
建議看一遍MDN的JavaScript基礎(chǔ)文檔和阮一峰的ES6電子書(shū)霸奕，這個(gè)階段建議大概瀏覽和查詢(xún)其中一些陌生的專(zhuān)業(yè)名詞和知識(shí)溜宽，對(duì)Lambda、模塊化（import export）等這些關(guān)鍵詞都要有所了解质帅。有個(gè)印象适揉，等后面真正用到了回頭細(xì)看。
2.3 Node.js 和 npm
在學(xué)習(xí)vue之前煤惩，需要先了解node.js 和 npm 的概念嫉嘀。已經(jīng)對(duì)此了解的同學(xué)可以直接略過(guò)。
Node.js是一個(gè)開(kāi)放源代碼魄揉、跨平臺(tái)的剪侮、可用于服務(wù)器端和網(wǎng)絡(luò)應(yīng)用的運(yùn)行環(huán)境。 - From 維基百科
這方面沒(méi)有太多研究，大概知道這是一個(gè)服務(wù)器端瓣俯，類(lèi)似nginx杰标、apache之類(lèi)的。（如果解釋有誤歡迎指出）Node.js使用Google V8 JavaScript 引擎彩匕。（聽(tīng)說(shuō)前端?? x 的人都開(kāi)始研究V8了腔剂，我先mark下）
然后就是npm，這個(gè)見(jiàn)得比較多驼仪。就是一個(gè)依賴(lài)包管理系統(tǒng)掸犬。就像Android里的Gradle一樣。說(shuō)到npm就要提到 package.json 文件绪爸，在vue項(xiàng)目湾碎、weex項(xiàng)目中都會(huì)有這樣一個(gè)文件，是一個(gè)json配置數(shù)組奠货。具體的配置規(guī)則可以見(jiàn) npm-package.json介褥，也可以搜索中文翻譯。
對(duì)于以上的知識(shí)递惋，我暫時(shí)只做到了了解呻顽，如果后面有需要我會(huì)細(xì)致深入的學(xué)習(xí)。但對(duì)于weex的學(xué)習(xí)目的來(lái)說(shuō)丹墨，暫時(shí)只作為一個(gè)工具。
2.4 vue學(xué)習(xí)
vue是一套構(gòu)建用戶(hù)界面的漸進(jìn)式框架嬉愧。已經(jīng)是當(dāng)前前端最流行的前端框架之一贩挣。Vue的框架和各種插件的學(xué)習(xí)點(diǎn)非常多，我是按照下面的順序進(jìn)行了vue的入門(mén)學(xué)習(xí)没酣。
- 進(jìn)入vue官網(wǎng)王财，學(xué)習(xí)了解vue的概念，是個(gè)什么東西裕便、做什么用的绒净？然后配合搜索引擎，了解vue的基本發(fā)展偿衰，概念挂疆，使用場(chǎng)景概念等。
- 使用
vue-cli（又名腳手架）創(chuàng)建一個(gè)模板Vue項(xiàng)目,使用WebStorm進(jìn)行代碼編輯下翎，并dev模式跑起來(lái)缤言。方便一邊看文檔，一邊手動(dòng)寫(xiě)代碼视事。
# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目
$ vue init webpack my-project
# 安裝依賴(lài)胆萧，走你
$ cd my-project
$ npm install
$ npm run dev
- 通過(guò)腳手架創(chuàng)建好項(xiàng)目，首先我想了解webpack模板創(chuàng)建出來(lái)的項(xiàng)目結(jié)構(gòu)是怎樣的俐东、入口在哪跌穗、配置文件在哪订晌、我該在哪寫(xiě)業(yè)務(wù)代碼、怎么運(yùn)行等等蚌吸。于是Google搜索關(guān)鍵字
vue cli webpack結(jié)構(gòu)锈拨，有很多很好的解釋?zhuān)热绲蔚吻岸藞F(tuán)隊(duì)的 vue-cli#2.0 webpack 配置分析、Vue.js——60分鐘webpack項(xiàng)目模板快速入門(mén) 等等文章套利，可以很好的讓你對(duì)這個(gè)項(xiàng)目結(jié)構(gòu)有個(gè)初步認(rèn)識(shí)推励。（注意很多文章內(nèi)部又有其他教程的指向鏈接，請(qǐng)不要忽略肉迫，因?yàn)楹芏嗖┲鞅局恢貜?fù)造輪子的宗旨验辞，會(huì)直接貼上已有文章鏈接） - webpack模板項(xiàng)目中使用了
vue-router，即 ’路由‘喊衫，說(shuō)到vue-router就得說(shuō)道單頁(yè)面應(yīng)用（即SPA）跌造。在vue項(xiàng)目中，現(xiàn)在更加流行單頁(yè)面應(yīng)用族购，并搭配路由使用壳贪。這里附上vue-router的文檔。要有個(gè)基本了解寝杖。
- [vue-router 中文文檔]（https://router.vuejs.org/zh-cn/）
- 這些基礎(chǔ)知識(shí)了解后违施，開(kāi)始對(duì)照vue文檔一個(gè)個(gè)敲例子，使用dev模式觀察結(jié)果瑟幕。敲例子過(guò)程中還會(huì)涉及到很多其他知識(shí)的回顧磕蒲，比如css、html只盹、ES6 等辣往。要結(jié)合上面的文檔交互補(bǔ)充知識(shí)。
千萬(wàn)別想著等vue學(xué)完我再去學(xué)weex殖卑，所有的知識(shí)都是先了解站削、使用過(guò)程中深入的過(guò)程。任何沒(méi)有應(yīng)用的學(xué)習(xí)都是耍流氓孵稽。
vue 中還有很多東西要去學(xué)習(xí)许起，如果有機(jī)會(huì)我后面都會(huì)專(zhuān)門(mén)對(duì)一些vue知識(shí)進(jìn)行深入學(xué)習(xí)分析
2.5 Weex學(xué)習(xí)
終于來(lái)到了Weex的學(xué)習(xí)了解，對(duì)一個(gè)前端沒(méi)啥基礎(chǔ)的我來(lái)說(shuō)真的不容易菩鲜，又想快點(diǎn)直接學(xué)Weex但是前面基礎(chǔ)知識(shí)的步驟又跳不過(guò)去街氢，實(shí)在糾結(jié)。
照例睦袖，先看 Weex官方文檔珊肃。并且配合官方 Github 上的 Playground 代碼在本地運(yùn)行起來(lái)。（我是運(yùn)行的android端）以下是我的學(xué)習(xí)順序
- 官方文檔瀏覽一遍（Weex的官方文檔不多，完全可以全局瀏覽一遍）
- 到Github上伦乔，把官方的 Playground 代碼下下來(lái)厉亏。在本地部署好Weex代碼和Android代碼，并跑起來(lái)烈和。
- 把調(diào)試工具
DevTools也運(yùn)行起來(lái)爱只，學(xué)習(xí)該怎么web端調(diào)試App端的js代碼。 - 由于官方 Playground 中的 weex 代碼還是使用
.we文件進(jìn)行編譯運(yùn)行招刹，所以我使用官方推薦的腳手架weex-toolkit重新生成了一個(gè)項(xiàng)目恬试。生成的項(xiàng)目是使用 vue 文件寫(xiě)的，也符合當(dāng)前 weex 的推薦做法疯暑。 - 自己的Sample項(xiàng)目跑起來(lái)后训柴，使用官方的 Playground 項(xiàng)目掃碼可以運(yùn)行。然后我單獨(dú)創(chuàng)建了一個(gè)Android項(xiàng)目妇拯，把Playground中核心代碼轉(zhuǎn)移過(guò)來(lái)幻馁，形成自己的一個(gè)項(xiàng)目結(jié)構(gòu)。
- 最后基于自己整理出的Android項(xiàng)目框架和
weex-toolkit生成的 weex-sample 項(xiàng)目把 weex文檔-手冊(cè) 中的所有內(nèi)建組件和內(nèi)建模塊的例子代碼敲一遍（也可以直接貼上去看效果）了解官方的組件有哪些功能越锈。這時(shí)候?qū)懸粋€(gè)使用手機(jī)號(hào)驗(yàn)證碼登錄的頁(yè)面應(yīng)該沒(méi)問(wèn)題仗嗦。服務(wù)端就自己搭建一個(gè)模擬下請(qǐng)求即可。
至此甘凭，可以說(shuō)對(duì)Weex有了一個(gè)入門(mén)了解稀拐，并且可以寫(xiě)sample頁(yè)面，可以對(duì)寫(xiě)的代碼進(jìn)行調(diào)試丹弱、運(yùn)行等钩蚊。
3 結(jié)尾
整個(gè)前端的知識(shí)不僅廣而且深，上面內(nèi)容中的每一點(diǎn)拿出來(lái)都可以說(shuō)好多好多蹈矮。上面只是我個(gè)人的一個(gè)Weex入門(mén)學(xué)習(xí)路徑，旨在幫助一些完全沒(méi)有前端基礎(chǔ)的人有個(gè)學(xué)習(xí)目標(biāo)和大致路線(xiàn)鸣驱。我自己本身也是在剛?cè)腴T(mén)的路上泛鸟。后面深入過(guò)程會(huì)仔細(xì)的把一些小點(diǎn)專(zhuān)門(mén)拿出來(lái)進(jìn)行深入學(xué)習(xí)。
感覺(jué)不光學(xué)習(xí)前端踊东，很多知識(shí)的學(xué)習(xí)都是要依賴(lài)于真正的應(yīng)用北滥。沒(méi)有應(yīng)用開(kāi)發(fā)的驅(qū)動(dòng)，空無(wú)目的的學(xué)習(xí)知識(shí)效率很低而且沒(méi)有目的性闸翅。
最后我的 Weex開(kāi)發(fā)系列之文檔整理 正在進(jìn)行中再芋，希望大家在評(píng)論中提供好的前端干貨資源。
