Hummer框架在Android应用中的集成与使用指南

Hummer框架在Android应用中的集成与使用指南

前言

Hummer是一款优秀的跨平台开发框架，它允许开发者使用JavaScript来构建原生应用界面。本文将详细介绍如何在现有Android应用中集成Hummer框架，并充分利用其功能特性。

一、Hummer SDK集成

1. 添加依赖

首先需要在项目的build.gradle文件中添加Hummer SDK依赖：

implementation 'com.didi.hummer:hummer:0.2.35'

2. 初始化配置

在Application中进行初始化配置是使用Hummer的第一步：

HummerConfig config = new HummerConfig.Builder()
        .setJSLogger((level, msg) -> Log.d("HummerJS", msg))
        .setExceptionCallback(e -> {
            Log.e("Hummer", "发生异常", e);
            Toast.makeText(this, Log.getStackTraceString(e), Toast.LENGTH_SHORT).show();
        }).builder();
Hummer.init(this, config);

这段代码做了两件重要的事情：

1. 设置了JavaScript日志输出
2. 配置了异常回调处理

二、创建Hummer容器页面

Hummer提供了基础的HummerActivity，我们可以直接继承它来创建自己的Hummer页面：

public class MyHummerActivity extends HummerActivity {
    @Override
    protected void initHummerRegister(HummerContext context) {
        super.initHummerRegister(context);      
        // 注册自定义组件
        HummerRegister$$hummer_demo_app.init(context);
    }

    @Override
    protected void renderHummer() {
        // 渲染JS页面
        hmRender.renderWithUrl("http://x.x.x.x:9292/HelloWorld.js");
    }
}

关键点说明：

• initHummerRegister方法用于注册自定义组件
• renderHummer方法用于指定要渲染的JS文件

三、自定义导出组件

Hummer允许我们将Java类导出到JavaScript环境中使用，这是实现原生功能扩展的重要方式。

1. 配置Gradle

首先需要在模块的build.gradle中进行配置：

android {
    defaultConfig {
        javaCompileOptions {
            annotationProcessorOptions {
                arguments = [HUMMER_MODULE_NAME: project.getName()]
            }
        }
    }
}

dependencies {
    annotationProcessor 'com.didi.hummer:hummer-compiler:0.2.15'
}

2. 创建导出类

下面是一个完整的导出类示例：

@Component("TestExportModel")
public class TestExportModel {
 
    @JsProperty("text")
    public String text;
 
    @JsProperty("floatValue")
    public float floatValue;
 
    public float getFloatValue() {
        return floatValue;
    }
 
    @JsProperty("style")
    private Map<String, Object> style;
 
    public void setStyle(Map<String, Object> style) {
        this.style = style;
    }
 
    public Map<String, Object> getStyle() {
        return style;
    }
 
    @JsProperty("array")
    private List<String> array;
    public void setArray(List<String> array) {
        this.array = array;
    }
 
    public List<String> getArray() {
        return array;
    }
 
    @JsMethod("getElementById")
    public String getSubview(String viewID, int index, Long test, 
                           HashMap<String, String> testMap, 
                           ArrayList<Object> testList) {
        return "getSubview func, " + viewID + ", map: " + testMap + ", list: " + testList;
    }
}

注解说明：

• @Component：标记这是一个Hummer组件
• @JsProperty：标记属性将被暴露给JS
• @JsMethod：标记方法将被暴露给JS

四、Native与JS交互

Hummer提供了丰富的Native与JS交互方式。

1. Native向JS注册方法

静态类方法注册

hmContext.registerJSFunction("Test.nativeFunc", new ICallback() {
    @Override
    public Object call(Object... params) {
        Log.v("Hummer", "收到参数: " + Arrays.toString(params));
        return "返回值";
    }
});

JS调用方式：Test.nativeFunc(111, 222)

对象方法注册

JSValue jsPage = hmContext.getJsPage();
if (jsPage != null) {
    hmContext.registerJSFunction(jsPage, "nativeFunc", new ICallback() {
        @Override
        public Object call(Object... params) {
            Log.v("Hummer", "对象方法收到参数: " + Arrays.toString(params));
            return "返回值";
        }
    });
}

JS调用方式：在RootView中调用this.nativeFunc(111, 222)

2. Native调用JS方法

调用全局方法

hmContext.getJsContext().callFunction("onTest", 111, 222.22, true, "ttt");

JS中需要定义：function onTest(a, b, c, d) {}

调用Hummer域方法

hmContext.getJsContext().callFunction("Hummer.onTest", 111, 222.22, true, "ttt");

JS中需要定义：Hummer.onTest = (a, b, c, d) => {}

调用对象方法

JSValue jsPage = hmContext.getJsPage();
if (jsPage != null) {
    jsPage.callFunction("onTest", 111, 222.22, true, "ttt");
}

JS中需要在RootView中定义：onTest(a, b, c, d) {}

五、混淆配置

为了保证Hummer在混淆后仍能正常工作，需要在proguard-rules.pro中添加以下规则：

## Hummer
-keep @interface com.didi.hummer.annotation.*
-keep @com.didi.hummer.annotation.Component class * {*;}
-keep @com.didi.hummer.annotation.Module class * {*;}
-keep class com.didi.hummer.core.engine.jsc.jni.** {*;}
-keep class com.didi.hummer.render.component.view.BackgroundHelper {
    public void setBackgroundColor(int);
    public int getBackgroundColor();
}
-keep class com.facebook.yoga.** {*;}

结语

通过本文的介绍，我们了解了如何在Android应用中集成Hummer框架，包括基本配置、自定义组件开发以及Native与JS的交互方式。Hummer的强大之处在于它提供了丰富的扩展能力，开发者可以根据实际需求灵活地扩展原生功能，同时保持JavaScript开发的便捷性。