weex最近也比较火，公司也开始使用了该框架，于是就开始玩下，入手部分不会太难，但是调试倒是折腾了不少时间。折腾完了，也写了一两个小页面，那接下来就要拆下weex这个轮子啦~ 方便后面使用的时候，有什么坑，希望可以跳的快一些。

先抛出一个问题

如果我们要在Android里，不用webview，通过在线的方式，动态的在一个FrameLayout里，添加各种子View，进行展示，并且还可以给各个子View添加各种监听事件。大家要怎么实现这样的功能呢？

我们可以这么实现：

在Android端，先在布局里添加一个自定义的FrameLayout。

获取该动态FrameLayout的在线配置信息，根据这些配置信息，动态生成各种子View，添加到这个FrameLayout上。

为了能够响应各种监听事件，那还需要在这个配置信息里，添加上一些事件监听和监听后的操作，例如，onClick事件，点击之后的操作。

配置信息里，添加上一些子View的布局宽高之类的。。。。

那这里有些难点了，配置信息该怎么写呢？恩，我们可以使用Android 布局xml的方式，快速的写出这些view的布局，然后将xml布局下发给客户端，客户端使用xml解析器将这个xml文件进行解析，生成对应的子view，设置好各子view的布局。为了能够让子View添加各种监听事件，并做响应的操作，我们需要扩展我们 xml文件，定制各种语法，添加事件的监听和处理方法。

说到这里，如果你做过前端的话，那肯定会发现，这不就使用前端开发就好了吗？正好里面就有布局的排列，样式的定义，各种事件的监听和方法的定义。

下面先来一份使用vue写的H5页面。

如果使用前端语言来编写配置信息，那也挺不错的，至少配置信息的编写，比较通用，开放给其他人使用，学习门槛也比较低。最重要的是，比自己重新定义一套语法，轻松多了。weex的思想其实和这个是类似的，也就是将用vue来写配置文件，在android 层，将这些配置信息进行解析，然后动态的生成各种子View，添加到我们刚刚说的FrameLayout上。好，记住这个思路，那我们接下来就需要看看，weex是怎么实现这种方案的。

整体框架

为了不让大家一开始就只看树叶，不见森林，我们先来看看weex官网工作原理的这张整体框架图。

看不懂，没有关系，这里说的，其实也不太复杂。下面来一一介绍下：

Vue File，就是我们上面说的配置信息，可以添加各种子View，样式，事件响应方法等。

Vue File transformer 为 JS Bundle，JS Bundle 就是vue编译生成的结果文件，一般命名是xxx.js，在weex工程的编译结果目录$weex-project-dir/dist下，这里做下为什么要转为js文件，而不直接用vue文件呢？（可能是为了做文件压缩，还会把引用的其他vue文件的内容给集成到一个js文件里，这样Android端，就可以只加载一个最终的js文件就可以了。）

server，这里是指通过网络将js文件传送到Android端，当然这个js文件，直接放在本地也行，让weex SDK去加载本地的js文件。

JavaScript Runtime，这里是在解析上面的js文件。因为vue是前端开发js框架语言，比较通用，于是weex团队，也将其做的通用一些，可以让vue项目，运行在H5，Android，IOS上。这样的好处不言而喻了。除了解析布局，还可以用来执行在vue上定义的一些方法，不然，一些监听事件的回调，以及一些方法，都不知道要在哪里运行才比较好了。这里的JavaScript Runtime，在Android端其实就是 UC 提供的 v8 内核。

IOS，Android，H5 的 RenderEngine，自然就是将上面解析的js内容，转成我们具体的子View树，加到我们上面说的自定义FrameLayout上了，进行渲染，和设置各种监听事件和方法了。为什么JavaScript Runtime和RenderEngine在这里是双向通行的？是因为布局的显示是在各终端上渲染，但是一些方法的执行，还是在JavaScript Runtime上去执行，这就涉及到很多双方通讯的情况，所以是双向的。

总结：

为了能够动态的将各种子view加在本地自定义FrameLayout中，需要Android端去解析用vue编写的配置文件，并生成对应的子View进行渲染。由于vue中有一些函数方法需要执行，可以在JavaScript Runtime里执行。

后续：

看来在一篇文章里，写完全部的weex 源码解析，有点难度，那还是分开几篇来写好了，第一次在掘金上写文档，以上是个人的理解，写得有误的地方，还请指出，以便更正，后续会继续写完剩下的解析。