Wee可以用Vue、React（Rax）語法開發前端頁面，但是渲染出來的頁面卻可以是原生界面。以前一直只有點模糊的概念，最近終於可以靜下心相對深入的了解一下。

從IOS入手

按照官網教程weex platform add ios後，項目目錄多了很多東西，如果你是IOS開發者，就會很熟悉，Weex生成IOS相關的項目文件。

載入超時，點擊重試

在WeexDemo中，初始化了WeexSDK，並且基於bundlejs/index.js（前端項目打包後的代碼）創建了原生的view。下面將對上圖中標註的5點依次相對深入的講解。

1.JSContext

_jsContext = [[JSContext alloc] init];


上面的代碼初始化了一個JSContext對象，

JSContext對象表示JavaScript執行環境。您可以創建和使用JavaScript上下文來來執行來自Objective-C或Swift代碼的JavaScript腳本，訪問在JavaScript中定義或計算的值，以及使JavaScript可以訪問native對象、方法或函數。

上圖中是WeexSDK用native代碼對JSContext進行擴展的方法，使JS代碼調用，以callNative方法為例：

callNative被JS代碼調用並向native發送指令,例如 rendering, networking, authorizing和其他客戶端側的 toast 等API。

2._registerDefaultComponents

註冊一些原生的Components。

3._registerDefaultModules

註冊一些原生的Module，將_registerDefaultComponents方法和_registerDefaultModules方法串起來運行原理如下：

web Component註冊了3個方法並傳給前端代碼中WeexElement，當前端代碼中執行這些方法時會調用native callNativeModule方法。

4.executeJsFramework

該方法會執行WeexSDK內置的native-bundle-main.js文件。native-bundle-main.js代碼很龐大，其中內置了Vue、Rax運行時代碼又和WeexSDK緊密聯繫。

以callJS方法為例, 它用於Native向JS發送指令。

callJS (id, tasks) {
const framework = frameworks[getFrameworkType(id)]
if (framework && typeof framework.receiveTasks === function) {
return framework.receiveTasks(id, tasks)
}
return receiveTasks(id, tasks)
}


5.loadCustomContainWithScannerWithUrl

初始化UIViewController，執行「bundlejs/index.js」，渲染原生界面。

總結

把上面描述的方法再串起來如下圖所示：

開發者首先可在本地像編寫 web 頁面一樣編寫一個 app 的界面，然後通過命令行工具將之編譯成一段 JavaScript 代碼，生成一個 Weex 的 JS bundle；同時，開發者可以將生成的 JS bundle 部署至雲端，然後通過網路請求或預下發的方式載入至用戶的移動應用客戶端；在移動應用客戶端里，Weex SDK 會準備好一個 JavaScript 執行環境，並且在用戶打開一個 Weex 頁面時在這個執行環境中執行相應的 JS bundle，並將執行過程中產生的各種命令發送到 native 端進行界面渲染、數據存儲、網路通信、調用設備功能及用戶交互響應等功能。

數萬行的代碼寥寥數語很難講清楚，本文只是拋磚引玉。

推薦閱讀：

相关文章