码一个简易的跨端框架

简介
架构图
方法时序图
代码详解

跨端框架越来越火爆，每个公司都为了提高效率而努力，完全是原生开发的App越来越少，就连google也出了自己的跨端方案Flutter。但是有技术实力的公司都会有自己的跨端框架，facebook的RN，滴滴的Hummer，阿里的Weex等等，这些跨端框架是如何实现的呢，本篇文章教你码一个最简易的跨端框架。
特别感谢Hummer团队http://hummer.didi.cn/home#/

简易跨端框架的架构图如下：

码一个简易跨端框架.png

大概分5层：
第一层：DSL层，也就是我们使用JavaScript写控件的那一层，因为JavaScript是没有类型检查的极难维护；所以出现了TypeScript，他相对于js来说有了强类型检查，在编辑期间IDE会做出类型检查，以及在编译生成js代码编译器会对类型进行检查，有了强制类型检查程序变得更好维护了，更适用于大型项目了。

第二层：js引擎层，也就是解析js代码的；js引擎有很多v8、Quickjs、Hermes、JavaScriptCore等，本demo使用了Quickjs作为js引擎，因为他代码量小，编译生成的so文件小，而且他是源码相对简单方便查找问题。

第三层：bridge层，这层非常重要，它是Android、Quickjs、之间的通信桥梁；Android代码启动通过JNI接口将javascript代码传入Quickjs引擎解析，引擎解析完成通过Quickjs回调到C语言方法上，C语言方法在通过JNI接口回调到Android代码，映射到对应功能上，完成了整个流程。

第四层：组件层，这层是将android中的组件层对应到js中的组件层；在js层创建一个View{new View()}，通过第三层映射到Android层的组件上。

第五层：android系统层，android组件是基于android系统运行的。

跨端框架调用时序图：

其中的类名、方法名以及变量名字都是当前demo代码中的

跨端框架调用时序图.jpg

结合上图分析一下简易跨端框架如何实现：

下载QuickJS代码，https://github.com/quickjs-zh/QuickJS ，下载比较干净的C++版本https://github.com/quickjs-zh/quickjspp ，这里自带CMakeLists.txt。
AndroidStudio创建jni工程，这步可以跟着官方文档一步一步创建写的非常详细，https://developer.android.com/studio/projects/add-native-code?hl=zh-cn
将下载的QuickJS代码复制到jni工程的cpp目录下，修改./cpp/CMakeLists.txt文件以及./cpp/quickjs/CMakeLists.txt文件，详情请看如下代码，里面有注释

#./cpp/CMakeLists.txt
#ndk版本和app/build.gradle中externalNativeBuild配置的要一直
cmake_minimum_required(VERSION 3.10.2)
#生成so文件的名字libquickjs-android.so
project("quickjs-android")
#编译过程中依赖的文件夹
add_subdirectory(./quickjs)
LINK_DIRECTORIES(./quickjs)
#设置生成的so动态库最后输出的路径
set(CMAKE_LIBRARY_OUTPUT_DIRECTORY ${PROJECT_SOURCE_DIR}/../jniLibs/${ANDROID_ABI})
#将源码quickjs-jni.cpp生成SHARED库也就是so库，名字是libquickjs-android.so
add_library(
        ${PROJECT_NAME}
        SHARED
        quickjs-jni.cpp)
#从NDK库中找到log（日志库）并且将路径保存在log-lib中
find_library(
        log-lib
        log)
#将log-lib这个日志库链接进libquickjs-android.so库中
target_link_libraries(
        ${PROJECT_NAME}
        ${log-lib}
        quickjs
)

#./cpp/quickjs/CMakeLists.txt
#生成so文件的名字libquickjs.so
project(quickjs LANGUAGES C)

#将编译的源码设置到quickjs_src中
set(quickjs_src quickjs.c libunicode.c libregexp.c cutils.c quickjs-libc.c)
#将预编译宏设置到quickjs_def中
set(quickjs_def CONFIG_VERSION="${version}" _GNU_SOURCE)
#条件编译值，这个条件编译宏表示是否编译提供大数功能，后面的NO表示不提供if条件为false
option(QUICKJS_BIGNUM "Compile BigNum support" ON)

#设置生成的so动态库最后输出的路径
set(CMAKE_LIBRARY_OUTPUT_DIRECTORY ${PROJECT_SOURCE_DIR}/../../jniLibs/${ANDROID_ABI})

#上面编译条件，NO，YES
if(QUICKJS_BIGNUM)
    list(APPEND quickjs_src libbf.c)
    list(APPEND quickjs_def CONFIG_BIGNUM)
endif()

#生成libquick.so静态库
add_library(quickjs SHARED ${quickjs_src})
#将上面quickjs_def定义的宏应用到libquickjs.so这个库中
target_compile_definitions(quickjs PRIVATE ${quickjs_def} )

编译运行肯定会报错的因为还没有写quickjs-jni.cpp jni接口代码，jni接口代码的主要作用就是桥接java层->C层->java层；下面分析主要代码逻辑

