Weex 剛剛開源，非常幸運(yùn)能在 Weex 團(tuán)隊(duì)實(shí)習(xí)，也見證了 Weex 正式開源的夜晚，作為一名 Androider，當(dāng)然是萬分激動。近三個(gè)月的實(shí)習(xí)過程，Weex Android 的源碼也搗騰了不少，寫篇文章紀(jì)念一下~ 寫的不對的地方，還望各大神指點(diǎn)迷津！

PS：這里只對 Weex Android 源碼進(jìn)行分析。

---

一、Weex第一眼

• A framework for building Mobile cross-platform UI (一款輕量級的移動端跨平臺動態(tài)性技術(shù)解決方案)
• 通過 Html 搭建組件結(jié)構(gòu)，flexbox 負(fù)責(zé)界面布局， Js 控制數(shù)據(jù)和邏輯
• 相比 RN，Weex 真正做到了 write once run anywhere
• RN 可以認(rèn)為是一個(gè)全新的跨平臺移動開發(fā)框架，比較重，適合一個(gè)完整應(yīng)用的開發(fā)；而 Weex 是為了增強(qiáng)移動端動態(tài)性而生的輕量級框架，具有極強(qiáng)的可擴(kuò)展性，能夠比較容易的融入成熟的Native項(xiàng)目中。
• 跟 QZone 的前輩聊到過 RN，QZone 接入 RN 后，總體性能還不如原來騰訊的 Webview 方案，而 Weex 在加載性能上是要占優(yōu)勢的。

二、Weex的重要器官

1、WXDomObject

• DomObject 包括了 <template> 在 Dom 樹中的所有信息，如 style、attr、event、ref（結(jié)點(diǎn)的唯一標(biāo)識符）、parent、children

2、WXComponent

• Component 負(fù)責(zé)承載 Native View，可以通過泛型指定承載 View的類型：

abstract class WXComponent{};

class WXListComponent extends WXVContainer{};

• Component 會保留 DomObject 的強(qiáng)引用，兩者實(shí)例是一一對應(yīng)的。

• 通過調(diào)用 initComponentHostView 創(chuàng)建 Component 需要承載的 View，所有 的Component 必須重寫 initComponentHostView 方法，返回需要承載的 View 的最外層容器。如下：

class WXBaseRefresh extends WXVContainer {

@Override
protected WXFrameLayout initComponentHostView(Context context) {
return new WXFrameLayout(context);
}
}

3、WXModule：

• 通過 Module 可以將 Native Api 暴露給Js。

4、WXSDKInstance

• Weex 的渲染單位。

• 明確兩個(gè)容器的概念：

  • Instance RootView: Weex 最外層容器， Native 接入方可以設(shè)置 Instance RootView 大小, 最終通過 onViewCreated 返回給用戶的View也就是 Instance RootView。
  • JS Root: JS 可以描述的最外層容器， 為 RootView 的唯一子節(jié)點(diǎn)， 受 JS 樣式的控制。

• Instance 寬高設(shè)置遵循以下幾個(gè)原則

  • Instance RootView 的寬高優(yōu)先遵循 instance 設(shè)置的寬高，如果開發(fā)者沒有設(shè)置，則與 JS Root 節(jié)點(diǎn)的寬高保持一致。
  • JS Root 節(jié)點(diǎn)的寬高優(yōu)先遵循 CSS 樣式設(shè)置的寬高，如果沒有設(shè)置，則使用 instance 上設(shè)置的寬高，如果 instance 也沒有設(shè)置，則使用 layout 出來的寬高
  • 特殊情況，當(dāng) scroller 和 list 作為 JS Root 時(shí)，如果不設(shè)置高度, 會給 scroller 和 list 設(shè)置 flex:1
  • 綜上所述，Instance RootView 和 JS Root 的寬高可以不一致，應(yīng)該根據(jù)需求正確的設(shè)置 Instance 的寬高，也可以在運(yùn)行時(shí)動態(tài)的改變 Instance 的寬高。

