【Android View】使用WebViewJavaScriptBridge

本文介绍在Android应用中实现H5页面调用Java方法的方法,包括WebView配置、注入JS文件及提供可调用的Android方法等关键技术点。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


最近接手一个需求,涉及到h5页面调用java方法。

虽然开发Android三年了,但我并没有开发过需要h5页面调用java方法的需求。在做相关的业务开发之前,我自己研究了一些js调用java代码的背景知识,这里做一下总结。

WebView基本使用方法:

(1)可动态添加、也可在xml内添加

xml中添加

<WebView
                android:id="@+id/webview"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                />
动态添加
webViewContainer = (LinearLayout) mRootView.findViewById(R.id.h5_webview_container);
        webViewContainer.removeAllViews();
        webView = new H5WebView(context);
        webView.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
        //初始化
        webViewContainer.addView(webView);

(2)设置WebView相关属性
private void initWebViewSetting() {
        WebSettings webSetting = this.getSettings();
        if(VERSION.SDK_INT >= 16) {
            webSetting.setAllowFileAccessFromFileURLs(true);
            webSetting.setAllowUniversalAccessFromFileURLs(true);
        }

        if(Env.isTestEnv() && VERSION.SDK_INT > 19) {
            setWebContentsDebuggingEnabled(true);
        }

        if(VERSION.SDK_INT >= 21) {
            webSetting.setMixedContentMode(0);
        }

        if(VERSION.SDK_INT >= 17) {
            webSetting.setMediaPlaybackRequiresUserGesture(false);
        }

        this.setVerticalScrollBarEnabled(false);
        this.setHorizontalScrollBarEnabled(false);
        this.setOverScrollMode(2);
        String padFlag = "";
        if(DeviceInfoUtil.isTablet()) {
            padFlag = "_Ctrip_Pad_App_";
        }

        String dbPath;
        if(StringUtil.emptyOrNull(H5Global.USER_AGENT_STRING) || !H5Global.USER_AGENT_STRING.contains("CtripWireless_")) {
            dbPath = webSetting.getUserAgentString() + "_eb64_" + padFlag + this.getCustomAppName() + "CtripWireless_" + H5UtilPlugin.getAppVersion(this.getContext());
            H5Global.USER_AGENT_STRING = dbPath;
        }

        webSetting.setUserAgentString(H5Global.USER_AGENT_STRING);
        if(VERSION.SDK_INT >= 11) {
            webSetting.setAllowContentAccess(true);
        }

        webSetting.setJavaScriptEnabled(true);
        webSetting.setDomStorageEnabled(true);
        dbPath = this.getContext().getApplicationContext().getDir("database", 0).getPath();
        webSetting.setDatabasePath(dbPath);
        webSetting.setUseWideViewPort(true);
        webSetting.setLoadWithOverviewMode(true);
        webSetting.setAppCacheEnabled(true);
        webSetting.setAppCacheMaxSize(10506250L);
        webSetting.setAppCachePath(dbPath);
        webSetting.setTextSize(TextSize.NORMAL);
        webSetting.setRenderPriority(RenderPriority.HIGH);
        CookieManager cookieManager = CookieManager.getInstance();
        cookieManager.setAcceptCookie(true);
        this.setWebChromeClient(new VideoEnabledWebChromeClient() {
            {
                Object var3 = null;
                if(EncodeUtil.classVerify) {
                    System.out.println(ClassLoadVerifyPatch.class);
                }

            }

            public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
                String message = consoleMessage.message();
                int lineNumber = consoleMessage.lineNumber();
                String sourceID = consoleMessage.sourceId();
                String log = "日志:" + message;
                H5WebView.this.writeLog(log);
                H5WebView.this.printLogInfo(log);
                return super.onConsoleMessage(consoleMessage);
            }
        });
        this.setWebViewClient(this.getWebClient());
    }


Android如何为h5提供一个可调用方法:

(1)在WebView中添加javaScript可以直接调用的接口:

addJavascriptInterface()
这个接口有两个参数,第一个参数就是包含了JS代码需要调用的java方法的类的实例,第二个参数是给这个实例起一个名字

(2)在JS中调用java方法的代码:

Test.doSomething();

这个“Test”就是我们在上一步给实例起的名字,doSomething方法是我们写好的给js调用的方法。

(3)注意事项

在doSomething方法里的代码是要运行在主线程上的,所以要记得加上runOnUiThread


Android如何注入js文件:

1、为什么需要注入js文件?

