Weex is also popular recently, and the company has started to use this framework, so I started to play with it. It’s not too difficult to start with, but it took a lot of time to debug. Toss over, also wrote one or two small pages, that the next to remove the WEEx wheel ~ convenient behind the use of time, what pit, I hope you can jump faster.

Let’s start with a question

If we want to in Android, without webView, through the online way, dynamically in a FrameLayout, add each seed View, display, and can also add a variety of monitoring events for each child View. How do you implement this?

We can do this:

  1. On Android, add a custom FrameLayout to the layout.
  2. Get the online configuration information of the dynamic FrameLayout. Based on this configuration information, dynamically generate seed views to add to the FrameLayout.
  3. In order to be able to respond to various listening events, you also need to add some event listening and post-listening actions to the configuration information, for example, the onClick event, post-clicking actions.
  4. In the configuration information, add some layout width and height of the child View and so on. .

So this is a little bit tricky, how do I write the configuration information? Well, we can use the Android layout XML way, quickly write out the layout of these views, and then send the XML layout to the client, the client uses the XML parser to parse the XML file, generate the corresponding child view, set the layout of each child view. In order to allow child views to add listening events and respond to them, we need to extend our XML file, customize the syntax, and add listening and handling methods for events.

Speaking of which, if you’ve ever done front-end development, you know, why not use front-end development? It happens to have layout arrangements, style definitions, listener and method definitions for various events.

Here is an H5 page written using VUE.

If you write configuration information in a front-end language, that’s fine. At least the configuration information is written in a common language, open to others, and easy to learn. Most importantly, it’s a lot easier than redefining your own grammar. Weex’s idea is similar to this, that is, vue will be used to write configuration files, in the Android layer, the configuration information will be parsed, and then dynamically generate the seed View, added to the FrameLayout we just said. Well, with that in mind, we’re going to need to see how WEEx implements this solution.

The overall framework

Just in case you start out looking at the leaves and not the forest, let’s take a look at this schematic diagram of how WEEx works.

Don’t understand, no relationship, here said, in fact, not too complicated. Let’s introduce them one by one:

The Vue File, which is the configuration information we mentioned above, can add various seed views, styles, event response methods, etc.

Vue File Transformer is the JS Bundle generated by Vue compilation. The JS Bundle is usually named xxx. JS, and the weex project compilation result directory is $weex-project-dir/dist. Why convert to JS instead of using vue directly? (Probably for file compression, the contents of other vue files will be integrated into a JS file, so that on Android, only the final JS file can be loaded.)

Server, here refers to the network through the JS file to the Android terminal, of course, this JS file, directly in the local line, let weeX SDK to load the local JS file.

JavaScript Runtime, here is parsing the js file above. Because Vue is front-end development JS framework language, relatively common, so weeX team, also make it common, can let vue project, run on H5, Android, IOS. The benefits are self-evident. In addition to parsing the layout, it can also be used to execute some methods defined on the VUE. Otherwise, some callbacks that listen for events, and some methods, do not know where to run. The JavaScript Runtime here is actually the V8 kernel provided by UC on Android.

The RenderEngine for IOS, Android, and H5 is designed to convert the js content parsed above into our specific sub-view tree, and add it to our custom FrameLayout. Why do JavaScript Runtime and RenderEngine work both ways here? This is because the layout display is rendered on each terminal, but some methods are executed in JavaScript Runtime, which involves a lot of two-way communication, so it is bidirectional.

Conclusion:

In order to dynamically add each seed view to the local custom FrameLayout, the Android side needs to parse the configuration file written with VUE and generate the corresponding child view for rendering. Since there are some function methods that need to be executed in vue, they can be executed in JavaScript Runtime.

Follow-up:

It seems that in an article, write a complete part of weeX source code analysis, a little difficult, it is still separate a few to write good, the first time in nuggets to write documents, the above is a personal understanding, write wrong place, also please point out, in order to correct, the follow-up will continue to write the rest of the analysis.