Weex入門教程之1，了解Weex

2019-11-09 18:55:42

字體：大中小

供稿：網(wǎng)友

【資料合集】Weex Conf回顧集錦：講義PDF+活動(dòng)視頻！ PDF分享：鏈接：http://pan.baidu.com/s/1hr8RniG 密碼：fa3j 官方教程：https://weex-PRoject.io/cn/v-0.10/guide/index.html

用意

主要是介紹Weex，并未涉及開發(fā)方面，好讓我們開始開發(fā)之前充分地了解Weex到底是個(gè)什么。以下描述主要摘取于： http://mp.weixin.QQ.com/mp/homepage?__biz=MzAxNDEwNjk5OQ==&hid=1&sn=3b134d0bf2da529b90ede97e1f95a684#wechat_redirect

Native（原生開發(fā)）

Native App是一種基于智能手機(jī)本地操作系統(tǒng)如iOS、Android、WP并使用原生程式編寫運(yùn)行的第三方應(yīng)用程序,也叫本地app。

Weex介紹

Weex是阿里巴巴今年6月底正式開源的一個(gè)重量級(jí)項(xiàng)目，可以在提供Web開發(fā)體驗(yàn)同時(shí)做出Native性能和質(zhì)感的移動(dòng)應(yīng)用。Weex會(huì)在客戶端運(yùn)行一個(gè)javaScript引擎，使得動(dòng)態(tài)調(diào)度原生渲染和系統(tǒng)特性成為了可能。除此之外Weex還具有輕量、高性能、可擴(kuò)展、一次撰寫多端運(yùn)行等諸多特點(diǎn)，目前已經(jīng)在手機(jī)淘寶等億級(jí)用戶的大型移動(dòng)應(yīng)用中投入使用。Weex自發(fā)布以來(lái)就吸引了大批國(guó)內(nèi)開發(fā)者的關(guān)注，目前在github上的star數(shù)已經(jīng)突破了5600大關(guān)，一度登上github趨勢(shì)榜的榜首。

如今阿里諸多客戶端已經(jīng)面臨包大小接近臨界值，大促活動(dòng)頁(yè)面（H5）體驗(yàn)較差等一系列問(wèn)題。結(jié)合Native 和 Web 技術(shù)亮點(diǎn)，同時(shí)又能解決阿里遇到的業(yè)務(wù)問(wèn)題，這就是 Weex 誕生的客觀環(huán)境。

Weex兩大特點(diǎn)

Weex是阿里自研的高性能跨平臺(tái)移動(dòng)開發(fā)框架，最大的特點(diǎn)是解決了頻繁發(fā)版和多端研發(fā)兩大痛點(diǎn)，一套Web代碼完美適配iOS、Android、H5、Web等多端，極大地解放開發(fā)者的同時(shí)又保證了用戶體驗(yàn)。

阿里巴巴資深技術(shù)專家，Weex負(fù)責(zé)人吳志華表示：“我們希望將Weex做成移動(dòng)開發(fā)交付的統(tǒng)一技術(shù)標(biāo)準(zhǔn)，正如PC時(shí)代從桌面軟件過(guò)渡到Web一樣，Weex希望通過(guò)自己的努力為移動(dòng)時(shí)代的技術(shù)進(jìn)步做出貢獻(xiàn)。”

了解Weex從*.we文件到native頁(yè)面的過(guò)程

這里寫圖片描述

Weex 架構(gòu)

這里寫圖片描述

天貓業(yè)務(wù)：通過(guò)斑馬（活動(dòng)頁(yè)面搭建和發(fā)布平臺(tái)）發(fā)布會(huì)場(chǎng)頁(yè)面淘寶業(yè)務(wù)：通過(guò)斑馬和 AWP （產(chǎn)品頁(yè)面發(fā)布平臺(tái)）發(fā)布會(huì)場(chǎng)頁(yè)面，上層DSL 使用 Rx（即將開源）預(yù)加載：提前將會(huì)場(chǎng)js-bundle 下載到客戶端，客戶端訪問(wèn) Weex 會(huì)場(chǎng)時(shí)網(wǎng)絡(luò) IO 被攔截到本地文件 IO，從而極大加快了網(wǎng)絡(luò)加載速度，預(yù)加載是這次秒開實(shí)戰(zhàn)的抓手（注：最核心的工作）手淘、手貓客戶端，Weex 是客戶端的一部分，客戶端中其實(shí)是 Weex、Native、H5并存的Weex SDK、業(yè)務(wù)模塊：Weex容器和基礎(chǔ)的 Components、Modules，業(yè)務(wù)模塊包括直播/點(diǎn)播組件、全景圖組件

