首页 » 记事本 » 浅析Weex原理

浅析Weex原理

Weex可以用Vue、React(Rax)语法开发前端页面,但是渲染出来的页面却可以是原生界面。以前一直只有点模糊的概念,最近终于可以静下心相对深入的了解一下。

从IOS入手

按照官网教程weex platform add ios后,项目目录多了很多东西,如果你是IOS开发者,就会很熟悉,Weex生成IOS相关的项目文件。

WeexDemo目录概览

WeexDemo代码概览

在WeexDemo中,初始化了WeexSDK,并且基于bundlejs/index.js(前端项目打包后的代码)创建了原生的view。下面将对上图中标注的5点依次相对深入的讲解。

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。

_registerDefaultComponents

注册一些原生的Components。

_registerDefaultModules

注册一些原生的Module,将_registerDefaultComponents方法和_registerDefaultModules方法串起来运行原理如下:

web Component注册了3个方法并传给前端代码中WeexElement,当前端代码中执行这些方法时会调用Native callNativeModule方法。

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)
}

loadCustomContainWithScannerWithUrl

初始化UIViewController,执行“bundlejs/index.js”,渲染原生界面。

总结

把上面描述的方法再串起来如下图所示:

 

开发者首先可在本地像编写 web 页面一样编写一个 app 的界面,然后通过命令行工具将之编译成一段 JavaScript 代码,生成一个 Weex 的 JS bundle;同时,开发者可以将生成的 JS bundle 部署至云端,然后通过网络请求或预下发的方式加载至用户的移动应用客户端;在移动应用客户端里,Weex SDK 会准备好一个 JavaScript 执行环境,并且在用户打开一个 Weex 页面时在这个执行环境中执行相应的 JS bundle,并将执行过程中产生的各种命令发送到 native 端进行界面渲染、数据存储、网络通信、调用设备功能及用户交互响应等功能。

此文章发表在 记事本. 将 固定链接 加入收藏.