因为在我们开发的一个app上,h5的埋点上报方法总是出错,所以希望h5的埋点上报通过调用Android的埋点上报方法来实现。关键在于,h5方面已经无法在原本的js上直接修改了,需要加入一个js文件来hook到h5的埋点上报方法,然后再调用android的原生方法。

这就需要在Android加载完每个h5页面时注入一个js文件,并且Android需要为h5提供一个埋点上报方法。

2、如何实现注入.js文件?

我们在这个app上使用的是目前使用最广泛的webViewJavaScriptBridge开源库,这个开源库提供了webView加载完成的回调方法。我们只需要在这里注入.js文件?

 try {
            InputStream is = webView.getContext().getAssets()
                    .open("CtripLocalUBT.js");
            int size = is.available();
            byte[] buffer = new byte[size];
            is.read(buffer);
            is.close();
            String js = new String(buffer);
            executeJavascript(js);
        } catch (IOException e) {
            e.printStackTrace();
        }

3、如何为h5提供可调用的Android方法?
registerHandler("trackJSLog", new WVJBHandler() {
                @Override
                public void request(Object data, WVJBResponseCallback callback) {
                    Log.e(TAG, "track_js_callback");
                    String d = (String) data;
                    if (!TextUtils.isEmpty(d)) {
                        try {
                            JSONObject object = new JSONObject(d);
                            String code = object.optString("code");
                            JSONObject tags = object.optJSONObject("tags");
                            HashMap<String, String> map = JsonHelper.JSONObjectToHashMap(tags);
                            CtripActionLogUtil.trackJSLog(code, map);
                        } catch (Exception e) {
                            e.printStackTrace();
                        }
                    }
                }
            });
