Weex源码分析

Weex是跨平台的一种实践，令到开发者可以使用web语言来构建Android、iOS、web应用，实现一处编写，处处运行的效果，可以极大的降低人力成本，目前比较火的跨平台实践有React Native以及Flutter，weex相对小众一点，但是在功能上面也能够满足大部分的需求，而且接入也会相对简单，weex使用vue.js开发，本着知其然也知其所以然的原则，现在就来学习一下weex的源码。

Weex sdk架构

首先来看看Weex SDK的整体架构图：

以上是Weex sdk的架构图，分为两部分，功能层SDK以及相关的view组件，应用层通过WXSDKInstance去调用Weex提供的API，weex根据上层传入的URL去加载对应的js文件，并且调用v8引擎解析成相应的Android view组件，渲染在界面上。

Weex从js到native的加载过程

先用一个非常简约的图来概括一下Weex的加载过程，后面再详细细化：

那么Weex是如何把一个vue编写的文件加载到native呢，来看看示例（开发工具使用WebStorm或者借助Weex提供的官方在线工具）：

test.vue

首先写一个非常简单的例子，在界面上绘制一个文本，点击弹出一个toast提示：

<template>
  <div>
  	 <text class="text" @click="clickTest">Test Test Test</text> //创建一个text文本，类似于Android的TextView,并且添加click监听
  </div>
</template>

<script>
	 const modal = weex.requireModule('modal')

  export default {
      methods:{
            clickTest:function () { //点击text,弹出一个toast提示。
                modal.toast({
                    message: 'This is a toast',
                    duration: 0.3
                })
            }
        }
  }
</script>

<style scoped>
  .text {
    color: #41B883;
    text-align: center;
    font-size: 100px;
  }
</style>

那么我们利用weex提供的官方工具，就能够看到如下,就几行简单的代码， 就可以在iOS、Android、web应用上运行：

test.js

那么weex app是如何将一个test.vue加载到native，然后将其显示出来的呢？我们用webStorm编译test.vue文件，得到生成.js文件，.js文件主要工作在以下三个function：

//1.封装template
 (function(module, exports) {

module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
  return _c('text', {
    staticClass: ["testStyle"],
    on: {
      "click": _vm.clickTest
    }
  }, [_vm._v("Test Test Test")])
},staticRenderFns: []}
module.exports.render._withStripped = true

 })
//2.封装style
(function(module, exports) {

module.exports = {
  "testStyle": {
    "width": "200",
    "height": "100"
  }
}
//3.封装script
(function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
var modal = weex.requireModule('modal');
exports.default = {
    name: "test.vue",
    methods: {
        clickTest: function clickTest() {
            modal.toast({
                message: 'This is a toast',
                duration: 0.3
            });
        }
    }
};