Weex學習指南

近年來，伴隨着大前端概念的提出和興起，移動端和前端的邊界變得愈來愈模糊，涌現了一大批移動跨平臺開發框架和模式。從早期的PhoneGap、inoc等Hybird技術，到如今耳熟能詳的React Native、Weex和Flutter等技術，無不體現着移動端開發的前端化。而阿里巴巴在2016年6月開源的Weex移動跨平臺框架，語法上使用Vue.js編寫，更加貼近Web前端開發，在性能和快速迭代方面，相比其餘框架也有必定的優點。

Weex簡介

Weex是由阿里巴巴研發的一套移動跨平臺技術框架，研發的初衷是爲了解決移動開發過程當中頻繁發版和多端研發的問題。使用Weex提供的跨平臺技術，開發者能夠很方便的使用Web技術來構建高性能、可擴展的Native級別的性能體驗，並支持在Android、iOS、YunOS和Web等多平臺上進行部署。具體的說，當在項目中集成WeexSDK以後，就可使用JavaScript和現代流行的前端框架來開發移動應用。
同時，Weex框架的結構是解耦的，渲染引擎與語法層是分開的，也不依賴任何特定的前端框架，目前主要支持Vue.js和Rax兩個前端框架。這樣一來，甚至可使用其餘前端框架來驅動Weex，打造三端一致的native應用。

做爲一套前端跨平臺技術框架，Weex創建了一套源碼轉換以及Native與Js通訊的機制。Weex表面上是一個客戶端框架，但實際上它串聯起了從本地開發、雲端部署到分發的整個鏈路。
具體來講，在開發階段編寫一個.we文件，而後使用Weex提供的weex-toolkit轉換工具將.we文件轉換爲JS bundle，並將生成的JS bundle上傳部署到雲端，最後經過網絡請求或預下發的方式加載至用戶的移動應用客戶端。當集成了Weex SDK的客戶端接收到JS bundle文件後，調用本地的JavaScript引擎執行環境執行相應的JS bundle，並將執行過程當中產生的各類命令發送到native端進行界面渲染、數據存儲、網絡通訊以及用戶交互響應。Weex的整個工做流程圖以下圖所示。

相似的解決方案還有React Native，對就是它，大名鼎鼎的Facebook推出來的，提到Weex不得不提到的對手。根據原理圖咱們來看下，學習weex須要學習哪些知識？

前端知識

上圖中最上面是咱們的DSL，咱們通常叫Weex文件（Weex2.0以後改成Vue），經過transformer這層轉化成js文件，部署到Server或者應用內。 學習Weex須要開發者掌握Html、Css和Js基礎，以及相關的概念、基本語法、基礎頁面繪製等前端知識。

JS知識

Weex開發須要開發者掌握的前端知識有：

JavaScript文檔
文檔：https://developer.mozilla.org... JavaScript文檔比較全面。

ES6是JavaScript語言的最新標準。
文檔：http://es6.ruanyifeng.com/ 阮一峯的專門介紹ES6語言新特性的電子書。

文檔：http://liubin.org/promises-bo... Promise是把異步處理對象和處理規則進行規範化，幾乎已經在JavaScript的異步開發中成爲標配。

關於前端更詳細的學習路線能夠參考我以前的博客：前端學習路線

Node

在學習vue以前，須要先了解node.js 和 npm 的概念。已經對此瞭解的同窗能夠直接略過。 Node.js是一個開放源代碼、跨平臺的、可用於服務器端和網絡應用的運行環境。Node.js使用Google V8 JavaScript 引擎。
npm用的比較多，就是一個依賴包管理系統。就像Android裏的Gradle同樣。說到npm就要提到 package.json 文件，在vue項目、weex項目中都會有這樣一個文件，是一個json配置數組。具體的配置規則能夠見 npm-package.json。

Vue

Vue.js做爲當前流行的三大前端框架之一，是一套構建用戶界面的漸進式框架，與其它大型的前端框架不一樣，Vue被設計爲能夠自底向上逐層應用。同時，Vue的核心庫只關注視圖層，不只易於上手，還便於與第三方庫或既有項目整合，當與現代化的工具鏈以及各類支持類庫結合使用時，Vue 也徹底可以爲複雜的單頁應用提供驅動。

隨着Weex 0.10.0版本的發佈，Weex正式添加了對vue.js語言的支持，今後開發者即可以使用vue.js來開發Weex應用程序。

使用 vue-cli （又名腳手架）建立一個模板Vue項目,使用WebStorm進行代碼編輯，並dev模式跑起來。方便一邊看文檔，一邊手動寫代碼。 經過腳手架建立好項目，首先了解webpack模板建立出來的項目結構是怎樣的、入口在哪、配置文件在哪、該在哪寫業務代碼、怎麼運行等等。這個百度一下，有不少解釋。
webpack模板項目中使用了 vue-router （路由），說到 vue-router 就得說單頁面應用（即SPA）。在vue項目中，如今更加流行單頁面應用，並搭配路由使用。用 Vue.js + vue-router 建立單頁應用，是很是簡單的。使用 Vue.js 時，咱們就已經把組件組合成一個應用了，當你要把 vue-router 加進來，只須要配置組件和路由映射，而後告訴 vue-router 在哪裏渲染它們。
在Vue中，多組件的開發給咱們帶來了不少的方便，但同時當項目規模變大的時候，多個組件間的數據通訊和狀態管理就顯得難以維護，而Vuex就此應運而生。