方法一：
/**
 * 对QuickJs引擎设置属性，也就是设置回调方法，将invoke这个C方法通过JS_SetPropertyStr设置到Quickjs引擎中
 * 这样在js代码中就可以调用invoke这个全局方法了
 */
extern "C"
JNIEXPORT void JNICALL
Java_com_example_myapplication_QuickJS_QuickJSBridge(JNIEnv *env, jclass clazz) {

    //找到QuickJS这个java类的jclass句柄
    jniHandle = env->FindClass("com/example/myapplication/QuickJS");
    if (NULL == jniHandle) {
        LOGE("can't find JniHandle");
        return;
    }
    //在QuickJS这个java类中找到invoke这个静态方法 long invoke(String className,long objectID,String methodName,long ...param);
    QUICKJS_BRIDGE_INVOKE_ID = env->GetStaticMethodID(jniHandle, "invoke",
                                                      "(Ljava/lang/String;JLjava/lang/String;[J)J");

    //创建全局的JSContext，切记一定要用同一个JSContext
    getJSContext();

    //将C方法invoke创建成JS引擎中的方法
    auto funcName = "invoke";
    auto invokeFunc = JS_NewCFunction(context, invoke, funcName, strlen(funcName));

    //将这个创建之后的js引擎中的invokeFunc方法注入到js引擎中，成为全局方法，这样在写js代码时就可以直接使用invoke这个方法
    JS_SetPropertyStr(context,
            JS_GetGlobalObject(context),
            "invoke",
            invokeFunc);
}

方法二
/**
 * js引擎通过JS_SetPropertyStr将这个方法注入到js引擎中，写js代码时可以直接调用这个方法，
 * 这个方法的声明是参照JSCFunction方法声明的可以查看，在这个方法中通过jni调用java中的代码，
 * 实现js引擎和java代码的通信
 * @param ctx
 * @param thisObject
 * @param argumentCount 参数数量
 * @param arguments 这是个数组根据参数的数量取出具体的参数
 * @return
 */
static JSValue invoke(JSContext* ctx, JSValueConst thisObject, int argumentCount, JSValueConst* arguments) {

    JNIEnv* env = JNI_GetEnv();

    //取出 long invoke(String className,long objectID,String methodName,long ...param);的最后一个参数long数组
    jlongArray params = nullptr;
    if (argumentCount > 3) {
        int methodParamsCount = argumentCount - 3;
        params = env->NewLongArray(methodParamsCount);
        jlong paramsC[methodParamsCount];
        for (int i = 3; i < argumentCount; i++) {
            paramsC[i - 3] = QJS_VALUE_PTR(arguments[i]);
        }
        env->SetLongArrayRegion(params, 0, methodParamsCount, paramsC);
    }

    //取出objectID
    int64_t objId;
    JS_ToInt64(ctx, &objId, arguments[INDEX_OBJECT_ID]);
    //取出className
    jstring className = JSString2JavaString(ctx, arguments[INDEX_CLASS_NAME]);
    //取出methodName
    jstring methodName = JSString2JavaString(ctx, arguments[INDEX_METHOD_NAME]);

    //jni调用com.example.myapplication.QuickJS类中的invoke静态方法，实现C层回调到java层
    //private static long invoke(String className, long objectID, String methodName, long... params)
    jlong ret = env->CallStaticLongMethod(jniHandle, QUICKJS_BRIDGE_INVOKE_ID,className,objId,methodName,params);

    env->DeleteLocalRef(className);
    env->DeleteLocalRef(methodName);
    env->DeleteLocalRef(params);

    JNI_DetachEnv();

    return JS_NewInt64(ctx,ret);
}

方法三
/**
 * quickjs引擎执行java传过来的js代码
 * 这个方法可以提前注入js_component_base.js组件的基础模板
 * 也可以执行js代码
 */
extern "C" JNIEXPORT jint JNICALL
Java_com_example_myapplication_QuickJS_ExecuteIntegerScript(JNIEnv *env, jclass clazz, jstring jCode,
                                                      jstring jFileName) {

    getJSContext();

    const char *code = env->GetStringUTFChars(jCode, NULL);
    const int code_length = env->GetStringUTFLength(jCode);
    const char *file_name = env->GetStringUTFChars(jFileName, NULL);
    int flags = 0;
    //QuickJs引擎执行js代码
    JSValue val = JS_Eval(context, code, (size_t) code_length, file_name, JS_EVAL_TYPE_GLOBAL);
    int result = JS_VALUE_GET_INT(val);

    return result;
}

上面Quickjs引擎和quickjs-jni.cpp对java暴露的jni接口都定义好之后我们来看java层的接口如何实现；

