Weex Android SDK源码分析

最新推荐文章于 2024-05-14 09:59:47 发布
最新推荐文章于 2024-05-14 09:59:47 发布
阅读量427 收藏 1
点赞数
文章标签： 移动开发 java json
原文链接：https://yq.aliyun.com/articles/66835
版权

前言

最近开始试水Weex开发，使用这么长一段时间，感觉写Weex还是非常方便的。作为一个Android开发，免不了要追查一下weex的sdk源码。今天，就以Weex SDK for Android为例，分析SDK的

认识Weex SDK

源码:https://github.com/alibaba/weex/tree/dev/android

整体分析下拉，按照js文件的渲染过程，绘制出了下面架构图：

sdk_framework

WEEX文件渲染过程

为了更加详细的说明整个渲染过程，我对源码进行了分析。并结合示例，进行了日志分析；比如，我们要开发如下一个简单的组件(红色方框内)：

demo

那么，我们的wxc-title.we源码为：

<!-- wxc-title.we created by mochuan.zhb-->
<template>
    <div class="container">
        <image class="image" src="{{item.pic}}"></image>
        <text class="text">{{item.name}}</text>
    </div>
</template>

<style>
    .container {
        position: relative;
        flex-direction: row;
        width: 750px;
        height: 60px;
        align-items: center;
    }
    .image {
        margin-left: 100px;
        width: 45px;
        height: 45px;
    }
    .text {
        margin-left: 10px;
        font-size: 28px;
        color: #444444;
    }
</style>

<script>
    module.exports = {
        data: {
            item: {
                pic: '//img.alicdn.com/tfs/TB1AEcQNXXXXXX8XXXXXXXXXXXX-50-50.png',
                name: '当地玩乐'
            }
        },
        methods: {

        }
    }
</script>

上述.we文件经过weex编译之后，生成的js文件，经过格式化如下：

...
([function (module, exports) {
    module.exports = {
        "type": "div",
        "classList": [
            "container"
        ],
        "children": [
            {
                "type": "image",
                "classList": [
                    "image"
                ],
                "attr": {
                    "src": function () {
                        return this.item.pic
                    }
                }
            },
            {
                "type": "text",
                "classList": [
                    "text"
                ],
                "attr": {
                    "value": function () {
                        return this.item.name
                    }
                }
            }
        ]
    }
}, function (module, exports) {

    module.exports = {
        "container": {
            "position": "relative",
            "flexDirection": "row",
            "width": 750,
            "height": 60,
            "alignItems": "center"
        },
        "image": {
            "marginLeft": 100,
            "width": 45,
            "height": 45
        },
        "text": {
            "marginLeft": 10,
            "fontSize": 28,
            "color": "#444444"
        }
    }
}, function (module, exports) {
        module.exports = function (module, exports, __weex_require__) {
            'use strict';
            module.exports = {
                data: function () {
                    return {
                        item: {
                            pic: '//img.alicdn.com/tfs/TB1AEcQNXXXXXX8XXXXXXXXXXXX-50-50.png',
                            name: '当地玩乐'
                        }
                    }
                },
                methods: {}
            };
        }
    }
]);

上述分别使用了三个function，对template、style和script进行了封装；那么，这个文件是怎么被weex sdk执行并解析，最终生成结构化的View的呢？

渲染过程

时序图1：

从扫码开始，首先经历如下过程；依次经过readerPage，createInstance，一直到WXBridge的exeJs方法；也就是说，最终，Java通过调用native的exeJs方法，来执行js文件的。


https://i-blog.csdnimg.cn/blog_migrate/d9220de876e9c1d4d4e5fbb2b16a50f5.png

时序图2：

紧接着时序图1：执行到JNI层的Java_com_taobao_weex_bridge_WXBridge_execJS方法;


https://i-blog.csdnimg.cn/blog_migrate/58dcd88b1cffa26f092fce47205f3c48.png


然后js通过native调用WXBridge的callNative方法，达到js调用Java代码的目的；

JNI层的部分代码如下：

