2016年底了解到weex，看到它的諸多優(yōu)點，但因為工作中和它沒什么交集也就沒著手去學(xué)習(xí)。后續(xù)換工作有用到weex，開始入坑。在這記錄下weex的學(xué)習(xí)之路。
首先weex上手還是挺快的，學(xué)習(xí)成本相對較低。在入坑前對于前端的了解也僅限于熟悉H5標簽和一些css的基本寫法，一周左右時間就磕磕碰碰的進行開發(fā)調(diào)試了。

weex從出生一直就拿來和ReactNative比較，這點不用太刻意的對比優(yōu)缺點，畢竟有不同的應(yīng)用場景，但是了解下還是非常有必要的。在介紹之前也先看一下兩者的區(qū)別

JS引擎：

weex使用V8， ReactNative使用JSCore

JS開發(fā)框架：weex(1.75W+ star)基于vue.js(14W+ star)。小巧輕量的前端開發(fā)框架，組件化，數(shù)據(jù)綁定，2.0引入virtual dom。ReactNative(7.95W+ star)使用React(13W+ star)。革命性的前端開發(fā)框架，組件化，數(shù)據(jù)綁定，virtual dom。(數(shù)據(jù)來源github)

學(xué)習(xí)成本

1.環(huán)境配置

ReactNative需要按照文檔安裝配置較多的依賴工具。 weex安裝cli之后就可以使用

2.vue vs react

react模板JSX學(xué)習(xí)使用有一定的成本 vue更接近常用的web開發(fā)方式，模板就是普通的html，數(shù)據(jù)綁定使用mustache風(fēng)格，樣式直接使用css

3.布局

兩者實現(xiàn)了flexbox的相同子集（都使用了FaceBook的代碼解析），基本沒有區(qū)別

易用性

1.sdk的使用

ReactNative需要解決mvn依賴的問題，因此必須自己修改源碼，打包發(fā)布
weex可以直接在mvn項目中使用

2.調(diào)試

都可以在chrome中調(diào)試JS代碼
weex支持在chrome中預(yù)覽頁面dom節(jié)點，ReactNative不支持

3.頁面開發(fā)

weex提供了一個playground，可以方便的預(yù)覽正在開發(fā)的頁面
ReactNative開發(fā)一個頁面，需要建立一個native工程，然后編譯運行

4.及時預(yù)覽

weex和ReactNative都有提供hot reload功能，可以邊更改代碼，邊在手機上看到效果

5.打包

ReactNative官方只能將ReactNative基礎(chǔ)js庫和業(yè)務(wù)js一起打成一個js bundle，沒有提供分包的功能，需要制作分包打包工具
weex默認打的js bundle只包含業(yè)務(wù)js代碼，體積小很多，基礎(chǔ)js庫包含在weex sdk中

6.擴展性

組件的擴展上，weex和ReactNative具有一樣的能力
三方庫的接入上，weex對網(wǎng)絡(luò)，圖片，統(tǒng)計等常見的用戶可能想自己定制的功能，提供了相應(yīng)的適配接口，可以由用戶方便的定制，ReactNative定制較麻煩

7.集團庫的接入

weex有默認的mtop接入實現(xiàn)，UT接入實現(xiàn)
windvane也提供了對weex頁面的支持，可以復(fù)用app中的web容器

8.跨平臺

ReactNative支持Android iOS兩個平臺，需要自己擴展去支持web，windows和node-webkit的支持正在開發(fā)中
weex可以支持Android iOS web三個平臺

9.Moudle方法調(diào)用線程

weex 可以通過注解標注是否在UI線程執(zhí)行
ReactNative在native——modules線程執(zhí)行

10.異步

weex只支持callback
Reactive在native——modules線程執(zhí)行

性能

1.分包加載

ReactNative需要自己實現(xiàn)，從而優(yōu)化JS加載執(zhí)行時間
weex默認提供分包實現(xiàn)