將 Weex 架構(gòu)自上而下地展開：

Business，Weex 業(yè)務(wù)層，Weex 雙11主戰(zhàn)場(chǎng)是手淘和手貓，此外還有大量客戶端已經(jīng)啟用或接入了WeexMiddleware，Weex 中間件層，包括為 Weex 頁(yè)面提供發(fā)布（斑馬、AWP）、預(yù)加載（AWP）、客戶端接入支持（AliWeex）、組件庫(kù)（SUI）、游戲引擎、圖表庫(kù)等模塊；其中斑馬、AWP、預(yù)加載都直接參與了雙11Tool，工具層 DevTools，界面和交互復(fù)用了Webkit Devtools，支持 elements、network、斷點(diǎn)、console 等Playground，方便開發(fā)者調(diào)試Weex 頁(yè)面，同時(shí)也是 Weex example 的聚集地Cli，Weex 命令行工具集目前仍在建設(shè)更多的工具，如weex-pack 支持一鍵打包成 AppDSL JS Framework，Weex 最初的 DSL 是基于 Vuejs 1.0 語(yǔ)法子集；目前在社區(qū)中在推進(jìn)基于Vuejs 2.0 的版本Rx，基于reactjs 語(yǔ)法的 Weex DSL

Engine，渲染引擎，從架構(gòu)設(shè)計(jì)上，Android/iOS/H5 RenderEngine 是相互獨(dú)立和平等地位的渲染端，這是保持三端一致的基礎(chǔ)，當(dāng)然在協(xié)議實(shí)現(xiàn)層面需要更多的設(shè)計(jì)、質(zhì)量保證

這里寫圖片描述圖 - Weex 架構(gòu)

Weex實(shí)戰(zhàn)

Weex目前已經(jīng)在手機(jī)淘寶、天貓等多個(gè)阿里APP中投入使用，并在大規(guī)模復(fù)雜應(yīng)用場(chǎng)景下經(jīng)歷了全面的錘煉打磨。在剛剛過(guò)去的2016雙11中，近2000個(gè)頁(yè)面采用Weex渲染，會(huì)場(chǎng)覆蓋率高達(dá)99.6%，主會(huì)場(chǎng)秒開率高達(dá)97%，性能和穩(wěn)定性均表現(xiàn)優(yōu)異。取代HTML5成為雙11阿里移動(dòng)業(yè)務(wù)交付方案，標(biāo)志著Weex進(jìn)入工程大規(guī)模應(yīng)用成熟期。

2016.11.11，在 1754 張雙11會(huì)場(chǎng)頁(yè)面中（統(tǒng)計(jì)了天貓和淘寶），Weex頁(yè)面數(shù)為 1747 占比 99.6%。手淘 iOS/Android分別有 83.5%/78.3% 版本（UV）啟用了Weex 會(huì)場(chǎng)，手貓 iOS/Android 分別為 91.7%/87.9% 版本（UV）。Weex 覆蓋了包括主會(huì)場(chǎng)、分會(huì)場(chǎng)、分分會(huì)場(chǎng)、人群會(huì)場(chǎng) 等在內(nèi)幾乎所有的雙11會(huì)場(chǎng)業(yè)務(wù)。

2016 雙11會(huì)場(chǎng)的感受可查看原始錄屏文件：WIFI | 4G | 3G | 2G | 無(wú)網(wǎng)絡(luò) 。錄屏?xí)r主會(huì)場(chǎng)已經(jīng)是預(yù)加載版本，其中WIFI 和 4G 效果接近，2G 效果取決于數(shù)據(jù)的網(wǎng)絡(luò)請(qǐng)求速度（錄屏?xí)r數(shù)據(jù)請(qǐng)求約3.9s），無(wú)網(wǎng)絡(luò)情況下打底數(shù)據(jù)來(lái)自前一次成功請(qǐng)求。流暢性可查看該視頻，左起為 H5、iOS Weex、AndroidWeex。

秒開實(shí)戰(zhàn)