方法一
/**
     * 用来调用quickjs-jni.cpp中定义的native方法
     * QuickJSBridge，实现方法的映射，具体参照上面方法解析
     * ExecuteIntegerScript，将js组件的模板代码提前注入到js引擎中，这样后续组件可以使用
     * @param onInvoke
     */
    public static void QuickjsBridgeInvoke(OnInvoke onInvoke) {
        QuickJS.onInvoke = onInvoke;
        //设置QuickJSBridge
        QuickJSBridge();
        //设置JS组件的Base类代码
        QuickJS.ExecuteIntegerScript(JS_COMPONENT,"js_component_base.js");

    }

方法二
/**
     * 这个方法就是quickjs-jni.cpp文件中invoke通过jni方法CallStaticLongMethod调用的java方法
     * JNI回调Java的代码
     * @param className
     * @param objectID
     * @param methodName
     * @param params
     * @return
     */
    private static long invoke(String className, long objectID, String methodName, long... params) {
        if(null != onInvoke){
            onInvoke.invoke(className,objectID,methodName,params);
        }
        return 0;
    }

方法三
//如下js代码比较核心，只有下面定义了的组件才能在js中使用，
    //我们定义了Base类，其中看构造方法constructor->其实是调用了提前已经注入到js引擎中的invoke方法
    //这个invoke方法会通过jni调用java中的方法实现类的创建
    //我们定义了一个类以及其中的方法（Curise.render()）这个方法实际上也是调用了提前注入好的invoke方法
    //invoke方法回调到java方法中进行相应的操作
    private static final String JS_COMPONENT ="var count_id = 1;\n" +
            "const idGenerator = () => count_id++;\n" +
            "class Base {\n" +
            "   constructor(className, ...args) {\n" +
            "       this.className = className;\n" +
            "       this.objID = idGenerator();\n" +
            "       invoke(this.className, this.objID, \"constructor\", this, ...args);\n" +
            "   }\n" +
            "\n" +
            "   addEventListener(...args) {\n" +
            "       invoke(this.className, this.objID, \"addEventListener\", ...args);\n" +
            "   }\n" +
            "\n" +
            "   removeEventListener(...args) {\n" +
            "       invoke(this.className, this.objID, \"removeEventListener\", ...args);\n" +
            "   }\n" +
            "}\n" +
            "\n" +
            "class Button extends Base {\n" +
            "    constructor(...args) {\n" +
            "        super('Button', ...args);\n" +
            "        }\n" +
            "};\n" +
            "\n" +
            "const Cruiser = {\n" +
            "    render : ()=>{\n" +
            "        invoke(\"Cruiser\",0,\"render\",0);\n" +
            "    }\n" +
            "};";

下面我们看如何使用

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        。。。。。。
        //注册bridge
        QuickJS.QuickjsBridgeInvoke(onInvoke);
    }

//如下代码为模拟代码
    //js代码为var button = new Button();，在构造方法constructor中会调用预先注入的invoke方法，
    //invoke方法会通过jni回调到java方法，java方法通过判断字符串"constructor"创建Button
    //js代码为Cruiser.render();，实际上会调用invoke方法，通过jni回调到java方法，在java方法中判断字符串"render"
    //添加到ViewGroup上展示
    private QuickJS.OnInvoke onInvoke = new QuickJS.OnInvoke() {
        @Override
        public long invoke(String className, long objectID, String methodName, long... params) {
            Toast.makeText(sApplication, className + " : " + methodName, Toast.LENGTH_LONG).show();
            switch (methodName) {
                case "constructor": {
                    mButton = new Button(MainActivity.this);
                    mButton.setText("jiahongfei");
                    break;
                }
                case "render":{
                    if(null != mContainer){
                        mContainer.addView(mButton);
                    }
                    break;
                }
            }
            return 0;
        }
    };

//点击事件模拟js代码输入
    public void onClick(View view) {
        QuickJS.ExecuteIntegerScript("var button = new Button();\nCruiser.render();\n", "js_component.js");
    }

总结：
总结一下跨端框架的思路，

js引擎中注入一个js方法名字叫invoke，通过js引擎方法JS_SetPropertyStr将js方法invoke和本地的C方法关联起来，本地C方法叫invokeC，
本地的C方法invokeC通过jni的方式回调到java层的方法叫invokeJava
这样就实现了js代码和java代码的对应

参考文档：
Hummer官网
http://hummer.didi.cn/home#/

QuickJS引擎
https://zhuanlan.zhihu.com/p/161722203

QuickJs to Android
http://events.jianshu.io/p/6ffe30df4e30

100行代码js与c通信
https://juejin.cn/post/6844904142477983752

NDK开发java调用C方法
https://www.jianshu.com/p/0e62d00a9e59

一个跨端渲染思路
https://www.jianshu.com/p/935d2c2defc7

TypeScript优势
https://blog.csdn.net/xyphf/article/details/81944554

V8、Quickjs、JavaScriptCore、Hemens跨端开发怎么选
https://cloud.tencent.com/developer/article/1801742

码一个简易的跨端框架

简易跨端框架的架构图如下：

跨端框架调用时序图：

结合上图分析一下简易跨端框架如何实现：

你可能感兴趣的:(码一个简易的跨端框架)