2.大塊view渲染

ReactNative默認沒有優(yōu)化機制，長view渲染性能會比較差
weex提供了node和tree兩種渲染模式，優(yōu)化長view的渲染

3.ListView Android

ReactNative目前采用scrollView使用，有一些性能問題
weex使用recyclerview實現(xiàn)，性能稍好

社區(qū)

ReactNative 7.95w+ star，issue，pull request， contributor多，社區(qū)活躍，圍繞react產(chǎn)生了許多開發(fā)框架
weex開源較晚，目前只有1.75k+ start，contributor以阿里人為主，較少，issue和pull request也比較少，社區(qū)目前規(guī)模比較小

回歸正題，weex學(xué)習(xí)的路：什么是weex、搭建環(huán)境、怎么使用（這個里邊還是有點東西的）、調(diào)試。

一、什么是weex

Weex 致力于使開發(fā)者能基于通用跨平臺的 Web 開發(fā)語言和開發(fā)經(jīng)驗，來構(gòu)建 Android、iOS 和 Web 應(yīng)用。簡單來說，在集成了 WeexSDK 之后，你可以使用 JavaScript 語言和前端開發(fā)經(jīng)驗來開發(fā)移動應(yīng)用。

Weex 渲染引擎與 DSL 語法層是分開的，Weex 并不強依賴任何特定的前端框架。目前 Vue.js 和 Rax 這兩個前端框架被廣泛應(yīng)用于 Weex 頁面開發(fā)，同時 Weex 也對這兩個前端框架提供了最完善的支持。Weex 的另一個主要目標是跟進流行的 Web 開發(fā)技術(shù)并將其和原生開發(fā)的技術(shù)結(jié)合，實現(xiàn)開發(fā)效率和運行性能的高度統(tǒng)一。在開發(fā)階段，一個 Weex 頁面就像開發(fā)普通網(wǎng)頁一樣；在運行時，Weex 頁面又充分利用了各種操作系統(tǒng)的原生組件和能力。

概述

weex新手必備的開發(fā)工具：WeexPalyground、Weex online playground和weexUI，可以在上面學(xué)習(xí)、借鑒下類似需求的實現(xiàn)。

在這里拿個官網(wǎng)上的例子介紹下Weex是如何工作的

如何工作

在 <template> 部分，包含了 <div> 元素，這個被廣泛應(yīng)用于 Web 頁面中，在 Weex 里它也是一個通用的容器。<text> 元素就和普通的 HTML 不太一樣了，它提供了顯示文本的能力，在 Weex 上，所有文本必須放在 <text> 標簽中。

在 <style> 部分，你可以定義各種 CSS 樣式。需要注意的是，這些樣式在 Weex 里只能作用于當前組件，scoped.

原生組件

在上面的例子中，<div> 和 <text> 在移動端上渲染出來的都是原生組件，充分利用了操作系統(tǒng)組件的能力與渲染速度。

image

Weex 提供了一套基礎(chǔ)的內(nèi)置組件。你可以對這些基礎(chǔ)組件進行封裝、組合形成自己的組件；也可以創(chuàng)建自己的全新組件來包裝操作系統(tǒng)提供的地圖、視頻等功能?？梢栽L問 擴展 iOS 能力 和 擴展 Android 能力來了解如何去實現(xiàn)自定義組件。

在框架內(nèi)部，Weex 使用原生組件來渲染，并盡可能保持多平臺一致性。但在不同平臺上，或多或少會有一些渲染、行為上的差異。比如對于 <switch> 組件，在不同平臺上的視覺效果是不一致的。

image

原生模塊

對于那些不依賴于 UI 組件的功能，Weex 將它們包裝成多個 模塊，比如 動畫模塊。在前端代碼中，使用 weex.requireModule('xxx') 引入一個模塊，之后就可以調(diào)用它提供的各種方法。Weex 模塊包裝了網(wǎng)絡(luò)、存儲、剪切板、導(dǎo)航等各種功能供前端調(diào)用。比如你可以使用 stream 模塊來獲取 Vue.js 的 Star 數(shù)量。