---

三、Weex工作原理

1、渲染原理

• .we文件由 <template> 、 <style> 、 <script> 三部分組成；首先，transformer 會將 .we 文件轉(zhuǎn)換成 Js Bundle，JSFramework 根據(jù) Js Bundle 生成 Virtual Dom，根據(jù)Virtual Dom 控制 Native 的視圖層；首次渲染時(shí)，會將所有結(jié)點(diǎn)都交給 Native Render 渲染，在 UI 更新時(shí)，計(jì)算出最小 dif，讓 Native 僅渲染發(fā)生改變的結(jié)點(diǎn)。

2、派發(fā)渲染指令的樞紐：WXDomModule

• 上面提到，JSFramework 根據(jù) Virtual Dom 計(jì)算出來的 dif，將渲染指令（Json）通過 Js Engine 發(fā)送給 Native Render 進(jìn)行渲染。而 WXDomModule 會接收到所有渲染指令，然后將指令post 給 DomHandler，最后由 DomHandler 來派發(fā)渲染任務(wù)。
• DomStatement 在 Dom 線程中創(chuàng)建 DomObject 和 Component，RenderStatement 負(fù)責(zé)在 UI 線程中渲染 View；每個(gè) WXSDKInstance 會持有一個(gè) DomStatement 和 RenderStatement 實(shí)例。
• RenderStatement 會從 DomStatementclone 一份 DomObject，是為了避免兩個(gè)線程同時(shí)操作 Dom 造成的同步問題。
• 主要有如下指令：
• createBody：DomStatement 首先在 Dom 線程中創(chuàng)建 JS Root 對應(yīng)的 Component，然后會將 JS Root 添加到 WXSDKInstance 作為 GodCom 的子節(jié)點(diǎn)，從而生成 Component 樹的最頂端。生成 Component 樹后，將 createBody 任務(wù) post 到 UI 線程，由 RenderStatement 創(chuàng)建 WXSDKInstance 的 Rootview，并通過 onViewCreated 回調(diào)給 WXSDKInstance 的上下文。
• addElement：首先，DomStatement 在 Dom 線程中創(chuàng)建 DomObject 和對應(yīng)的 Component 實(shí)例，加入 Dom 樹和 Component 樹；然后將 addElement 任務(wù) post 到 UI 線程，RenderStatement 會觸發(fā) Component 完成以下任務(wù)： createView（初始化 Component 承載的 View）、applyLayoutAndEvent（觸發(fā) setLayout 和 setPadding、綁定 Event）、bindData（給 View 設(shè)置 style、attr）、addChild（將 View 加入 View 樹）
• removeElement：是 addElement 的逆向操作，將 View、Component、DomObject 分別從各自的樹中刪除，并銷毀數(shù)據(jù)回收資源。
• moveElement：將 View、Component、DomObject 在樹中移動位置，move 操作最終被拆分成一次 remove 操作和一次 add 操作。
• addEvent：綁定事件。
• removeEvent：撤銷事件綁定。
• updateAttrs：當(dāng)結(jié)點(diǎn) attr 被改變時(shí)，會觸發(fā) updateAttrs，最終會觸發(fā) WXComponent 中的 updateProperties 刷新 UI。
• updateStyle：與 updateAttrs 類似。
• createFinish：JsFramework 將所有渲染指令都發(fā)出后，會觸發(fā) createFinish，最后會觸發(fā) onRenderSuccess 回調(diào)。
• updateFinish：JsFramework 將所有 update 指令發(fā)出后，會觸發(fā) updateFinish，最后會觸發(fā) onUpdateFinish 回調(diào)。

3、Js與Native的通信方式

（1）Js調(diào)用Native

• Js 調(diào)用 Native 必須以 Module 的方式實(shí)現(xiàn)，@WXModuleAnno 注解會將 Module 方法暴露給Js。

• Js 調(diào)用 Module 方法：

  this.$call('modal', 'toast', {'message': 'naviBar.rightItem.click','duration': duration});