須要注意的是，vue是一個完整且龐大的框架，千萬別想着等vue學完我再去學weex，全部的知識都是先了解、使用過程當中深刻的過程。

相關文檔地址：
Vue官方文檔 ：https://cn.vuejs.org/
Github：https://github.com/vuejs/vue
vue-router文檔：https://router.vuejs.org/zh-cn/
Github：https://github.com/vuejs/vue-...
Vuex 文檔：https://vuex.vuejs.org/zh-cn/
Github：https://github.com/vuejs/vuex/

Weex

終於到了Weex的學習，若是有前端基礎的能夠直接跳過前面基礎知識學習瞭解。照例，先看Weex官方文檔（https://weex.apache.org/cn/），而且配合官方Github上的Playground代碼在本地運行起來。
下面說一下對於一個新手來講，如何學習Weex呢？
一、官方文檔瀏覽一遍，有個大體瞭解，文檔很少也比較簡單。

二、按照官方文檔快速上手，搭建開發環境，使用官方推薦的腳手架 weex-toolkit 建立一個項目，而後運行第一個Weex項目hello weex。

三、安裝Playground示例apk，而後在手機上看到各類demo的效果。而後用Playground掃描咱們運行的hello weex，便可在Android手機上看到效果了。到Github上，把官方的 Playground 代碼下下來。在本地部署好Weex代碼和Android代碼，並跑起來，Ios同理。

四、調試Weex頁面，weex-toolkit支持調試工具，weex devtools，啓動一個調試服務器，學習在web端調試App端的js代碼。

五、本身的Sample項目跑起來後，使用官方的 Playground 項目掃碼能夠運行。而後集成Weex到已有應用或者一個新建立App項目，使用App端訪問Js頁面。

六、最後基於weex-toolkit 生成的 weex-sample 項目把 weex文檔-手冊 中的全部內建組件和內建模塊的例子代碼敲一遍（也能夠直接貼上去看效果）瞭解官方的組件有哪些功能。
 
學習網站：
Weex學院：https://www.weexdaxue.com/
餓了麼前端專欄：https://zhuanlan.zhihu.com/El...

快速入門

「工欲善其事，必先利其器」，學習Weex以前須要先搭建好本地的開發環境，若是隻是想簡單的體驗下Weex的魅力，可使用Weex提供的dotWe在線運行環境，地址爲「http://dotwe.org/vue」。

Weex官方提供weex-toolkit的腳手架工具來輔助開發和調試。不過須要先安裝Node.js和Weex Cli環境。

安裝Node

安裝Node.js方式多種多樣，最簡單的方式是直接從Node.js官網下載可執行安裝程序直接安裝。若是是Mac環境，還可使用Homebrew進行安裝，安裝命令以下：

brew install node

安裝完成以後，可使用下面的命令來檢測是否安裝成功。

$ node -v
v6.11.3
$ npm -v
3.10.10

一般，安裝了Node.js環境，npm包管理工具也隨之安裝了。所以，接下來能夠直接使用npm來安裝weex-toolkit工具。

npm install -g weex-toolkit

若是要升級weex-toolkit，則可使用下面的命令：
weex update weex-devtool@latest // @後標註版本後，latest表示最新版本
若是是國內開發者，還可使用淘寶的npm鏡像來安裝weex-toolkit，涉及到的安裝命令以下：

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g weex-toolkit

安裝結束後，能夠直接使用weex命令來驗證是否安裝成功，若是安裝成功會顯示weex命令行工具各參數。

安裝weexpack

weexpack是weex新一代的工程開發套件，是基於weex快速搭建應用原型的利器。使用weexpack能夠快速的幫助開發者經過命令行建立weex工程和插件工程，添加相應平臺的weex 應用模版，weexpack還支持快速打包weex 應用並安裝到手機運行，並建立weex插件模版併發布插件到weex應用市場。安裝weexpack的命令以下：

npm install -g weexpack

安裝Weektools

weex-toolkit是官方提供的一個腳手架命令行工具，可使用它進行Weex 項目的建立、調試以及打包等操做。weex-toolkit從1.0.1版本以後纔開始支持初始化Vue項目，因此使用時請注意weex-toolki的版本。weex-toolkit的安裝命令以下：

npm install -g weex-toolkit

若是使用上面的命令安裝，使用的是從https://registry.npmjs.org獲...，因此對於國內用戶來講，最好選擇從阿里的鏡像去下載，安裝時須要執行以下的一些命令。

npm install -g cnpm --registry=https://registry.npm.taobao.org  //淘寶鏡像
npm install -g weex-toolkit

安裝完成以後，可使用weex -v或者weex命令來驗證是否安裝成功。

安裝Android環境

若是須要支持Android平臺則須要配置Android開發環境：安裝Java相關環境，安裝Android Studio及Android SDK。在安裝編譯Android項目時須要保證Android build-tool的版本爲23.0.2以上。

安裝iOS環境

若是須要支持iOS平臺則須要配置iOS開發環境：安裝Xcode、cocoaPods及其相關環境。其中，Xcode是Apple 公司提供的集成開發工具，可使用它開發macOS和iOS應用程序，而CocoaPods則是負責iOS項目管理的第三方開源庫的工具，合理的使用CocoaPods能夠提升程序的開發效率。

接下來，使用Weex提供的create命令初始化一個Weex項目。例如：
weex create weexdemo
執行完上述命令後，在工程weexdemo目錄下就會建立一個使用Weex和Vue的模板項目，工程目錄以下圖所示。

未完待續！！！