jint Java_com_taobao_weex_bridge_WXBridge_execJS(JNIEnv *env, jobject this1, jstring jinstanceid,
                                                 jstring jnamespace, jstring jfunction,
                                                 jobjectArray jargs) {

    v8::HandleScope handleScope;
    v8::Isolate::Scope isolate_scope(globalIsolate);
    v8::Context::Scope ctx_scope(V8context);
    v8::TryCatch try_catch;
    int length = env->GetArrayLength(jargs);
    v8::Handle<v8::Value> obj[length];

    jclass jsObjectClazz = (env)->FindClass("com/taobao/weex/bridge/WXJSObject");
    for (int i = 0; i < length; i++) {
        jobject jArg = (env)->GetObjectArrayElement(jargs, i);

        jfieldID jTypeId = (env)->GetFieldID(jsObjectClazz, "type", "I");
        jint jTypeInt = env->GetIntField(jArg, jTypeId);

        jfieldID jDataId = (env)->GetFieldID(jsObjectClazz, "data", "Ljava/lang/Object;");
        jobject jDataObj = env->GetObjectField(jArg, jDataId);
        if (jTypeInt == 1) {
            jclass jDoubleClazz = (env)->FindClass("java/lang/Double");
            jmethodID jDoubleValueId = (env)->GetMethodID(jDoubleClazz, "doubleValue", "()D");
            jdouble jDoubleObj = (env)->CallDoubleMethod(jDataObj, jDoubleValueId);
            obj[i] = v8::Number::New((double) jDoubleObj);
            env->DeleteLocalRef(jDoubleClazz);
        } else if (jTypeInt == 2) {
            jstring jDataStr = (jstring) jDataObj;
            obj[i] = jString2V8String(env, jDataStr);
        } else if (jTypeInt == 3) {
            v8::Handle<v8::Value> jsonObj[1];
            v8::Handle<v8::Object> global = V8context->Global();
            json = v8::Handle<v8::Object>::Cast(global->Get(v8::String::New("JSON")));
            json_parse = v8::Handle<v8::Function>::Cast(json->Get(v8::String::New("parse")));
            jsonObj[0] = jString2V8String(env, (jstring) jDataObj);
            v8::Handle<v8::Value> ret = json_parse->Call(json, 1, jsonObj);
            obj[i] = ret;
        }
        env->DeleteLocalRef(jDataObj);
        env->DeleteLocalRef(jArg);
    }
    env->DeleteLocalRef(jsObjectClazz);

    const char *func = (env)->GetStringUTFChars(jfunction, 0);
    v8::Handle<v8::Object> global = V8context->Global();
    v8::Handle<v8::Function> function;
    v8::Handle<v8::Value> result;
    if (jnamespace == NULL) {
        function = v8::Handle<v8::Function>::Cast(global->Get(v8::String::New(func)));
        result = function->Call(global, length, obj);
    }
    else {
        v8::Handle<v8::Object> master = v8::Handle<v8::Object>::Cast(
                global->Get(jString2V8String(env,jnamespace)));
        function = v8::Handle<v8::Function>::Cast(
                master->Get(jString2V8String(env,jfunction)));
        result = function->Call(master, length, obj);
    }
    if (result.IsEmpty()) {
        assert(try_catch.HasCaught());
        ReportException(globalIsolate, &try_catch, jinstanceid, func);
        env->ReleaseStringUTFChars(jfunction, func);
        env->DeleteLocalRef(jfunction);
        return false;
    }
    env->ReleaseStringUTFChars(jfunction, func);
    env->DeleteLocalRef(jfunction);
    return true;
}
}

详细代码，可参见github：https://github.com/alibaba/weex_v8core/blob/master/jni/v8core/com_taobao_weex_bridge_WXBridge.cpp

时序图3：createBody&generateComponentTree

接着上面的时序图，开始做页面的创建；关键的代码在WXRenderStatement中的createBodyOnDomThread，该方法通过创建跟布局的mGodComponent,通过递归generateComponentTree生成Component的逻辑树结构;然后，在WXRenderStatement的createBody方法中，生成View，绑定属性和数据；具体如下图所示：


https://i-blog.csdnimg.cn/blog_migrate/98f9cc1ff10d1a09e51088fdef55289f.png

时序图4：addElement



https://i-blog.csdnimg.cn/blog_migrate/b9bdc35d9f5c440503ecf926c6ed5621.png

时序图5：callNative调用Module



https://i-blog.csdnimg.cn/blog_migrate/930efb9fa02451d87c58477f684a8a7b.png

调用过程日志记录

以上面的weex页面为例：使用PlayGround扫码之后的调用过程中的日志为：