Weex 已經(jīng)提供了不少內(nèi)置模塊，同時也支持將 App 特有的功能包裝成自定義模塊提供給前端調(diào)用。如果想了解怎么做，可以去官網(wǎng)查看文檔。

工作原理

Weex主要包括三大部分：JS Bridge、Render、Dom，分別對應(yīng)WXBridgeManager、WXRenderManager、WXDomManager 。通過WXSDKManager統(tǒng)一管理。其中JS Bridge和Dom運行在獨立的HandlerThread中，而Render運行在UI線程。JS Bridge主要用來和 JS 端實現(xiàn)進行雙向通信，比如把js端的dom結(jié)構(gòu)傳遞給Dom線程。Dom主要是用于負責(zé)dom的解析、映射、添加等等的操作，最后通知UI線程更新。而Render負責(zé)在UI線程中對dom實現(xiàn)渲染。

如下圖，是生成dom，dom的解析，映射，添加，渲染的流程。

weex工作原理

如上可知，因為JS端運行于獨立的單線程中，所以為了保證運行的流暢性，一般需要避免在JS端執(zhí)行耗時操作，比如：網(wǎng)絡(luò)請求，圖片加載等，其實都是在原生端完成，js端執(zhí)行的是發(fā)起一個請求和響應(yīng)一個結(jié)果。同時因為原生端與JS端是通過JS Bridge通訊，所以也需要盡量避免大數(shù)據(jù)和頻繁的通訊，導(dǎo)致響應(yīng)的延遲。

原生端的dom的加載解析映射，也是性能的一大瓶頸。一般而言，Weex在Web端生成的，是通過webpack的webConfig打包成單頁面的index.web.js文件；而在原生端，一般會通過webpack的weexEntry配置成多頁面形式：即每一個需要獨立的.vue的頁面，最終會被打包成一個.js文件。所以打開每個頁面時加載對應(yīng)的js文件，這很好的減小了需要加載的文件大小，提高了dom的解析效率。最后，Weex默認打的js只包含業(yè)務(wù)js代碼，基礎(chǔ)js庫已經(jīng)被包含在weex sdk中，也使得體積會小很多。

入門

使用 Weex Online Editor 對 Weex 嘗鮮是一個不錯的選擇，但如果你想更專業(yè)的開發(fā) Weex，本節(jié)會教你如何搭建本地開發(fā)環(huán)境進行 Weex 開發(fā)。

安裝依賴

Weex 官方提供 weex-toolkit 的腳手架工具來輔助開發(fā)和調(diào)試。

首先，你需要 Node.js 和 Weex CLi。

安裝 Node.js 方式多種多樣，最簡單的方式是在 Node.js 官網(wǎng) 下載可執(zhí)行程序直接安裝即可。

更多安裝方式可參考 Node.js 官方信息

::: Tip

通常，安裝了 Node.js 環(huán)境，npm 包管理工具也隨之安裝了。因此，直接使用 npm 來安裝 weex-toolkit, 也可以通過 yarn 來進行安裝。

國內(nèi)的開發(fā)者推薦將npm鏡像切換至 Taobao NPM 鏡像
nrm ls #查看所有設(shè)置的源 nrm use showjoy #使用淘寶源

運行下面的命令安裝最新的beta版本工具：
weex -v // 查看當前weex工具版本
安裝結(jié)束后你可以直接使用 weex help 命令驗證是否安裝成功，它會顯示 weex 支持的所有指令，同時，你也可以通過 weex doctor 命令檢查你的本地開發(fā)環(huán)境。

引用文章：

https://zhuanlan.zhihu.com/p/21677103

https://blog.csdn.net/zuoyueliang/article/details/81329462