<think>好的,我现在需要帮助用户了解如何使用WebView开发App。用户之前已经询问过uni-app和Three.js,现在可能想进一步将WebView应用到他们的跨平台开发中。首先,我得确定用户的具体需求是什么。他们可能是在考虑用WebView来嵌入H5内容,或者构建混合应用,以利用Web技术来加速开发。 用户的问题比较广泛,需要详细解释WebView开发App的具体步骤和方法。我应该先定义什么是WebView,然后介绍它的优缺点,这样用户能判断是否适合他们的项目。接着,可能需要分平台说明,比如Android和iOS的原生开发,以及跨平台框架如uni-app或React Native中的使用方式,因为用户之前提到过uni-app,可能对跨平台方案更感兴趣。 然后,具体步骤需要详细。比如在Android使用WebView,需要创建项目、添加控件、配置权限等。对于iOS,可能涉及WKWebView的用法。另外,跨平台框架中的WebView组件如何使用,特别是uni-app中的web-view组件,因为用户之前已经接触过uni-app,这部分可能需要更详细的说明,包括代码示例。 还要考虑JavaScript与原生代码的交互,这是混合开发中的关键点。比如通过addJavascriptInterface或WebViewJavascriptBridge来实现双向通信,这样用户可以在Web内容中调用原生功能,提升应用体验。 安全问题也是需要提到的,比如防止恶意URL注入,HTTPS的使用等。此外,性能优化方面,比如缓存策略和硬件加速,可能对用户体验有重要影响。 用户可能的深层需求是希望快速开发一个跨平台应用,同时能嵌入现有的Web内容,或者希望逐步将Web应用迁移到原生应用中。因此,需要强调WebView适合的场景,比如内容展示型应用,以及不适合高性能需求的场景。 最后,提供示例代码和注意事项,帮助用户避免常见陷阱,比如白屏问题或内存泄漏。总结时,对比不同方法的优缺点,帮助用户做出决策。可能还需要提到测试和发布流程,确保应用稳定。</think>以下是关于使用 **WebView 开发 App** 的详细指南,包括原理、步骤、优缺点及实践示例: --- ### **1. WebView 是什么?** WebView 是移动端(Android/iOS)或桌面端的内置组件,本质是一个**内嵌浏览器引擎**,允许在 App 中直接加载和显示网页内容(HTML/CSS/JavaScript)。 通过 WebView,开发者可以用 Web 技术(如 React、Vue 等)快速构建 App 的界面和功能,实现**混合开发**(Hybrid App)。 --- ### **2. 适用场景** - **快速原型开发**:用 Web 技术低成本验证 App 功能。 - **内容展示型应用**:新闻、博客、电商商品页等以信息呈现为主的应用。 - **跨平台需求**:一套 Web 代码兼容 Android/iOS,减少重复开发。 - **动态更新**:服务端直接修改网页内容,无需用户下载新版本 App。 --- ### **3. 开发步骤** #### **3.1 原生平台开发(以 Android 为例)** 1. **创建 Android 项目** 使用 Android Studio 新建项目,选择空模板(Empty Activity)。 2. **添加 WebView 控件** 在布局文件 `activity_main.xml` 中插入 WebView: ```xml <WebView android:id="@+id/webview" android:layout_width="match_parent" android:layout_height="match_parent" /> ``` 3. **加载网页** 在 `MainActivity.java` 中配置 WebView 并加载 URL: ```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); webView.getSettings().setJavaScriptEnabled(true); // 启用 JavaScript webView.setWebViewClient(new WebViewClient()); // 防止跳转到外部浏览器 webView.loadUrl("https://your-web-app-url.com"); // 加载网页 } // 处理返回键,避免直接退出 App @Override public void onBackPressed() { if (webView.canGoBack()) { webView.goBack(); } else { super.onBackPressed(); } } } ``` 4. **添加网络权限** 在 `AndroidManifest.xml` 中声明网络权限: ```xml <uses-permission android:name="android.permission.INTERNET" /> ``` --- #### **3.2 跨平台框架开发(如 uni-app)** 1. **创建 uni-app 项目** 使用 HBuilderX 新建项目,选择默认模板。 2. **使用 `web-view` 组件** 在页面中直接嵌入 WebView: ```html <template> <view> <web-view :src="url"></web-view> </view> </template> <script> export default { data() { return { url: "https://your-web-app-url.com" }; } }; </script> ``` 3. **编译打包** 通过 HBuilderX 一键编译为 Android/iOS/小程序等多端应用。 --- #### **3.3 关键功能扩展** ##### **JavaScript 与原生代码交互** - **Android(Java ↔ JS)** ```java // 原生代码定义接口 webView.addJavascriptInterface(new Object() { @JavascriptInterface public void showToast(String message) { Toast.makeText(MainActivity.this, message, Toast.LENGTH_SHORT).show(); } }, "NativeBridge"); // JavaScript 调用原生方法 window.NativeBridge.showToast("Hello from Web!"); ``` - **iOS(Swift ↔ JS)** 使用 `WKScriptMessageHandler`: ```swift // 原生代码 let config = WKWebViewConfiguration() config.userContentController.add(self, name: "NativeBridge") let webView = WKWebView(frame: .zero, configuration: config) // 接收 JS 消息 func userContentController(_ controller: WKUserContentController, didReceive message: WKScriptMessage) { if message.name == "NativeBridge" { print("Received: \(message.body)") } } // JavaScript 调用 window.webkit.messageHandlers.NativeBridge.postMessage("Hello from Web!"); ``` ##### **优化体验** - **离线缓存**:通过 Service Worker 或资源预加载实现离线访问。 - **加载进度条**:监听 WebView 的 `onProgressChanged` 事件显示加载状态。 - **硬件加速**:在 Android 中启用 `webView.setLayerType(View.LAYER_TYPE_HARDWARE, null)`。 --- ### **4. 优缺点对比** | **优点** | **缺点** | |-----------------------------------|-----------------------------------| | 开发成本低,跨平台兼容性强 | 性能低于原生(复杂动画/3D 效果差)| | 动态更新内容,无需审核 | 无法深度调用硬件功能(如蓝牙、NFC)| | 可复用现有 Web 项目代码 | 安全性较低(需防范 XSS/CSRF 攻击)| --- ### **5. 注意事项** 1. **安全风险** - 避免加载不可信 URL,防止 XSS 攻击。 - 对 JS 与原生交互的数据做严格校验。 - 使用 HTTPS 加密通信。 2. **性能优化** - 压缩 Web 资源(图片、CSS/JS 文件)。 - 避免频繁的 JS-Native 通信。 - 使用 Web Workers 处理复杂计算。 3. **平台差异** - AndroidWebView 版本碎片化严重,需测试兼容性。 - iOS 对 WKWebView 的内存管理更严格,需防止内存泄漏。 --- ### **6. 替代方案** - **PWA(Progressive Web App)**:通过 Service Worker 实现类原生体验,但依赖浏览器支持。 - **React Native/Flutter**:用 JavaScript/Dart 开发,渲染为原生组件,性能更高。 - **跨端框架(如 uni-app)**:平衡 Web 与原生能力,适合中小型项目。 --- 通过 WebView 开发 App 是快速验证业务的高效方式,但需根据业务复杂度权衡是否长期使用
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值