12-04 15:51:04.705: D/weex(30188): ###render in WXSDKInstance. pageName = WXPageActivity,template = /******/ (function(modules) { // webpackBootstrap
12-04 15:51:04.705: D/weex(30188): ###createInstance in WXSDKManager code = /******/ (function(modules) { // webpackBootstrap
12-04 15:51:04.710: D/weex(30188): ###createInstance in WXBrideManager instanceId = 3,template = /******/ (function(modules) { // webpackBootstrap
12-04 15:51:04.710: D/weex(30188): ###invokeCreateInstance in WXBrideManager instanceId = 3,template = /******/ (function(modules) { // webpackBootstrap
12-04 15:51:04.725: D/weex(30188): ###execJS instanceId = 3,namespace = null,function = createInstance,args = [{"data":"3","type":2},{"data":"/******/ (function(modules) { // webpackBootstrap\n .......
12-04 15:51:04.740: D/weex(30188): ###callNative in WXBridge instanceId = 3,tasks = [{"module":"dom","method":"createBody","args":[{"ref":"_root","type":"div","attr":{},"style":{"position":"relative","flexDirection":"row","width":750,"height":60,"alignItems":"center"}}]}],callback = -1
12-04 15:51:04.740: D/weex(30188): ###callDomMethod to create component...task = {"args":[{"attr":{},"ref":"_root","style":{"alignItems":"center","flexDirection":"row","height":60,"position":"relative","width":750},"type":"div"}],"method":"createBody","module":"dom"}
12-04 15:51:04.745: D/weex(30188): ###callDomMethod task = {"args":[{"attr":{},"ref":"_root","style":{"alignItems":"center","flexDirection":"row","height":60,"position":"relative","width":750},"type":"div"}],"method":"createBody","module":"dom"}
12-04 15:51:04.745: D/weex(30188): ###createBody element = {"attr":{},"ref":"_root","style":{"alignItems":"center","flexDirection":"row","height":60,"position":"relative","width":750},"type":"div"}
12-04 15:51:04.745: D/weex(30188): ###handleMessage in WXDomHandler...what = 0,obj = {"args":[{"attr":{},"ref":"_root","style":{"alignItems":"center","flexDirection":"row","height":60,"position":"relative","width":750},"type":"div"}],"instanceId":"3"}
12-04 15:51:04.750: D/weex(30188): ###createBodyOnDomThread in WXRenderStatement dom = layout: {left: 0.0, top: 0.0, width: 0.0, height: 0.0, direction: LTR}direction =INHERIT
12-04 15:51:04.750: D/weex(30188): ###createView in WXComponent className = WXDiv
12-04 15:51:04.755: D/weex(30188): ###generateComponentTree in WXRenderStatement component = WXDiv
12-04 15:51:04.755: D/weex(30188): ###callAddElement in WXBridge instanceId = 3,ref = _root,dom = {"ref":"153","type":"image","attr":{"src":"//img.alicdn.com/tfs/TB1AEcQNXXXXXX8XXXXXXXXXXXX-50-50.png"},"style":{"marginLeft":100,"width":45,"height":45}},index=-1,callback = -1
12-04 15:51:04.755: D/weex(30188): ###callAddElement in WXBridgeManager instanceId = 3,ref = _root,dom = {"ref":"153","type":"image","attr":{"src":"//img.alicdn.com/tfs/TB1AEcQNXXXXXX8XXXXXXXXXXXX-50-50.png"},"style":{"marginLeft":100,"width":45,"height":45}},index = -1,callback = -1
12-04 15:51:04.760: D/weex(30188): ###addElement parentRef = _root,element = {"attr":{"src":"//img.alicdn.com/tfs/TB1AEcQNXXXXXX8XXXXXXXXXXXX-50-50.png"},"ref":"153","style":{"height":45,"marginLeft":100,"width":45},"type":"image"},index = -1
12-04 15:51:04.760: D/weex(30188): ###handleMessage in WXDomHandler...what = 3,obj = {"args":["_root",{"attr":{"src":"//img.alicdn.com/tfs/TB1AEcQNXXXXXX8XXXXXXXXXXXX-50-50.png"},"ref":"153","style":{"height":45,"marginLeft":100,"width":45},"type":"image"},-1],"instanceId":"3"}
12-04 15:51:04.760: D/weex(30188): ###callAddElement in WXBridge instanceId = 3,ref = _root,dom = {"ref":"154","type":"text","attr":{"value":"当地玩乐"},"style":{"marginLeft":10,"fontSize":28,"color":"#444444"}},index=-1,callback = -1
12-04 15:51:04.765: D/weex(30188): ###callAddElement in WXBridgeManager instanceId = 3,ref = _root,dom = {"ref":"154","type":"text","attr":{"value":"当地玩乐"},"style":{"marginLeft":10,"fontSize":28,"color":"#444444"}},index = -1,callback = -1
12-04 15:51:04.765: D/weex(30188): ###addElement parentRef = _root,element = {"attr":{"value":"当地玩乐"},"ref":"154","style":{"color":"#444444","fontSize":28,"marginLeft":10},"type":"text"},index = -1
12-04 15:51:04.765: D/weex(30188): ###addDom in WXDomManager instanceId = 3,parentRef = _root,element = {"attr":{"src":"//img.alicdn.com/tfs/TB1AEcQNXXXXXX8XXXXXXXXXXXX-50-50.png"},"ref":"153","style":{"height":45,"marginLeft":100,"width":45},"type":"image"},index = -1
12-04 15:51:04.765: D/weex(30188): ###callNative in WXBridge instanceId = 3,tasks = [{"module":"dom","method":"createFinish","args":[]}],callback = -1
12-04 15:51:04.770: D/weex(30188): ###addDom in WXDomStatement dom = {"attr":{"src":"//img.alicdn.com/tfs/TB1AEcQNXXXXXX8XXXXXXXXXXXX-50-50.png"},"ref":"153","style":{"height":45,"marginLeft":100,"width":45},"type":"image"},parentRef = _root,index = -1
12-04 15:51:04.770: D/weex(30188): ###createComponentOnDomThread in WXRenderManager dom = layout: {left: 0.0, top: 0.0, width: 0.0, height: 0.0, direction: LTR}direction =INHERIT
12-04 15:51:04.770: D/weex(30188): ###createComponentOnDomThread in WXRenderStatement dom = layout: {left: 0.0, top: 0.0, width: 0.0, height: 0.0, direction: LTR}direction =INHERIT
12-04 15:51:04.770: D/weex(30188): ###generateComponentTree in WXRenderStatement component = WXImage
12-04 15:51:04.775: D/weex(30188): ###callDomMethod to create component...task = {"args":[],"method":"createFinish","module":"dom"}
12-04 15:51:04.775: D/weex(30188): ###handleMessage in WXDomHandler...what = 255,obj = null
12-04 15:51:04.775: D/weex(30188): ###callDomMethod task = {"args":[],"method":"createFinish","module":"dom"}
12-04 15:51:04.775: D/weex(30188): ###createFinish
12-04 15:51:04.775: D/weex(30188): ###handleMessage in WXDomHandler...what = 3,obj = {"args":["_root",{"attr":{"value":"当地玩乐"},"ref":"154","style":{"color":"#444444","fontSize":28,"marginLeft":10},"type":"text"},-1],"instanceId":"3"}
12-04 15:51:04.775: D/weex(30188): ###addDom in WXDomManager instanceId = 3,parentRef = _root,element = {"attr":{"value":"当地玩乐"},"ref":"154","style":{"color":"#444444","fontSize":28,"marginLeft":10},"type":"text"},index = -1
12-04 15:51:04.780: D/weex(30188): ###addDom in WXDomStatement dom = {"attr":{"value":"当地玩乐"},"ref":"154","style":{"color":"#444444","fontSize":28,"marginLeft":10},"type":"text"},parentRef = _root,index = -1
12-04 15:51:04.780: D/weex(30188): ###createComponentOnDomThread in WXRenderManager dom = layout: {left: 0.0, top: 0.0, width: 0.0, height: 0.0, direction: LTR}direction =INHERIT
12-04 15:51:04.780: D/weex(30188): ###createComponentOnDomThread in WXRenderStatement dom = layout: {left: 0.0, top: 0.0, width: 0.0, height: 0.0, direction: LTR}direction =INHERIT
12-04 15:51:04.785: D/weex(30188): ###generateComponentTree in WXRenderStatement component = WXText
12-04 15:51:04.785: D/weex(30188): ###handleMessage in WXDomHandler...what = 9,obj = {"instanceId":"3"}
12-04 15:51:04.790: D/weex(30188): ###handleMessage in WXDomHandler...what = 255,obj = null
12-04 15:51:04.820: D/weex(30188): ###createBody in WXRenderStatement component = WXDiv
12-04 15:51:04.820: D/weex(30188): ###createView in WXComponent className = WXDiv
12-04 15:51:04.820: D/weex(30188): ###applyLayoutAndEvent in WXComponent className = WXDiv
12-04 15:51:04.825: D/weex(30188): ###bindData in WXContainer 
12-04 15:51:04.825: D/weex(30188): ###bindData in WXComponent = WXDiv
12-04 15:51:04.825: D/weex(30188): ###updateProperties in props = {"alignItems":"center","backgroundColor":"#ffffff","flexDirection":"row","height":60,"position":"relative","width":750}
12-04 15:51:04.825: D/weex(30188): ###setProperty in WXComponent = WXDiv
12-04 15:51:04.825: D/weex(30188): ###setProperty in WXComponent = WXDiv
12-04 15:51:04.825: D/weex(30188): ###setProperty in WXComponent = WXDiv
12-04 15:51:04.825: D/weex(30188): ###setProperty in WXComponent = WXDiv
12-04 15:51:04.825: D/weex(30188): ###setProperty in WXComponent = WXDiv
12-04 15:51:04.830: D/weex(30188): ###setProperty in WXComponent = WXDiv
12-04 15:51:04.830: D/weex(30188): ###updateProperties in props = {}
12-04 15:51:04.830: D/weex(30188): ###addComponent in WXRenderManager instanceId = 3,component = WXImage,parentRef = _root,index = -1
12-04 15:51:04.830: D/weex(30188): ###addComponent in WXRenderStatement to start render the component to view...
12-04 15:51:04.835: D/weex(30188): ###createView in WXComponent className = WXImage
12-04 15:51:04.835: D/weex(30188): ###applyLayoutAndEvent in WXComponent className = WXImage
12-04 15:51:04.835: D/weex(30188): ###bindData in WXComponent = WXImage
12-04 15:51:04.835: D/weex(30188): ###updateProperties in props = {"height":45,"marginLeft":100,"width":45}
12-04 15:51:04.835: D/weex(30188): ###setProperty in WXComponent = WXImage
12-04 15:51:04.835: D/weex(30188): ###setProperty in WXComponent = WXImage
12-04 15:51:04.835: D/weex(30188): ###setProperty in WXComponent = WXImage
12-04 15:51:04.840: D/weex(30188): ###updateProperties in props = {"src":"//img.alicdn.com/tfs/TB1AEcQNXXXXXX8XXXXXXXXXXXX-50-50.png"}
12-04 15:51:04.840: D/weex(30188): ###addComponent in WXRenderManager instanceId = 3,component = WXText,parentRef = _root,index = -1
12-04 15:51:04.840: D/weex(30188): ###addComponent in WXRenderStatement to start render the component to view...
12-04 15:51:04.840: D/weex(30188): ###createView in WXComponent className = WXText
12-04 15:51:04.840: D/weex(30188): ###applyLayoutAndEvent in WXComponent className = WXText
12-04 15:51:04.840: D/weex(30188): ###bindData in WXComponent = WXText
12-04 15:51:04.840: D/weex(30188): ###updateProperties in props = {"color":"#444444","fontSize":28,"marginLeft":10}
12-04 15:51:04.845: D/weex(30188): ###setProperty in WXComponent = WXText
12-04 15:51:04.845: D/weex(30188): ###updateProperties in props = {"value":"当地玩乐"}
12-04 15:51:04.850: D/weex(30188): ###execJS instanceId = 3,namespace = null,function = callJS,args = [{"data":"3","type":2},{"data":"[{\"args\":[\"_root\",\"viewappear\",null,null],\"method\":\"fireEvent\"}]","type":3}]
12-04 15:51:04.850: D/weex(30188): ###callNative in WXBridge instanceId = 3,tasks = [{"module":"dom","method":"updateFinish","args":[]}],callback = -1
12-04 15:51:04.855: D/weex(30188): ###callDomMethod to create component...task = {"args":[],"method":"updateFinish","module":"dom"}
12-04 15:51:04.855: D/weex(30188): ###callDomMethod task = {"args":[],"method":"updateFinish","module":"dom"}
12-04 15:51:04.855: D/weex(30188): ###updateFinish
12-04 15:51:04.860: D/weex(30188): ###handleMessage in WXDomHandler...what = 11,obj = {"instanceId":"3"}
12-04 15:51:04.875: D/weex(30188): ###handleMessage in WXDomHandler...what = 255,obj = null

