Weex 是什么？
Weex 是一套簡(jiǎn)單易用的跨平臺(tái)開發(fā)方案，能以 web 的開發(fā)體驗(yàn)構(gòu)建高性能、可擴(kuò)展的 native 應(yīng)用，為了做到這些，Weex 與 Vue 合作，使用 Vue 作為上層框架，并遵循 W3C 標(biāo)準(zhǔn)實(shí)現(xiàn)了統(tǒng)一的 JSEngine 和 DOM API，打造三端一致的 native 應(yīng)用。愛掏網(wǎng) - it200.com其架構(gòu)如下所示：
將 weex 工程文件編譯成 JS bundle，發(fā)布到云端，由客戶端下載后，通過瀏覽器里的 JavaScript 引擎或 Weex SDK 運(yùn)行起來的。愛掏網(wǎng) - it200.com
為了能掌握 weex 編程技術(shù)，開發(fā)人員需要熟悉以下幾個(gè)概念（拷貝自官網(wǎng) http://weex.apache.org）
Weex 頁面結(jié)構(gòu)
界面展示、邏輯處理、設(shè)備能力使用、生命周期管理等部分。愛掏網(wǎng) - it200.com
Dom 模型
Weex 頁面通過類似 HTML DOM 的方式管理界面，首先頁面會(huì)被分解為一個(gè) DOM 樹，每個(gè) DOM 結(jié)點(diǎn)都代表了一個(gè)相對(duì)獨(dú)立的 native 視圖的單元。愛掏網(wǎng) - it200.com然后不同的視圖單元之間通過樹形結(jié)構(gòu)組合在了一起，構(gòu)成一個(gè)完整的頁面。愛掏網(wǎng) - it200.com
組件
Weex 支持文字 text、圖片 image、視頻 video 等內(nèi)容型組件，也支持 div、list、scroller 等容器型組件，還包括 slider、input、textarea、switch 等多種特殊的組件。愛掏網(wǎng) - it200.comWeex 的界面就是由這些組件以 DOM 樹的方式構(gòu)建出來的。愛掏網(wǎng) - it200.com
布局系統(tǒng)
Weex 頁面中的組件會(huì)按照一定的布局規(guī)范來進(jìn)行排布，我們這里提供了 CSS 中的盒模型、flexbox 和 絕對(duì) / 相對(duì) / 固定 / 吸附布局這三大塊布局模型。愛掏網(wǎng) - it200.com
功能
Weex 提供了非常豐富的系統(tǒng)功能 API，包括彈出存儲(chǔ)、網(wǎng)絡(luò)、導(dǎo)航、彈對(duì)話框和 toast 等，開發(fā)者可以在 Weex 頁面通過獲取一個(gè) native module 的方式引入并調(diào)用這些客戶端功能 API。愛掏網(wǎng) - it200.com
生命周期
每個(gè) Weex 頁面都有其自身的生命周期，頁面從開始被創(chuàng)建到最后被銷毀，會(huì)經(jīng)歷到整個(gè)過程。愛掏網(wǎng) - it200.com這是通過對(duì) Weex 頁面的創(chuàng)建和銷毀，在路由中通過 SDK 自行定義并實(shí)現(xiàn)的。愛掏網(wǎng) - it200.com
在移動(dòng)辦公開發(fā)中的實(shí)踐注：涉及代碼均以 Android 端為例。愛掏網(wǎng) - it200.com
（一）前端遵循 weex 移動(dòng)應(yīng)用的設(shè)計(jì)理念
weex 認(rèn)為一個(gè)具有高并行研發(fā)能力、動(dòng)態(tài)化和標(biāo)準(zhǔn)化規(guī)范化的移動(dòng)應(yīng)用應(yīng)該由以下幾個(gè)方面構(gòu)成：
頁面：首先移動(dòng)應(yīng)用應(yīng)該可以被拆解成若干個(gè)頁面，每個(gè)頁面相對(duì)解耦獨(dú)立，同時(shí)每個(gè)頁面都有一個(gè) URL 進(jìn)行唯一標(biāo)識(shí)。愛掏網(wǎng) - it200.com路由：這些頁面將會(huì)通過路由機(jī)制有機(jī)的串聯(lián)起來，頁面之間的關(guān)系是通過路由來進(jìn)行調(diào)度的。愛掏網(wǎng) - it200.com常見的移動(dòng)應(yīng)用路由包括導(dǎo)航欄、tab 切換等。愛掏網(wǎng) - it200.com設(shè)備能力：以各種 API 或服務(wù)的方式提供出來，供頁面自由使用。愛掏網(wǎng) - it200.com這樣的話，在構(gòu)建一個(gè)完整的移動(dòng)應(yīng)用之前，先確定你的應(yīng)用有多少頁面，每個(gè)頁面分別是什么 URL，頁面之間的路由邏輯是怎樣的，然后梳理整個(gè)移動(dòng)應(yīng)用需要的所有 API 和服務(wù)。愛掏網(wǎng) - it200.com最后通過 Weex 創(chuàng)建不同的頁面，并分別進(jìn)行開發(fā)、調(diào)試。愛掏網(wǎng) - it200.com
（二）構(gòu)建自己的標(biāo)桿工程
我們基于 github 上的 Playground 項(xiàng)目，構(gòu)建了自己的標(biāo)桿工程。愛掏網(wǎng) - it200.com
將不同的 js 文件用做常量、工具方法的定義。愛掏網(wǎng) - it200.com常量諸如 url、版本開關(guān)、路由表。愛掏網(wǎng) - it200.com工具方法諸如 Http get、post 方法的封裝、時(shí)間轉(zhuǎn)換函數(shù)、加解密方法。愛掏網(wǎng) - it200.com
除了用 vue 封裝頁面，還封裝了公用的樣式，構(gòu)建了常用的控件庫。愛掏網(wǎng) - it200.com
（三）整合 weex 引擎，完善移動(dòng)辦公微應(yīng)用的接入方案
掛接 glide 用于替換默認(rèn)的 picasso 圖庫的實(shí)現(xiàn)，因?yàn)槟壳?picasso 的版本沒法支持 gif 動(dòng)圖。愛掏網(wǎng) - it200.com另一個(gè)好處是，可以定制圖庫緩沖區(qū)的大小。愛掏網(wǎng) - it200.com
掛接自己的 http 適配器，適度復(fù)用 Native 的 http 實(shí)現(xiàn)并定制到 weex 中，同時(shí)這也是打通 native 登陸憑證和 weex 登陸憑證的必要一環(huán)。愛掏網(wǎng) - it200.com
在項(xiàng)目迭代中，擴(kuò)展自定義控件。愛掏網(wǎng) - it200.com這塊自定義控件特指通過 WXSDKEngine.registerComponent() 注冊(cè)的 Native 控件。愛掏網(wǎng) - it200.com需要嚴(yán)格控制這部分控件的實(shí)現(xiàn)。愛掏網(wǎng) - it200.com基于以下幾個(gè)方面考慮：
1.Native 控件需要 IOS、Android 同時(shí)實(shí)現(xiàn)，增加了開發(fā)工作量。愛掏網(wǎng) - it200.com
2. 頁面使用了這種控件，老版本的應(yīng)用就沒法進(jìn)行兼容，會(huì)需要提示用戶升級(jí)。愛掏網(wǎng) - it200.com
3. 開發(fā)者需要充分考慮純 vue 的方式是否能實(shí)現(xiàn)，一般都是有方法的。愛掏網(wǎng) - it200.com
即使實(shí)現(xiàn)了 Native 控件，在后續(xù) weex 引擎升級(jí)過程中，也需要持續(xù)關(guān)注，可能日后標(biāo)準(zhǔn)控件庫會(huì)提供支持。愛掏網(wǎng) - it200.com
定義一套開放接口，通過 WXSDKEngine.registerModule() 注冊(cè)，weex 可以適度復(fù)用 H5 的開放接口實(shí)現(xiàn)。愛掏網(wǎng) - it200.com
注冊(cè)自己的 webview 實(shí)現(xiàn)替換默認(rèn)的 webview。愛掏網(wǎng) - it200.com實(shí)現(xiàn)自己的文件下載器，文件選擇器，支持電話號(hào)碼、郵箱等鏈接的點(diǎn)擊跳轉(zhuǎn)。愛掏網(wǎng) - it200.com
（四）靜態(tài)資源的緩沖和緩沖更新策略配置
靜態(tài)資源（js、css、圖片）默認(rèn)不支持緩沖策略，導(dǎo)致使用微應(yīng)用頁面總是打開較慢，且浪費(fèi)流量，沒能達(dá)到離線 web 應(yīng)用的順滑操作體驗(yàn)。愛掏網(wǎng) - it200.com針對(duì)此問題，移動(dòng)端和服務(wù)端均需做出調(diào)整。愛掏網(wǎng) - it200.com
前面我們講到了，在客戶端一側(cè)，針對(duì)圖片適配器我們?cè)O(shè)置了 glide 圖庫，且修改了緩沖配置。愛掏網(wǎng) - it200.com而針對(duì)靜態(tài)頁面的加載，weex 的支撐模塊是 WXHttpManager 和 WXOkHttpDispatcher。愛掏網(wǎng) - it200.com如下圖所示：
對(duì) defaultOkHttpClient 進(jìn)行緩沖路徑和大小的配置。愛掏網(wǎng) - it200.com 在服務(wù)端一側(cè)，配上 Etag 策略，如果不支持則配置較老的 Last-Modified+If-Modified-Since 策略。愛掏網(wǎng) - it200.com其實(shí)現(xiàn)效果如下：
第一次請(qǐng)求:
-
客戶端發(fā)起 HTTP GET 請(qǐng)求一個(gè)文件。愛掏網(wǎng) - it200.com
-
服務(wù)器處理請(qǐng)求，返回文件內(nèi)容和 Headers，當(dāng)然包括 Etag(如"2e681a-6-5d044840")，狀態(tài)碼 200。愛掏網(wǎng) - it200.com
第二次請(qǐng)求：
-
客戶端發(fā)起 HTTP GET 請(qǐng)求同一個(gè)文件，這個(gè)時(shí)候客戶端會(huì)附帶一個(gè) If-None-Match 頭，這個(gè)頭的內(nèi)容就是第一次請(qǐng)求時(shí)服務(wù)器返回的 Etag：2e681a-6-5d044840。愛掏網(wǎng) - it200.com
-
服務(wù)器判斷發(fā)送過來的 Etag 和按云端文件計(jì)算出來的 Etag 匹配，說明靜態(tài)資源未變更，直接返回 304，通知客戶端繼續(xù)使用本地緩存。愛掏網(wǎng) - it200.com
需要補(bǔ)充的是，對(duì)于網(wǎng)絡(luò)請(qǐng)求失敗或是緩沖加載失敗的情況，本地需要掛接回調(diào)方法處理，并定制加載失敗頁面，讓用戶在失敗頁面有機(jī)會(huì)點(diǎn)擊刷新按鈕進(jìn)行重試。愛掏網(wǎng) - it200.com
（五）開放接口和接口權(quán)限控制
weex 引擎加載的頁面包括 weex 和 H5 兩種，針對(duì) H5 頁面，通過 Javascript Interface 我們掛接與其他 H5 應(yīng)用相同的一套開發(fā)接口。愛掏網(wǎng) - it200.com
這些是一部分我們給 H5 提供的開放接口，通過 WXSDKEngine.registerModule() 我們還另行包裝了一份給 weex 調(diào)用。愛掏網(wǎng) - it200.com考慮到部分接口涉及用戶隱私，如果應(yīng)用內(nèi)有要使用這部分接口，在應(yīng)用啟動(dòng)時(shí)需要像微信一樣有用戶授權(quán)。愛掏網(wǎng) - it200.com
（六）打通 Native、weex、H5 的登陸憑證
我們應(yīng)用的登陸憑證是保存在 Cookie 當(dāng)中的，所以在 Native、weex、H5 中打通登陸憑證，實(shí)現(xiàn)單點(diǎn)登錄（Single SignOn）我們做了以下幾件事：
1. 包裝一個(gè) CookieManager，實(shí)現(xiàn) cookie 的讀寫接口以兼容新老版本。愛掏網(wǎng) - it200.com
2. 進(jìn)程初始化時(shí)，初始化 CookieManager；賬號(hào)登出時(shí)，移除 Cookies。愛掏網(wǎng) - it200.com
3. 在 WebView 頁面加載成功的回調(diào)，增加 Cookie 強(qiáng)制持久化寫入的邏輯。愛掏網(wǎng) - it200.comWeex WebView 也增加相同邏輯。愛掏網(wǎng) - it200.com
4. 在 Http 請(qǐng)求、文件傳輸接口處增加 Cookie 的讀寫邏輯，特別要注意的是對(duì)重定向請(qǐng)求的處理，需要掛接自己的回調(diào)方法，讀寫 Cookie。愛掏網(wǎng) - it200.comWeex 對(duì)應(yīng)的 HttpAdapter 和文件傳輸接口也需做相同修改。愛掏網(wǎng) - it200.com
（七）升級(jí)策略
無論是通過 WXSDKEngine.registerModule() 注冊(cè)的接口還是通過 WXSDKEngine.registerComponent() 注冊(cè)的組件，都是在迭代版本中逐步添加進(jìn)去的。愛掏網(wǎng) - it200.com考慮到兼容性，就存在一部分老版本客戶端無法使用當(dāng)前 weex 頁面部分功能的問題，所以在 weex 頁面需要增加平臺(tái)最小版本號(hào)的控制邏輯，當(dāng)客戶端版本低于接口所需的最小版本時(shí)，要提示用戶升級(jí)。愛掏網(wǎng) - it200.com
因?yàn)橛脩羰强梢赃x擇忽略升級(jí)的，在每個(gè)組件和開放接口的使用點(diǎn)，也需要增加保護(hù)，無法使用時(shí)應(yīng)提示是版本過低不支持的原因。愛掏網(wǎng) - it200.com
（八）錯(cuò)誤的云監(jiān)測(cè)
在 Native 可以通過接口 IWXRenderListener 中的 onException 回調(diào)方法監(jiān)測(cè) render error、js exception、network error 等。愛掏網(wǎng) - it200.com在 Weex 頁面，則需要通過開放接口上報(bào)錯(cuò)誤錯(cuò)誤。愛掏網(wǎng) - it200.com這些錯(cuò)誤最后都通過 Native 接口上報(bào)到云端，做到對(duì)用戶問題的實(shí)時(shí)監(jiān)控。愛掏網(wǎng) - it200.com
（九）屏幕適配
Weex 是固定以 750px 作為虛擬屏幕寬度的，所有控件的實(shí)際大小要根據(jù)設(shè)備的屏幕大小進(jìn)行等比縮放。愛掏網(wǎng) - it200.com例如，當(dāng)一個(gè)按鈕的尺寸在頁面中設(shè)定為 60x100px，而屏幕實(shí)際寬度為 1080px，那么按鈕的顯示寬度則為 60x1080/750 = 86px，高度則為 100x1080/750 = 144px。愛掏網(wǎng) - it200.com
（十）引擎升級(jí)和平臺(tái)兼容性的坑
作為一款需要商用的應(yīng)用，在集成了 weex 引擎后，面臨引擎升級(jí)的問題，尤其在阿里官方迭代版本較密集的現(xiàn)狀下。愛掏網(wǎng) - it200.com強(qiáng)烈建議慎重升級(jí)！在引擎升級(jí)后要對(duì)已上線的應(yīng)用做回歸測(cè)試，我們?cè)庥龅降膶?shí)際狀況是引擎升級(jí)支持了一些新功能，卻把部分老控件、老接口、老頁面給搞壞了。愛掏網(wǎng) - it200.com例如：
1. 引擎升級(jí)到 16 版本 Android 端取系統(tǒng)時(shí)間接口，未攜帶當(dāng)前時(shí)區(qū)偏移，到了 18 版本又好了。愛掏網(wǎng) - it200.com
2. 18 版本 IOS 橫向翻頁的頁面切換效果會(huì)有垂直方向偏移。愛掏網(wǎng) - it200.com
3. vue 本身是支持 v-model 給 Input 來賦值的，Android 端的引擎升級(jí)到 18 之后這塊功能突然又不支持了。愛掏網(wǎng) - it200.com
Weex 引擎還存在一些平臺(tái)兼容性的坑，例如：
1. 頁面恢復(fù)的廣播事件，IOS 和 Android 不一致，Android 的事件名叫 WXApplicationDidBecomeActiveEvent，IOS 的叫 viewWillAppear。愛掏網(wǎng) - it200.com
2. 在做自定義組件的時(shí)候，需要頁面上蓋了一個(gè)蒙板控件，如果蒙板里沒有內(nèi)容，在 Android 端，蒙板不會(huì)消耗 Touch 事件，在 IOS 端，蒙板會(huì)消耗 touch 事件。愛掏網(wǎng) - it200.com為了解決這個(gè)問題，當(dāng)蒙板上無內(nèi)容的時(shí)候，需要把 IOS 端蒙板的透明度改成全透明。愛掏網(wǎng) - it200.com
3.http://weex.apache.org/cn/guide/use-vue.html 中列舉了一些 vue 支持，而 weex 暫不支持的情況，這個(gè)一開始我們也沒注意到。愛掏網(wǎng) - it200.com
Weex 是一個(gè)新的開發(fā)框架，在技術(shù)革新的浪潮中，我們一方面要勇于嘗試這樣的新技術(shù)。愛掏網(wǎng) - it200.com另一方面，也要通過軟件過程控制的方法來確保應(yīng)用交付的穩(wěn)定，實(shí)事求是、因地制宜的解決使用中面臨的具體問題和挑戰(zhàn)。愛掏網(wǎng) - it200.com軟件工程學(xué)本身就是實(shí)踐者的研究方法，唯有邊實(shí)踐邊總結(jié)，才能在技術(shù)變革中始終不落下風(fēng)。愛掏網(wǎng) - it200.com
原文發(fā)布時(shí)間為：2024-06-7 本文作者：陳思佳 本文來自和通數(shù)據(jù)庫合作伙伴“淘寶技術(shù)”，了解相關(guān)信息可以關(guān)注“淘寶技術(shù)”。愛掏網(wǎng) - it200.com