├── app ├── .gitignore ├── .DS_Store ├── src │ ├── .DS_Store │ ├── main │ │ ├── res │ │ │ ├── values │ │ │ │ ├── strings.xml │ │ │ │ ├── colors.xml │ │ │ │ └── themes.xml │ │ │ ├── mipmap-xxhdpi │ │ │ │ ├── js.png │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-hdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-mdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xxxhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-anydpi-v26 │ │ │ │ ├── ic_launcher.xml │ │ │ │ └── ic_launcher_round.xml │ │ │ ├── values-night │ │ │ │ └── themes.xml │ │ │ ├── layout │ │ │ │ ├── activity_main.xml │ │ │ │ └── demo.xml │ │ │ ├── drawable-v24 │ │ │ │ └── ic_launcher_foreground.xml │ │ │ └── drawable │ │ │ │ └── ic_launcher_background.xml │ │ ├── java │ │ │ └── com │ │ │ │ └── example │ │ │ │ └── hybriddemo │ │ │ │ ├── core │ │ │ │ ├── ui │ │ │ │ │ ├── dom │ │ │ │ │ │ ├── DomVerticalLayout.java │ │ │ │ │ │ ├── DomButton.java │ │ │ │ │ │ ├── DomImage.java │ │ │ │ │ │ ├── DomGroup.java │ │ │ │ │ │ ├── DomFactory.java │ │ │ │ │ │ ├── DomText.java │ │ │ │ │ │ └── DomElement.java │ │ │ │ │ ├── JsViewGroup.java │ │ │ │ │ ├── JsView.java │ │ │ │ │ ├── JsViewFactory.java │ │ │ │ │ └── RenderManager.java │ │ │ │ ├── JsBundle.java │ │ │ │ ├── module │ │ │ │ │ ├── JsModule.java │ │ │ │ │ └── ModuleManager.java │ │ │ │ ├── JSBridge.java │ │ │ │ ├── JsContext.java │ │ │ │ └── JsApplication.java │ │ │ │ ├── view │ │ │ │ ├── ButtonJsView.java │ │ │ │ ├── TextJsView.java │ │ │ │ ├── ImageJsView.java │ │ │ │ └── VerticalLayoutJsView.java │ │ │ │ ├── module │ │ │ │ ├── ConsoleModule.java │ │ │ │ └── UiModule.java │ │ │ │ └── MainActivity.java │ │ └── AndroidManifest.xml │ ├── test │ │ └── java │ │ │ └── com │ │ │ └── example │ │ │ └── hybriddemo │ │ │ └── ExampleUnitTest.kt │ └── androidTest │ │ └── java │ │ └── com │ │ └── example │ │ └── hybriddemo │ │ └── ExampleInstrumentedTest.kt ├── proguard-rules.pro └── build.gradle ├── settings.gradle ├── gradle └── wrapper │ ├── gradle-wrapper.jar │ └── gradle-wrapper.properties ├── README.md ├── gradle.properties ├── .gitignore ├── gradlew.bat └── gradlew /app/.gitignore: -------------------------------------------------------------------------------- 1 | /build -------------------------------------------------------------------------------- /settings.gradle: -------------------------------------------------------------------------------- 1 | include ':app' 2 | rootProject.name = "HybridDemo" -------------------------------------------------------------------------------- /app/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kwai-ec/HybridDemo/HEAD/app/.DS_Store -------------------------------------------------------------------------------- /app/src/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kwai-ec/HybridDemo/HEAD/app/src/.DS_Store -------------------------------------------------------------------------------- /app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | HybridDemo 3 | -------------------------------------------------------------------------------- /gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kwai-ec/HybridDemo/HEAD/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxhdpi/js.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kwai-ec/HybridDemo/HEAD/app/src/main/res/mipmap-xxhdpi/js.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kwai-ec/HybridDemo/HEAD/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kwai-ec/HybridDemo/HEAD/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kwai-ec/HybridDemo/HEAD/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kwai-ec/HybridDemo/HEAD/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kwai-ec/HybridDemo/HEAD/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kwai-ec/HybridDemo/HEAD/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kwai-ec/HybridDemo/HEAD/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kwai-ec/HybridDemo/HEAD/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kwai-ec/HybridDemo/HEAD/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kwai-ec/HybridDemo/HEAD/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /app/src/main/java/com/example/hybriddemo/core/ui/dom/DomVerticalLayout.java: -------------------------------------------------------------------------------- 1 | package com.example.hybriddemo.core.ui.dom; 2 | 3 | public class DomVerticalLayout extends DomGroup { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # HybridDemo 2 | 快手电商无线技术团队的掘金文章：打造你自己的动态化引擎 https://juejin.cn/post/7046299455397560350 3 | 4 | 一个基础的动态化引擎，文章主要介绍了动态化引擎有哪些核心模块，并将每个模块的实现方法分步骤展开，希望大家能从手动实现的过程中，理解动态化引擎的原理，也了解前端技术栈和客户端的不同之处。 5 | 大家感兴趣的话，可以再继续完善这个动态化引擎，添加自己想要的能力，写出更多有趣的JS应用～ 6 | -------------------------------------------------------------------------------- /gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | #Sat Oct 02 17:35:51 CST 2021 2 | distributionBase=GRADLE_USER_HOME 3 | distributionPath=wrapper/dists 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | distributionUrl=https\://services.gradle.org/distributions/gradle-6.5-all.zip 7 | -------------------------------------------------------------------------------- /app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /app/src/main/java/com/example/hybriddemo/core/JsBundle.java: -------------------------------------------------------------------------------- 1 | package com.example.hybriddemo.core; 2 | 3 | public class JsBundle { 4 | 5 | private String mAppJavaScript; 6 | 7 | public String getAppJavaScript() { 8 | return mAppJavaScript; 9 | } 10 | 11 | public void setAppJavaScript(String appJavaScript) { 12 | this.mAppJavaScript = appJavaScript; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /app/src/main/res/values/colors.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | #FFBB86FC 4 | #FF6200EE 5 | #FF3700B3 6 | #FF03DAC5 7 | #FF018786 8 | #FF000000 9 | #FFFFFFFF 10 | -------------------------------------------------------------------------------- /app/src/main/java/com/example/hybriddemo/core/module/JsModule.java: -------------------------------------------------------------------------------- 1 | package com.example.hybriddemo.core.module; 2 | 3 | import com.eclipsesource.v8.V8Array; 4 | 5 | import java.util.List; 6 | 7 | public abstract class JsModule { 8 | 9 | public abstract String getName(); 10 | 11 | public abstract List getFunctionNames(); 12 | 13 | public abstract Object execute(String functionName, V8Array params); 14 | 15 | } 16 | -------------------------------------------------------------------------------- /app/src/test/java/com/example/hybriddemo/ExampleUnitTest.kt: -------------------------------------------------------------------------------- 1 | package com.example.hybriddemo 2 | 3 | import org.junit.Test 4 | 5 | import org.junit.Assert.* 6 | 7 | /** 8 | * Example local unit test, which will execute on the development machine (host). 9 | * 10 | * See [testing documentation](http://d.android.com/tools/testing). 11 | */ 12 | class ExampleUnitTest { 13 | @Test 14 | fun addition_isCorrect() { 15 | assertEquals(4, 2 + 2) 16 | } 17 | } -------------------------------------------------------------------------------- /app/src/main/java/com/example/hybriddemo/core/JSBridge.java: -------------------------------------------------------------------------------- 1 | package com.example.hybriddemo.core; 2 | 3 | import com.example.hybriddemo.core.module.JsModule; 4 | 5 | public class JSBridge { 6 | private JsContext mJsContext; 7 | 8 | public JSBridge(JsContext jsContext) { 9 | mJsContext = jsContext; 10 | } 11 | 12 | public void registerJavaMethod(JsModule jsModule) { 13 | 14 | } 15 | 16 | public Object executeJs(String js) { 17 | return null; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /app/src/main/java/com/example/hybriddemo/core/JsContext.java: -------------------------------------------------------------------------------- 1 | package com.example.hybriddemo.core; 2 | 3 | import com.eclipsesource.v8.V8; 4 | 5 | public class JsContext { 6 | 7 | private V8 mEngine; 8 | 9 | public JsContext() { 10 | init(); 11 | } 12 | 13 | private void init() { 14 | mEngine = V8.createV8Runtime(); 15 | } 16 | 17 | public V8 getEngine() { 18 | return mEngine; 19 | } 20 | 21 | public void runApplication(JsBundle jsBundle) { 22 | mEngine.executeStringScript(jsBundle.getAppJavaScript()); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /app/src/main/java/com/example/hybriddemo/core/ui/dom/DomButton.java: -------------------------------------------------------------------------------- 1 | package com.example.hybriddemo.core.ui.dom; 2 | 3 | import com.eclipsesource.v8.V8Object; 4 | 5 | public class DomButton extends DomElement { 6 | 7 | public String text; 8 | 9 | @Override 10 | public void parse(V8Object v8Object) { 11 | super.parse(v8Object); 12 | for (String key : v8Object.getKeys()) { 13 | switch (key) { 14 | case "text": 15 | this.text = v8Object.getString("text"); 16 | break; 17 | } 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /app/src/main/java/com/example/hybriddemo/core/ui/JsViewGroup.java: -------------------------------------------------------------------------------- 1 | package com.example.hybriddemo.core.ui; 2 | 3 | import android.content.Context; 4 | import android.view.View; 5 | 6 | import com.example.hybriddemo.core.ui.dom.DomGroup; 7 | 8 | import java.util.ArrayList; 9 | import java.util.List; 10 | 11 | public abstract class JsViewGroup extends JsView { 12 | protected List mChildren = new ArrayList<>(); 13 | 14 | public void setChildren(List children) { 15 | mChildren = children; 16 | } 17 | 18 | @Override 19 | public T createView(Context context) { 20 | return super.createView(context); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /app/src/main/java/com/example/hybriddemo/core/ui/dom/DomImage.java: -------------------------------------------------------------------------------- 1 | package com.example.hybriddemo.core.ui.dom; 2 | 3 | import com.eclipsesource.v8.V8Object; 4 | 5 | public class DomImage extends DomElement { 6 | 7 | public int width; 8 | public int height; 9 | public String url; 10 | 11 | @Override 12 | public void parse(V8Object v8Object) { 13 | super.parse(v8Object); 14 | for (String key : v8Object.getKeys()) { 15 | switch (key) { 16 | case "width": 17 | this.width = v8Object.getInteger("width"); 18 | break; 19 | case "height": 20 | this.height = v8Object.getInteger("height"); 21 | break; 22 | } 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /app/src/main/java/com/example/hybriddemo/core/ui/dom/DomGroup.java: -------------------------------------------------------------------------------- 1 | package com.example.hybriddemo.core.ui.dom; 2 | 3 | import com.eclipsesource.v8.V8Array; 4 | import com.eclipsesource.v8.V8Object; 5 | 6 | import java.util.ArrayList; 7 | import java.util.List; 8 | 9 | public class DomGroup extends DomElement { 10 | public List children; 11 | 12 | @Override 13 | public void parse(V8Object v8Object) { 14 | super.parse(v8Object); 15 | List childElements = new ArrayList<>(); 16 | V8Array childrenObj = v8Object.getArray("children"); 17 | for (int i = 0; i < childrenObj.length(); i++) { 18 | childElements.add(DomFactory.create(childrenObj.getObject(i))); 19 | } 20 | this.children = childElements; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /app/src/androidTest/java/com/example/hybriddemo/ExampleInstrumentedTest.kt: -------------------------------------------------------------------------------- 1 | package com.example.hybriddemo 2 | 3 | import androidx.test.platform.app.InstrumentationRegistry 4 | import androidx.test.ext.junit.runners.AndroidJUnit4 5 | 6 | import org.junit.Test 7 | import org.junit.runner.RunWith 8 | 9 | import org.junit.Assert.* 10 | 11 | /** 12 | * Instrumented test, which will execute on an Android device. 13 | * 14 | * See [testing documentation](http://d.android.com/tools/testing). 15 | */ 16 | @RunWith(AndroidJUnit4::class) 17 | class ExampleInstrumentedTest { 18 | @Test 19 | fun useAppContext() { 20 | // Context of the app under test. 21 | val appContext = InstrumentationRegistry.getInstrumentation().targetContext 22 | assertEquals("com.example.hybriddemo", appContext.packageName) 23 | } 24 | } -------------------------------------------------------------------------------- /app/src/main/java/com/example/hybriddemo/view/ButtonJsView.java: -------------------------------------------------------------------------------- 1 | package com.example.hybriddemo.view; 2 | 3 | import android.content.Context; 4 | import android.widget.Button; 5 | 6 | import com.example.hybriddemo.core.ui.JsView; 7 | import com.example.hybriddemo.core.ui.dom.DomButton; 8 | 9 | public class ButtonJsView extends JsView { 10 | @Override 11 | public String getType() { 12 | return "button"; 13 | } 14 | 15 | @Override 16 | public Button createViewInternal(Context context) { 17 | Button button = new Button(context); 18 | button.setOnClickListener(v -> mDomElement.onClick.call(mDomElement.onClick.getRuntime(), null)); 19 | button.setText(mDomElement.text); 20 | button.setTextSize(16); 21 | return button; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # You can control the set of applied configuration files using the 3 | # proguardFiles setting in build.gradle. 4 | # 5 | # For more details, see 6 | # http://developer.android.com/guide/developing/tools/proguard.html 7 | 8 | # If your project uses WebView with JS, uncomment the following 9 | # and specify the fully qualified class name to the JavaScript interface 10 | # class: 11 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 12 | # public *; 13 | #} 14 | 15 | # Uncomment this to preserve the line number information for 16 | # debugging stack traces. 17 | #-keepattributes SourceFile,LineNumberTable 18 | 19 | # If you keep the line number information, uncomment this to 20 | # hide the original source file name. 21 | #-renamesourcefileattribute SourceFile -------------------------------------------------------------------------------- /app/src/main/res/values/themes.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 16 | -------------------------------------------------------------------------------- /app/src/main/res/values-night/themes.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 16 | -------------------------------------------------------------------------------- /app/src/main/res/layout/activity_main.xml: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 17 | 18 | -------------------------------------------------------------------------------- /app/src/main/java/com/example/hybriddemo/core/JsApplication.java: -------------------------------------------------------------------------------- 1 | package com.example.hybriddemo.core; 2 | 3 | import android.content.Context; 4 | import android.view.ViewGroup; 5 | 6 | import com.example.hybriddemo.core.module.ModuleManager; 7 | import com.example.hybriddemo.core.ui.RenderManager; 8 | 9 | public class JsApplication { 10 | private JsContext mJsContext; 11 | 12 | public static JsApplication init(Context context, ViewGroup containerView) { 13 | JsApplication jsApplication = new JsApplication(); 14 | JsContext jsContext = new JsContext(); 15 | jsApplication.mJsContext = jsContext; 16 | RenderManager.getInstance().init(context, containerView); 17 | ModuleManager.getInstance().init(jsContext); 18 | return jsApplication; 19 | } 20 | 21 | public void run(JsBundle jsBundle) { 22 | mJsContext.runApplication(jsBundle); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /app/src/main/java/com/example/hybriddemo/view/TextJsView.java: -------------------------------------------------------------------------------- 1 | package com.example.hybriddemo.view; 2 | 3 | import android.content.Context; 4 | import android.graphics.Color; 5 | import android.view.Gravity; 6 | import android.widget.TextView; 7 | 8 | import com.example.hybriddemo.core.ui.JsView; 9 | import com.example.hybriddemo.core.ui.dom.DomText; 10 | 11 | public class TextJsView extends JsView { 12 | 13 | @Override 14 | public String getType() { 15 | return "text"; 16 | } 17 | 18 | @Override 19 | public TextView createViewInternal(Context context) { 20 | TextView textView = new TextView(context); 21 | textView.setGravity(Gravity.CENTER); 22 | textView.setText(mDomElement.text); 23 | textView.setTextSize(mDomElement.textSize); 24 | textView.setTextColor(Color.parseColor(mDomElement.textColor)); 25 | return textView; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /app/src/main/java/com/example/hybriddemo/module/ConsoleModule.java: -------------------------------------------------------------------------------- 1 | package com.example.hybriddemo.module; 2 | 3 | import android.util.Log; 4 | 5 | import com.eclipsesource.v8.V8Array; 6 | import com.example.hybriddemo.core.module.JsModule; 7 | 8 | import java.util.ArrayList; 9 | import java.util.List; 10 | 11 | public class ConsoleModule extends JsModule { 12 | 13 | @Override 14 | public String getName() { 15 | return "console"; 16 | } 17 | 18 | @Override 19 | public List getFunctionNames() { 20 | List functions = new ArrayList<>(); 21 | functions.add("info"); 22 | return functions; 23 | } 24 | 25 | @Override 26 | public Object execute(String functionName, V8Array params) { 27 | switch (functionName) { 28 | case "info": 29 | Log.i("Javascript Console", params.getString(0)); 30 | break; 31 | } 32 | return null; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /app/src/main/java/com/example/hybriddemo/view/ImageJsView.java: -------------------------------------------------------------------------------- 1 | package com.example.hybriddemo.view; 2 | 3 | import android.content.Context; 4 | import android.widget.ImageView; 5 | 6 | import com.example.hybriddemo.R; 7 | import com.example.hybriddemo.core.ui.JsView; 8 | import com.example.hybriddemo.core.ui.dom.DomImage; 9 | 10 | public class ImageJsView extends JsView { 11 | 12 | @Override 13 | public String getType() { 14 | return "image"; 15 | } 16 | 17 | @Override 18 | public ImageView createViewInternal(Context context) { 19 | ImageView imageView = new ImageView(context); 20 | imageView.setImageResource(R.mipmap.js); 21 | return imageView; 22 | } 23 | 24 | @Override 25 | protected int getWidth(Context context) { 26 | return dp2px(mDomElement.width, context); 27 | } 28 | 29 | @Override 30 | protected int getHeight(Context context) { 31 | return dp2px(mDomElement.width, context); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /app/src/main/res/layout/demo.xml: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 14 | 15 | 21 | 22 |