• modal 是 Module 名字，toast 是 Module 的方法名。

• Js 調(diào)用 Native 方法，均通過如下方式完成：

  WXModuleManager.callModuleMethod(instanceId, (String) task.get(WXDomModule.MODULE),(String) task.get(WXDomModule.METHOD), (JSONArray) task.get(WXDomModule.ARGS));

static boolean callModuleMethod(String instanceId, String moduleStr, String methodStr, JSONArray args) {//通過 ModuleFactory 拿到 module 的實(shí)例ModuleFactory factory = sModuleFactoryMap.get(moduleStr);final WXModule wxModule = findModule(instanceId, moduleStr, factory);wxModule.mWXSDKInstance = WXSDKManager.getInstance().getSDKInstance(instanceId);/**** 通過反射拿到方法和參數(shù)，構(gòu)造 Invoker 對象*/Map<String, Invoker> methodsMap = factory.getMethodMap();final Invoker invoker = methodsMap.get(methodStr);invoker.invoke(wxModule, params);}

（2）Native 調(diào)用 Js 之 fireEvent

• fireEvent 一般在 Component 中使用，多用于事件監(jiān)聽

  WXSDKManager.getInstance().fireEvent(mInstanceId, getRef(), WXEventType.ONCLICK);
• 第一個(gè)參數(shù)表示其所在 WXSDKInstance 的 id，第二個(gè)參數(shù)是 Component 的 ref（唯一標(biāo)識），第三個(gè)參數(shù)是事件名稱。

<text onclick="onclick">weex</text> <script>module.exports = {methods: {onclick: function(param) {param.x;param.y;},}}</script>

（3）Native調(diào)用Js之JSCallback

• JSCallback 一般在 Module 中使用，可以參考 WXStreamModule 的實(shí)現(xiàn)

  @WXModuleAnno public void fetch(String optionsStr, final JSCallback callback) {Options.Builder builder = new Options.Builder().setMethod("GET").setUrl(url);extractHeaders(headers, builder);final Options options = builder.createOptions();sendRequest(options, new ResponseCallback() {@Overridepublic void onResponse(WXResponse response, Map<String, String> headers) {if (callback != null) {Map<String, Object> resp = new HashMap<>();resp.put(STATUS, response.statusCode);resp.put("ok", (code >= 200 && code <= 299));......resp.put(STATUS_TEXT, Status.getStatusText(response.statusCode));resp.put("headers", headers);callback.invoke(resp);}}}); }
• 在 callModuleMethod 中已經(jīng)將 JSCallback 與 instanceIs、callbackId 封裝成 SimpleJSCallback，只需調(diào)用 invoke，傳入?yún)?shù)即可。

• 那么 JS 這邊又該如何接收回調(diào)呢？

  stream.fetch({ method: 'GET', url: GET_URL, }, function(ret) { if(!ret.ok){me.getResult = "request failed"; }else{console.log('get:'+ret);me.getResult = ret.data; } });

---

四、存在的問題

• List 是業(yè)務(wù)中較為常用的容器，而 Weex Android 的 List 是通過 原生的 RcyclerView 實(shí)現(xiàn)的，由于 RecyclerView 的復(fù)用機(jī)制，給 List 組件帶來了不少坑，這里主要說下我在開發(fā)中碰到的幾個(gè)例子。

1、RecyclerView原理

• 首先簡單介紹一下 RecyclerView 的復(fù)用原理~