其中：加載時(shí)間指 Weex js-bundle 的加載時(shí)間（從網(wǎng)絡(luò)下載或本地加載）；首屏渲染時(shí)間指Weex 頁(yè)面開始渲染到第 1 個(gè)元素bottom 超出首屏范圍的時(shí)間。下文提到的“首屏網(wǎng)絡(luò)時(shí)間”為加載時(shí)間與首屏渲染時(shí)間的和。

從雙11結(jié)果看預(yù)加載大幅度提升加載時(shí)間，對(duì)秒開率的貢獻(xiàn)尤其突出；但性能優(yōu)化是個(gè)長(zhǎng)期迭代的過(guò)程，回頭來(lái)看優(yōu)化的抓手是：預(yù)加載和首屏渲染優(yōu)化。

預(yù)加載預(yù)加載解決了 1 個(gè)問(wèn)題：用戶訪問(wèn)頁(yè)面（H5/Weex）之前，將頁(yè)面靜態(tài)資源（HTML/JS/CSS/IMG…）打包提前下載到客戶端；用戶訪問(wèn)頁(yè)面時(shí)，將網(wǎng)絡(luò)IO 攔截并替換為本地文件 IO；從而實(shí)現(xiàn)加載性能的大幅度提升。

啟用預(yù)加載后加載時(shí)間的變化，粗算一下：手淘 iOS，走網(wǎng)絡(luò)平均 296ms，走預(yù)加載 18ms，網(wǎng)絡(luò)性能提升約 15 倍；手淘 Android，走網(wǎng)絡(luò)平均是 696ms，走預(yù)加載是 54ms，網(wǎng)絡(luò)性能提升約 12 倍，但絕對(duì)值更大，對(duì)Android 會(huì)場(chǎng)秒開貢獻(xiàn)更為突出。

此次雙11會(huì)場(chǎng)共啟用 30 個(gè)預(yù)加載包，總?cè)萘砍^(guò) 20MB，業(yè)務(wù)需求相對(duì)穩(wěn)定且流量較大的幾個(gè)頁(yè)面（會(huì)場(chǎng)框架+主會(huì)場(chǎng)等）是獨(dú)立的包，保證了對(duì)整體秒開的貢獻(xiàn)，其他分會(huì)場(chǎng)均分在剩余的包中。同時(shí)主要采用強(qiáng)制更新的策略，即新的資源包（服務(wù)端有新發(fā)布）未下載到本地就直接讀取線上，可以保證業(yè)務(wù)的實(shí)時(shí)性。2016.11.11，雙11會(huì)場(chǎng)中Android 走預(yù)加載占比為59.4%，iOS 為 62.5%，高于平均水平（但還可以更高）。

還有其它，需要請(qǐng)參考官方介紹

支持調(diào)用移動(dòng)設(shè)備原生 API

在 Weex 中能夠調(diào)用移動(dòng)設(shè)備原生 API，使用方法是通過(guò)注冊(cè)、調(diào)用模塊來(lái)實(shí)現(xiàn)。其中有一些模塊是 Weex 內(nèi)置的，如 clipboard 、 navigator 、storage 等。

《clipboard 剪切板》《navigator 導(dǎo)航控制》《storage 本地存儲(chǔ) 》為了保持框架的通用性，Weex 內(nèi)置的原生模塊有限，不過(guò) Weex 提供了橫向擴(kuò)展的能力，可以擴(kuò)展原生模塊，具體的擴(kuò)展方法請(qǐng)參考《iOS 擴(kuò)展》和《Android 擴(kuò)展》。

有些接口在瀏覽器環(huán)境中也存在，不過(guò)在使用時(shí)應(yīng)該注意瀏覽器的兼容性；如剪貼板功能，出于安全性考慮，絕大多數(shù)瀏覽器都限制其使用。

Weex發(fā)展-Weex 正式聯(lián)手 Vue 共創(chuàng)移動(dòng)開發(fā)新模式

Vue.js的作者尤雨溪表示：“Weex選擇Vue作為其Javascript運(yùn)行時(shí)框架是讓我非常高興的一件事。Vue的組件開發(fā)模式已經(jīng)被web開發(fā)者社區(qū)廣泛認(rèn)可，而把Vue的開發(fā)體驗(yàn)拓展到原生平臺(tái)則是我一直想做但沒(méi)有余力去做的事情。一想到Weex將能讓開發(fā)者們用Vue的語(yǔ)法去寫跨Web/Android/iOS三端的通用組件，就讓我很興奮。”