View绘制过程对比

首先，我们看一下Android原声的View绘制过程：

android_view

主要是measure测量大小，layout确定位置。

其次，我们对比一下Weex的WXComponent的测量和布局过程；

TB13GPdOFXXXXbMXXXXXXXXXXXX-694-1456.png


主要是通过CSSLayout进行测量，使用view的setLayoutParams来确定View在父ViewGroup中的位置。

核心代码如下：


        Spacing parentPadding = mParent.getDomObject().getPadding();
        Spacing parentBorder = mParent.getDomObject().getBorder();
        Spacing margin = mDomObj.getMargin();
        int realWidth = (int) mDomObj.getLayoutWidth();
        int realHeight = (int) mDomObj.getLayoutHeight();
        int realLeft = (int) (mDomObj.getLayoutX() - parentPadding.get(Spacing.LEFT) -
                parentBorder.get(Spacing.LEFT));
        int realTop = (int) (mDomObj.getLayoutY() - parentPadding.get(Spacing.TOP) -
                parentBorder.get(Spacing.TOP));
        int realRight = (int) margin.get(Spacing.RIGHT);
        int realBottom = (int) margin.get(Spacing.BOTTOM);

        if (mPreRealWidth == realWidth && mPreRealHeight == realHeight && mPreRealLeft == realLeft && mPreRealTop == realTop) {
            return;
        }

        if (mParent != null) {
            mAbsoluteY = (int) (mParent.mAbsoluteY + mDomObj.getLayoutY());
            mAbsoluteX = (int) (mParent.mAbsoluteX + mDomObj.getLayoutX());
        }

        //calculate first screen time

        if (!mInstance.mEnd && !(mHost instanceof ViewGroup) && mAbsoluteY + realHeight > mInstance.getWeexHeight() + 1) {
            mInstance.firstScreenRenderFinished();
        }

        if (mHost == null) {
            return;
        }

        MeasureOutput measureOutput = measure(realWidth, realHeight);
        realWidth = measureOutput.width;
        realHeight = measureOutput.height;

        if (mHost instanceof WXCircleIndicator) {
            FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(realWidth, realHeight);
            params.setMargins(realLeft, realTop, realRight, realBottom);
            mHost.setLayoutParams(params);
            return;
        }

        //fixed style
        if (mDomObj.isFixed() && mInstance.getRootView() != null) {
            if (mHost.getParent() instanceof ViewGroup) {
                ViewGroup viewGroup = (ViewGroup) mHost.getParent();
                viewGroup.removeView(mHost);
            }
            FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT);

            params.width = realWidth;
            params.height = realHeight;
            params.setMargins(realLeft, realTop, realRight, realBottom);
            mHost.setLayoutParams(params);
            mInstance.getRootView().addView(mHost);

            if (WXEnvironment.isApkDebugable()) {
                WXLogUtils.d("Weex_Fixed_Style", "WXComponent:setLayout :" + realLeft + " " + realTop + " " + realWidth + " " + realHeight);
                WXLogUtils.d("Weex_Fixed_Style", "WXComponent:setLayout Left:" + mDomObj.getStyles().getLeft() + " " + (int) mDomObj.getStyles().getTop());
            }
            return;
        }
        
        ...
        
        
         else if (mParent.getRealView() instanceof BounceRecyclerView && this instanceof WXCell) {
            RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) mHost.getLayoutParams();
            if (params == null)
                params = new RecyclerView.LayoutParams(realWidth, realHeight);
            params.width = realWidth;
            params.height = realHeight;
            params.setMargins(realLeft, 0, realRight, 0);
            mHost.setLayoutParams(params);
        } else if (mParent.getRealView() instanceof BaseBounceView && this instanceof WXBaseRefresh) {
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(realWidth, realHeight);
            realTop = (int) (parentPadding.get(Spacing.TOP) - parentBorder.get(Spacing.TOP));
            params.setMargins(realLeft, realTop, realRight, realBottom);
            mHost.setLayoutParams(params);
        } else if (mParent.getRealView() instanceof FrameLayout) {
            FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(realWidth, realHeight);
            params.setMargins(realLeft, realTop, realRight, realBottom);
            mHost.setLayoutParams(params);
        } else if (mParent.getRealView() instanceof LinearLayout) {
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(realWidth, realHeight);
            params.setMargins(realLeft, realTop, realRight, realBottom);
            mHost.setLayoutParams(params);
        } else if (mParent.getRealView() instanceof ScrollView) {
            ScrollView.LayoutParams params = new ScrollView.LayoutParams(realWidth, realHeight);
            params.setMargins(realLeft, realTop, realRight, realBottom);
            mHost.setLayoutParams(params);
        }