• Recycler 是 RecyclerView 中管理組件復(fù)用的核心內(nèi)部類，而 Recycler 中有幾個(gè)重要的成員變量：

  • mCachedViews：剛剛從屏幕中滑出的 ViewHolder，且 bind 的數(shù)據(jù)未修改，會緩存在 mCachedViews 中 , mCachedViews 中的 ViewHolder 隨時(shí)可以重新顯示在屏幕上而不需要重新 bindData；針對每一種 ViewType 的 ViewHolder，緩存的數(shù)量默認(rèn)為2
  • mAttachedScrap、mChangedScrap：mCachedViews 中被修改過的臟塊，會轉(zhuǎn)移到 scrap 中（Attached 和 Changed 的區(qū)別僅僅在于對 itemAnimation 的支持，這里不展開說了，統(tǒng)稱為 scrap）；scrap 中的 ViewHolder，如要重新顯示在屏幕上，需要重新 bindData。
  • RecycledViewPool：RecycledViewPool 是可以支持多個(gè) RecyclerView 共享的 ViewHolder 緩存池，當(dāng) mCachedViews 或 scrap 滿了之后，會將末尾的元素移動到 RecycledViewPool 中，這里可以理解為分級緩存。RecyclerViewPool 里有兩個(gè)成員變量，SparseArray> mScrap 和 SparseIntArray mMaxScrap，mScrap 根據(jù) ViewType 對 ViewHolder 進(jìn)行二級索引存儲；mMaxScrap 表示每一類 ViewType 的允許緩存 ViewHolder 的最大數(shù)量；但是 RecycledViewPool 并沒有對不同 ViewType 的數(shù)量進(jìn)行限制，所以這里會涉及到一些坑，下面展開說明。

2、Cell復(fù)用存在的問題

• 在 Android 中，RecyclerView 提供了復(fù)用機(jī)制來減少內(nèi)存開銷、提升滑動效率，Weex 中 List 也暴露出相應(yīng)的 API 支持 Cell 復(fù)用：設(shè)置相同 scopeValue 的 Cell 支持 ViewHolder 復(fù)用。但是，List 在對 scopeValue 的支持上，還存在一些問題：

（1）Cell 使用 if 控制子元素發(fā)生 crash

• Cell 復(fù)用的前提條件是 view 層級和布局完全一致，如果使用 if 控制 Cell 子元素的可見性，可能導(dǎo)致復(fù)用時(shí)舊 Cell 和新 Cell 結(jié)構(gòu)不一致，在重新 bindData 時(shí)產(chǎn)生 crash。

（2）Cell 復(fù)用后產(chǎn)生文字截?cái)?/strong>

• 為了提升滑動效率，Cell 被復(fù)用時(shí)不會觸發(fā) setLayout，如果在 Cell 子元素中含有不定寬度的 text 組件，復(fù)用后不會重新計(jì)算 text 寬度，所以導(dǎo)致文字截?cái)唷?/li>
• 建議： 目前 List 對 scopeValue 的支持還不夠完善，使用時(shí)要多加注意，前端應(yīng)該遵循“Cell 可復(fù)用的前提是 view 層級和布局完全一致”的規(guī)則，對于內(nèi)部結(jié)構(gòu)不確定、樣式可能發(fā)生變化的 Cell 不要進(jìn)行復(fù)用；如果使用得當(dāng)，scopeValue 還是很強(qiáng)大的~

3、Cell 內(nèi)存泄露

• 由于 Weex 重寫了 Recycler.ViewHolder，使得 ViewHolder 持有 Cell 的強(qiáng)引用，由于 RecyclerView 會將 ViewHolder 緩存在 RecycledViewPool 中，導(dǎo)致 Cell 被 remove 后，無法被 JVM 回收，導(dǎo)致 Cell 樹內(nèi)存泄漏；這個(gè)問題在 0.7.0 中已經(jīng)修復(fù)，ViewHolder 持有 Cell 的軟引用，List 持有 Cell 的強(qiáng)引用，可以保證 Cell 在正確的時(shí)機(jī)被回收。

4、無用的 ViewHolder 緩存

• 如果不指定 Cell 的 scopeValue，會使得每一個(gè) Cell 都有不同的 ViewType，之前提到 RecycledViewPool 不限制不同類型的 ViewHolder，所以這里會導(dǎo)致 ViewHolder 不限數(shù)量的緩存堆積在 RecycledViewPool 中，而且根本不會參與復(fù)用，所以理解為“無用的緩存”。在 v0.7.0 中解決了這個(gè)問題，限制了不同 ViewType 在 RecycledViewPool 中緩存的數(shù)量；由于 Cell 和 Cell 中承載的 View 都會保存在內(nèi)存中，可以省去 Component 創(chuàng)建，所以 ViewHolder 的創(chuàng)建耗時(shí)不多。
• v0.6.1：Cell 被 RecyclerView 緩存池引用
  
