JsBridge 使用教程

JsBridge 使用教程

JsBridge基于github.com/lzyzsd/JsBridge优化改进而来的JsBridge项目地址:https://gitcode.com/gh_mirrors/jsbr/JsBridge

1. 项目目录结构及介绍

JsBridge/
│
├── app                # Android 项目主模块
│   ├── src             # 源码目录
│   │   └── main        # 主工程目录
│   │       ├── java    # Java 源码
│   │       │   └── com.example.jsbridge      # 包路径
│   │       │       ├── JsApi.java          # JS接口类，实现了与JavaScript的交互逻辑
│   │       │       └── MainActivity.java     # 主Activity，加载WebView并初始化JsBridge
│   │       └── res     # 资源文件夹
│   │           └── web         # WebView相关资源，如html文件等
│
├── build.gradle       # 项目构建脚本
├── README.md          # 项目说明文档
├── gradlew            # Gradle Wrapper 脚本
└── settings.gradle    # 项目设置，指定项目结构

• app：包含Android应用程序的核心逻辑。

  • src/main/java/com.example.jsbridge：存放Java类，其中JsApi.java为核心，实现了JavaScript与原生代码的交互接口。
  • src/main/res/web：存储用于测试或演示的HTML和JavaScript文件，与WebView进行交互。

• build.gradle：定义了项目的依赖和编译配置。

• README.md：项目简介和快速指引。

• gradlew和settings.gradle：Gradle构建系统相关的辅助文件。

2. 项目的启动文件介绍

• MainActivity.java

public class MainActivity extends AppCompatActivity {
    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        webView = findViewById(R.id.webView);
        WebSettings settings = webView.getSettings();
        settings.setJavaScriptEnabled(true); // 启用JavaScript
        
        // 初始化JsBridge
        JsApi jsApi = new JsApi(this); 
        webView.addJavascriptInterface(jsApi, "nativeApi"); // 注册JS可以调用的对象
        
        // 加载WebView页面
        webView.loadUrl("file:///android_asset/web/index.html");
    }
}

• MainActivity是应用的入口点，负责初始化WebView环境，启用了JavaScript，并通过addJavascriptInterface注册了一个名为nativeApi的对象，使得JavaScript可以通过这个对象调用Android的原生方法。

3. 项目的配置文件介绍

• build.gradle（Module: app）

apply plugin: 'com.android.application'

android {
    compileSdkVersion 31
    defaultConfig {
        applicationId "com.example.jsbridge"
        minSdkVersion 21
        targetSdkVersion 31
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation 'androidx.appcompat:appcompat:1.4.1'
    implementation 'com.google.android.material:material:1.5.0-alpha06'
    implementation 'androidx.constraintlayout:constraintlayout:2.1.3'
    implementation 'android.webkit:webkit:...'
    // 添加任何特定于JsBridge的依赖项，如果有的话
    // ...
}

• build.gradle配置Android的编译版本、支持的最低API级别、目标SDK版本以及依赖库。特别地，implementation 'android.webkit:webkit'确保了项目中可以使用WebView组件。具体版本号需根据实际最新版本或项目需求调整。

通过以上分析，我们可以了解到JsBridge的基本架构和配置细节，为进一步开发提供指导。记住，处理JavaScript与原生应用之间的交互时，确保遵循最佳安全实践，避免XSS攻击等安全风险。

JsBridge基于github.com/lzyzsd/JsBridge优化改进而来的JsBridge项目地址:https://gitcode.com/gh_mirrors/jsbr/JsBridge