View渲染过程对比

渲染过程对比：
weex_android

weex的渲染过程，上面已经写的比较清晰了；对于Android，其渲染过程大致可以总结为：

1.编译期使用aapt对xml进行编译，生成二进制的xml
2.运行时，使用XmlBlock构建XmlPullParser，通过LayoutInflater的rInflater进行解析，最终生成View；
具体详细过程，可以参看我的另外一遍博客：Android-LayoutInflater效率分析及源码跟踪

那么，两种方式的解析效率差异有多大呢？官方的数据如下：

帧率对比

目前以飞猪app的购物车为例：Weex，Native，以及投放到手淘的H5，进行了帧率对比，数据如下：
zhenlv

总结

weex无论在createBody、addElement，还是在callNative中对Module的调用，都还有很多优化空间。比如，可以把部门运行时的工作，搬到编译期做，这样可以加快页面的渲染时间；在渲染之后，滑动过程中的帧率对比发现，weex和native基本相近，比H5的表现要好。

weixin_34214500
关注
weex源码浅析(Android部分)一
yjm的专栏
12-23 2635
最近预研阿里的weex方案,同最近比较火的ReactNative比较类似,提供了一个一次编写三端共用的解决方案.下面引用官方的描述 Weex 是一套简单易用的跨平台开发方案，能以 web 的开发体验构建高性能、可扩展的 native 应用，为了做到这些，Weex 与 Vue 合作，使用 Vue 作为上层框架，并遵循 W3C 标准实现了统一的 JSEngine 和 DOM API，这样一来，你甚至
比较几款跨平台移动端开发app框架hybrid app_app开发主流框架
01-07
比较几款跨平台移动端开发app框架hybrid app flutter React WeeX不看好这个 kotlin也不看好 cordova phoneGap ionic hbuilder(uni-app) HERO
【quickhybrid】架构一个Hybrid框架
weixin_30379531的博客
12-23 152
前言 虽然说本系列中架构篇是第一章，但实际过程中是在慢慢演化的第二版中才有这个概念， 经过不断的迭代，演化才逐步稳定 明确目标 首先明确需要做成一个什么样的框架？ 大致就是： 一套API规范（统一Android与iOS），所有API异步调用（防止阻塞） 提供大部分原生功能的API（包括很多常用的功能给H5使用） 原生需要能调用到H5中注册的方法（用关于原生主动通知） 部分API需要支持H5环境（...
Android App Hybrid 开发框架 Cordova 之 环境篇
dazhong2012的专栏
04-15 564
在前端 HTML + JS 这么火热的今天，作为一名 Android 开发人员，也要逐渐向前端方向发展，今天给大家介绍一下 移动应用混合开发（HTML + 原生）框架 Cordova，它是 Apache 下的一款开源项目。 一.环境搭建 在使用 Cordova 之前，我们先要配置开发环境，主要有以下几点 1.安装 NODE JS 2.安装 NPM 包管理器 1.安装 Cordova CLI 开发...
推荐开源项目：Hybrid - 跨平台混合开发框架
最新发布
gitblog_00022的博客
05-14 306
推荐开源项目：Hybrid - 跨平台混合开发框架 去发现同类优质开源项目:https://gitcode.com/ 项目介绍 Hybrid是一个通用的Hybrid开发平台，旨在提高开发效率并保证良好的用户体验。由Android和iOS开发者共同贡献，它提供了简洁的API供前端与Native交互，并且计划与前端框架Blade进行整合，打造一体化的解决方案。 项目技术分析 交互机制：Hybrid选择...
Hybrid开发框架二、React Native
明潮的BLOG
08-07 698
简述： React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，目前支持iOS和安卓两大平台。RN使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。 题外话： 混合...
weex android Demo
01-10
这个“weex android Demo”项目很可能是包含了上述所有或部分功能的一个示例，你可以通过查看源码学习如何在实际项目中应用 Weex 技术。在 WeexAndroidDemo2 这个压缩包文件中，应该包含了一个完整的 Android 工程，...
Weex Android源码分析（一）—— WXBridgeManager
FrankLee的博客
04-04 2060
版本：0.18.0 自己对于Weex源码学习的一些记录，帮助理解，如有错误请指出，部分图片以及描述来源于官方的源码解析文章，文末会附上链接。 一、简单概述 因为整个Weex SDK的内容很多，想要分析也不可能一行代码一行代码的写，所以我个人倾向于先从简单的模块来进行分析，等各个模块的功能都基本清晰了再从流程上进行分析。在分析模块的过程中会穿插一些小的流程，即使不懂是做什么的也不影...
代码干货 | Weex Android SDK源码分析
CS13522431352的博客
08-22 326
最近开始试水Weex开发，使用这么长一段时间，感觉写Weex还是非常方便的。作为一个Android开发，免不了要追查一下weex的sdk源码。
Hybrid 框架介绍
XuShuangHui
02-27 3677
Hybrid交互设计Native调用前端页面的JS方法，或者前端页面通过JS调用Native提供的接口，两者交互的桥梁皆Webview：① NativeUI组件，header组件、消息类组件② 通讯录、系统、设备信息读取接口③ H5与Native的互相跳转，比如H5如何跳到一个Native页面，H5如何新开Webview做动画跳到另一个H5页面资源访问机制Native首先需要考虑如何访问H5资源，...
Hybrid混合开发学习笔记（2）开发框架
bihansheng2010的博客
09-17 1293
一、开发框架选型 1、混合应用开发框架横向对比 目前可供选择的混合应用开发框架大致可以分为五类：基础框架、脚手架、原生编译框架、开发平台、自研框架。 基础框架 基础框架是指以 WebView 与原生 API 交互为核心的经典混合应用开发框架，典型代表是 Cordova、Phonegap，早期还有 Interl XDK，不过已经停止维护。 Cordova 提供了跨平台的交互机制、插件机制...
Hybrid APP架构设计思路
weixin_34397291的博客
01-13 832
转自 http://segmentfault.com/a/1190000004263182 关于Hybrid模式开发app的好处，网络上已有很多文章阐述了，这里不展开。 本文将从以下几个方面阐述Hybrid app架构设计的一些经验和思考。 原文及讨论请到github issue 通讯 作为一种跨语言开发模式，通讯层是Hybrid架构首先应该考虑和设计的，往后所有的逻辑都是基于...
Hybrid混合框架
xuzhouhhy的博客
04-16 392
后面的项目开发会用到Hybrid混合框架，这篇文章先开个头了解一下
Weex源码分析
qq_26984087的博客
04-19 1955
Weex是跨平台的一种实践，令到开发者可以使用web语言来构建Android、iOS、web应用，实现一处编写，处处运行的效果，可以极大的降低人力成本，目前比较火的跨平台实践有React Native以及Flutter，weex相对小众一点，但是在功能上面也能够满足大部分的需求，而且接入也会相对简单，weex使用vue.js开发，本着知其然也知其所以然的原则，现在就来学习一下weex的源码。 We...
android集成weex sdk源码
漠天的博客
11-04 1403
git clone https://github.com/apache/incubator-weex.git 下的 android → sdk 集成依赖包 （ Weex_Sdk\incubator-weex\android ） 1、直接copy sdk集成到自己的android project ， setting.gradle ...
探索未来Web开发的利器：Hybrids框架
gitblog_00053的博客
05-11 332
探索未来Web开发的利器：Hybrids框架 项目地址:https://gitcode.com/gh_mirrors/hy/hybrids Hybrids是一个杰出的JavaScript框架，它专为创建客户端Web应用、UI组件库和单个Web组件而设计，其独特的声明式与函数式混合架构为您带来了全新的开发体验。 项目简介 Hybrids的核心在于它的组件模型，基于普通对象和纯函数，同时充分利用了We...
Hybrid App开发 Cordova框架实践——Android篇
大模型训练
07-15 5097
如果想要成为架构师或想突破20~30K薪资范畴，那就不要局限在编码，业务，要会选型、扩展，提升编程思维。此外，良好的职业规划也很重要，学习的习惯很重要，但是最重要的还是要能持之以恒，任何不能坚持落实的计划都是空谈。如果你没有方向，这里给大家分享一套由阿里高级架构师编写的《Android八大模块进阶笔记》，帮大家将杂乱、零散、碎片化的知识进行体系化的整理，让大家系统而高效地掌握Android开发的各个知识点。.........
【quickhybrid】架构一个Hybrid框架（一）
snow_love_xia的博客
05-31 1273
产生背景： 我们都知道,原生APP开发中有一个webview的组件(Android中是webview,iOS7以下有UIWebview,7以上有WKWebview),这个组件可以加载Html文件。在Html5没有兴盛之前,加载的Html往往只能用来做一些简单的静态资源显示,但是H5大行其道以后,Html5中有很多新增的功能,炫酷的效果,特别是iOS中H5支持一直都很良好,And...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值