uni-app与Android原生交互的3种实现方案
1. 混合开发背景与核心需求在移动应用开发领域混合开发已经成为平衡开发效率与性能体验的主流方案。uni-app作为基于Vue.js的跨平台框架允许开发者使用同一套代码构建iOS、Android以及各种小程序应用。但当我们需要访问设备原生功能如蓝牙、摄像头、传感器等或复用现有Java/Kotlin代码时就必须掌握uni-app与Android原生交互的技术方案。实际开发中常见的三种典型场景需要调用Android特有的硬件API如NFC读写复用企业现有的Java业务逻辑模块实现uni-app难以处理的高性能计算任务2. 方案一通过UniModule扩展原生能力这是DCloud官方推荐的标准化方案适合需要长期维护的中大型项目。2.1 环境准备与项目配置在Android Studio中创建原生模块public class MyNativeModule extends UniModule { UniJSMethod(uiThread true) public void showToast(String message) { Toast.makeText(mUniSDKInstance.getContext(), message, Toast.LENGTH_SHORT).show(); } }注册模块到uni-app工程// 在build.gradle中添加 dependencies { implementation com.github.dcloudio:uni-app-android-sdk:3.6.12 } // 在assets/dcloud_uniplugins.json中注册 { nativeModules: [ { class: com.example.MyNativeModule, name: myNative } ] }2.2 前端调用与参数传递// 获取模块实例 const nativeModule uni.requireNativePlugin(myNative) // 调用原生方法 nativeModule.showToast(Hello from JS!) // 复杂参数传递示例 nativeModule.processData({ id: 1001, items: [a, b], config: { timeout: 5000 } })关键提示UniModule默认运行在UI线程耗时操作需自行创建子线程。返回Promise需使用UniJSMethod(uiThread false)注解。3. 方案二WebView JavaScript Bridge通信适合已有H5页面需要快速集成到Android应用的场景。3.1 Android端桥接实现webView.settings.javaScriptEnabled true webView.addJavascriptInterface(object { JavascriptInterface fun getDeviceInfo(): String { return JSONObject().apply { put(model, Build.MODEL) put(sdk, Build.VERSION.SDK_INT) }.toString() } }, AndroidBridge)3.2 uni-app侧调用适配// 判断运行环境 function callNative(method, params) { if (uni.getSystemInfoSync().platform android) { return new Promise((resolve) { const callback callback_${Date.now()} window[callback] (data) { resolve(JSON.parse(data)) delete window[callback] } const script AndroidBridge.${method}(${JSON.stringify(params)}, ${callback}) const iframe document.createElement(iframe) iframe.style.display none iframe.src javascript:${script} document.body.appendChild(iframe) setTimeout(() iframe.remove(), 1000) }) } return Promise.reject(Not in Android environment) }4. 方案三URL Scheme与Intent跳转适用于简单指令传递和第三方应用调起的场景。4.1 AndroidManifest配置activity android:name.SchemeActivity intent-filter action android:nameandroid.intent.action.VIEW/ category android:nameandroid.intent.category.DEFAULT/ category android:nameandroid.intent.category.BROWSABLE/ data android:schemeuniandroid android:hostcommand/ /intent-filter /activity4.2 双向通信实现Android端protected void onCreate(Bundle savedInstanceState) { Uri uri getIntent().getData(); if (uri ! null) { String action uri.getQueryParameter(action); if (vibrate.equals(action)) { Vibrator vibrator (Vibrator)getSystemService(VIBRATOR_SERVICE); vibrator.vibrate(500); } } }uni-app端function sendCommand(command, params) { const query new URLSearchParams(params).toString() window.location.href uniandroid://command/?action${command}${query} // 回传结果监听 document.addEventListener(resume, () { const result plus.android.getResult() console.log(Native response:, result) }) }5. 方案对比与性能优化5.1 三种方案特性对比特性UniModuleJS BridgeURL Scheme执行效率★★★★★★★★☆☆★★☆☆☆开发复杂度★★★☆☆★★☆☆☆★☆☆☆☆双向通信支持完整支持需要适配有限支持数据类型支持丰富需序列化仅字符串适用场景高频复杂交互简单方法调用应用间通信5.2 性能优化实践线程管理将CPU密集型操作放在Native线程通过回调返回结果UniJSMethod(uiThread false) public void heavyCompute(String params, UniJSCallback callback) { new Thread(() - { String result doCompute(params); callback.invoke(result); }).start(); }批量调用减少跨语言调用次数// 不推荐 for (let i 0; i 100; i) { nativeModule.updateItem(i, data[i]) } // 推荐 nativeModule.batchUpdate({ items: data.map((item, index) ({id: index, data: item})) })内存优化及时释放Native对象引用Override public void onDestroy() { releaseResources(); // 释放native资源 super.onDestroy(); }6. 常见问题排查指南6.1 方法未找到错误检查模块是否正确注册到dcloud_uniplugins.json确认方法添加了UniJSMethod注解清理项目重新编译Android Studio的Build Clean Project6.2 数据类型转换异常Android端处理JSON的推荐方式UniJSMethod public void handleComplexData(JSONObject params) { String name params.optString(name); JSONArray items params.optJSONArray(items); // ... }uni-app侧类型提示Vue3 TypeScriptinterface NativeBridge { showToast(message: string): void; processData(params: {id: number; items: string[]}): Promise{code: number}; } const bridge uni.requireNativePlugin(myNative) as NativeBridge6.3 调试技巧Android Logcat过滤标签adb logcat -s UniJSService开启uni-app调试模式// main.js uni.setEnableDebug({ enableDebug: true })使用Chrome远程调试WebViewadb forward tcp:9222 localabstract:webview_devtools_remote_pid7. 进阶开发模式7.1 事件监听机制Android端发送事件mUniSDKInstance.fireGlobalEventCallback(nativeEvent, new JSONObject().put(type, dataUpdate).toString());uni-app端监听uni.onNativeEventReceive((event) { console.log(Received:, event.type) })7.2 插件化扩展开发可复用的原生插件创建独立Android Library模块实现UniModule接口打包为aar文件发布到私有Maven仓库或直接引用7.3 性能关键路径优化使用ByteBuffer传输二进制数据建立长连接通道替代频繁调用预加载常用Native模块// 在Application初始化时预加载 UniSDKEngine.preLoadModule(MyNativeModule.class);在实际项目开发中我们通常会根据功能特性混合使用多种方案。比如核心业务逻辑采用UniModule保证性能辅助功能使用JS Bridge快速实现而深度链接则通过URL Scheme处理。这种分层架构既能满足性能要求又能保持开发效率