• v0.6.1：內(nèi)存情況
  
• v0.7.0：內(nèi)存情況（可以明顯看到內(nèi)存被釋放的過程）
  

5、Weex 中 ViewHolder 創(chuàng)建過程存在的問題

• 當(dāng) RecyclerView 在緩存中找不到合適的 ViewHolder 復(fù)用時(shí)，會調(diào)用 onCreateViewHolder 創(chuàng)建新的 ViewHolder；Weex 繼承 RecyclerView.ViewHolder 實(shí)現(xiàn)了自己的ListBaseViewHolder，將 Cell 作為 ViewHolder 的成員變量，所以在 onCreateViewHolder 創(chuàng)建 ViewHolder 的時(shí)候，需要找到一個(gè)“ViewType一致，且沒有被 ViewHolder 綁定過”的 Cell 與其關(guān)聯(lián)。
• 在 v0.6.1 中，查找方式是遍歷所有的 Cell，直到找到合適的那個(gè)，這樣存在一個(gè)問題，當(dāng) List 元素特別多的時(shí)候，查找過程的性能消耗會有一些劣勢：

for (int i = 0; i < childCount(); i++) {WXComponent component = getChild(i);if (component == null || component.isUsing() || getItemViewType(i) != viewType)continue;....... }

• 在 v0.7.0 中，做了相應(yīng)優(yōu)化，與 RecyclerView 的緩存池使用同一種查找方式，也就是根據(jù) ViewType 對 Cell 做分類的二級索引，這樣就避免了多余的循環(huán)。

ArrayList<WXComponent> mTypes = mViewTypes.get(viewType); ....... for (int i = 0; i < mTypes.size(); i++) {WXComponent component = mTypes.get(i);if (component == null || component.isUsing()) {continue;}....... }private int generateViewType(WXComponent component) {long id;try {id = Integer.parseInt(component.getDomObject().ref);String type = component.getDomObject().attr.getScope();if (!TextUtils.isEmpty(type)) {if (mRefToViewType == null) {mRefToViewType = new ArrayMap<>();}if (!mRefToViewType.containsKey(type)) {mRefToViewType.put(type, id);}id = mRefToViewType.get(type);}} catch (RuntimeException e) {id = RecyclerView.NO_ID;}return (int) id; }

---

五、快速接入Weex

• sdk的接入就不贅述了，主要說下Native這邊需要的代碼配置。

1、首先創(chuàng)建 WXSDKInstance 實(shí)例

mInstance = new WXSDKInstance(this);mInstance.setImgLoaderAdapter(new ImageAdapter(this));mInstance.registerRenderListener(this);

2、實(shí)現(xiàn)渲染的監(jiān)聽接口

public class WXBaseActivity implements IWXRenderListener {}mInstance.registerRenderListener(this);

3、指定要渲染的Page

mInstance.render( TAG, // path表示需要渲染的js文件的路徑 WXFileUtils.loadFileContent(path, WXPageActivity.this), null, null, ScreenUtil.getDisplayWidth(WXPageActivity.this), ScreenUtil.getDisplayHeight(WXPageActivity.this), // 傳入WXRenderStrategy.APPEND_ASYNC表示異步渲染 WXRenderStrategy.APPEND_ASYNC);

• 這里需要說明一下，第5、6個(gè)參數(shù)是用來指定 Instance 的寬高

4、實(shí)現(xiàn)回調(diào)

@Override public void onViewCreated(WXSDKInstance instance, View view) {// 這里返回的view就是weex將我們指定path的js文件渲染出來的view }

總結(jié)

以上是生活随笔為你收集整理的Weex-初次见到你的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。