uniApp如何与原生Android交互传递数据

最新推荐文章于 2024-05-11 08:00:00 发布
最新推荐文章于 2024-05-11 08:00:00 发布
阅读量1w 收藏 19
点赞数 2
分类专栏： Android 文章标签： uni-app android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40520781/article/details/116196264
版权

uniApp与Android原生插件互传数据

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台
但是我们在使用uniApp的时候很多功能无法满足我们的需求或者我们需要使用第三方的SDK进行高度定制。那么这时候我们难免会使用原生插件的方式去满足我们的需求。
uni官方文档给出了给uni定制原生插件的方式，但是文档写的不太好，导致对于小白来说可能不太友好。因此我亲身使用后把过程记录一下，希望可以帮助到有需要的人。

首先给到官方的文档地址：
原生插件开发教程： 原生插件开发教程
原生工程配置教程：原生工程配置教程

ok开始我的表演：

开始集成

首先我们需要下载官方提供的sdk
下载地址：https://nativesupport.dcloud.net.cn/AppDocs/download/android
咱们下载最新正式版本就行
在这里插入图片描述
下载好以后你回得到这么一个文件夹
在这里插入图片描述
咱们就先管SDK和UniPlugin-Hello-AS的这个demo

使用AS打开UniPlugin-Hello-AS这个工程，你回看到如下的目录
在这里插入图片描述圈起来的这几个地方是重点，请继续往后看！
这里要注意一下几点
插件目前暂时不支持Kotlin
gradle版本注意事项
HX3.0.0+版本云打包及相应版本SDK都将gradle版本4.6-all升级到6.5-all，tools.build:gradle版本3.2.1升级到4.1.1。
修复部分SDK集成后编译打包失败问题
适配android11的编译新特性。
修复tools.build:gradle:3.2.1版本编译检测是否需要AndroidX依赖库不准确问题。如果您的插件在HX3.0.0+版本编译报错需要AndroidX依赖库。那证明您之前集成的SDK是需要AndroidX的。请配置useAndroidX。具体可查看package.json
如果您下载的SDK是3.0.0+版本请将本地gradle版本升级到6.5-all，tools.build:gradle版本升级到4.1.1。防止编译报错等问题。如果遇到编译内存不足可能是关闭了R8混淆导致 需要开启。
tools.build:gradle:4.1.1版本编译器可能无法适配老的插件原生编译。会导致之前的插件可能无法正常编译通过或编译完成apk无法正常使用！需要插件开发者尽快适配4.1.1的编译环境。
Activity变更为FragmentActivity注意事项
HX3.0.7版本云打包及相应版本SDK开始将Activity变更为FragmentActivity.解决部分插件开发者需要加载Fragment的需求。但也带来了一些代码与之前不同的修改。需要注意以下问题：
requestPermissions需要限制requestCode的值域，之前Activity没有限制requestCode的值域。FragmentActivity的权限申请限制requestCode的值域不能为负值,也不能大于16位bit值65536。否则报异常或崩溃Can only use lower 16 bits for requestCode，强烈推荐使用0~60500之间取值。
HX3.1.6+开始 集成SDK需要将compileSdkVersion调高至29+

uni现在支持扩展module和扩展组件 Component

咱们这里以module为列吧
首先你要保证UniPlugin-Hello-AS能够正常运行可以看到uni的demo。
接下来就是玩我们自己的demo了
新建一个module或者引入已有的module就行
在这里插入图片描述
然后咱们要进行一些配置：
首先添加一下咱们module使用的权限
在这里插入图片描述
引入app下面的libs下面的uniapp-v8-release.aar包
在这里插入图片描述
添加防止混淆和支持的架构哭
在这里插入图片描述
接下来去到settings.gradle中干掉他其他的module，留下咱们自己的就行
在这里插入图片描述
app下的gradle也搞一下
在这里插入图片描述
注意：app的gradle里面的compile only要改成implementation，否则module和依赖都只会参与编译，不会参与打包，你会发现运行会报找不到类的错误
在这里插入图片描述其他uni需要的库咱们不动它
如果你是自己新建的工程需要按照app的gradle进行对齐，包括一下的内容
在这里插入图片描述
接下来咱们开始写module的里面我们需要的扩展module
新建一个类继承自UniModule
在这里插入图片描述
写我们需要uni调用的方法
在这里插入图片描述

@JSMethod就是一个是否运行在ui线程的注解，uni会根据这个注解判断是否需要运行在主线程，如果需要向uni传递参数，就使用JSCallback，通过callback.invoke把传递的对象调出去。注意这里的方法名一定要和uni那边调用的一摸一样，差一个字母都不得行！
那么uni要怎么接受这个对象呢？
首先我们需要在dcloud_uniplugins.json里面注册一下我们的module，这个name的值就很关键了，uni会通过name的值去找这个module
在这里插入图片描述
马赛掉的部分就是你的module或者组件的报名.module名。自己注意就好
接下来切到uni

在这里插入图片描述
uni需要先去请求这个module，注意看这个值，是不是和之前的name一摸一样。
ok这样就拿到了一个我们的木module对象，接下来就用它来调用我们的原生方法和传参数了
在这里插入图片描述
咱们在js中写个接口给外部调用就行。
在这里插入图片描述参数名称一定要和原生那边对齐，不然拿不到滴
接下来就把uni给打包出来生成一个本地的app资源
在这里插入图片描述

打包后你回得到一个这样的文件，就在你uni工程的根目录下的unpackge下main
在这里插入图片描述
有没有感觉有点熟悉：
仔细看我们的UniPlugin-Hello-AS工程下的这个
在这里插入图片描述

是不是长得很像，哈哈 右键把它delete掉，啥也不留，最后我们自己新建一个apps目录，把我们打包出来的文件弄进去
在这里插入图片描述

然后根据这个名称配置一下dcloud_control.xml，这里一定要保证appID一致
在这里插入图片描述也可以看看这个文件
在这里插入图片描述

完成以上步骤以后，点击运行，恭喜你，看到你的app了。

当然，只是把uni打包为我资源包到Android，咱们还可以
以生成uniapp插件的形式将module打包到uni，这样方式打包后可以提交到uni插件市场。具体请看官网教程：
https://nativesupport.dcloud.net.cn/NativePlugin/course/package

LsingDawn
关注
  • 2
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
uniApp或者vue 与 Android或者ios原生交互
07-18
uniApp或者vue 与 Android或者ios实现原生交互，使用bridge.js可以轻松实现。
uniapp调用原生Android SDK
08-11
【uniapp调用原生Android SDK】和【uniapp调用原生IOS SDK】涉及到的是在跨平台开发框架uniapp中如何与原生系统进行深度交互的技术。uniapp是一个使用Vue.js开发的所有平台的统一解决方案，它允许开发者通过一套代码...
跨平台应用开发进阶(六) ：uni-app实现原生插件集成_uniapp 添加了原生插件
2301_82243781的博客
05-10 1020
为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】四、延伸阅读因项目需求，需要uni-app实现原生插件集成，现将集成过程梳理得出此文。正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】返回的数据，则说明功能正常）正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！
uniapp调用原生android插件传递回调函数
fengchengwu2012的博客
03-07 8281
uniapp原生方法，回调函数
uni-app&H5&Android混合开发三 || uni-app调用Android原生方法的三种方式
最新发布
技术杂谈，聚焦优质文章、开源项目、实用工具和学习、工作、面试心得分享。博客园推荐博客、阿里云专家博主，擅长于C#、.NET、.NET Core、Golang、TypeScript、Vue、Uni App、Angular开发。
05-11 1855
关于H5的调用Android原生方法的方式有很多，在该片文章中我主要简单介绍三种与Android原生方法交互的方式。uni-app跨平台框架介绍和快速入门要实现Android与H5互调，WebView是一个很重要的控件，WebView可以很好地帮助我们展示html页面,所以有必要先了解一下WebView。
几招让你轻松解决 Uni-app、原生 App 混合开发问题
08-28 4602
同时不少的 APP 开发项目也在发布以后想要引入 Uni-app的功能，而 Uni-app 和 原生 APP 混合开发的时候其实也会遇到不少的问题。（tip：如果你开发的应用是以 Uni-app为主，想离线的方式来打包，那么不使用 Uni的小程序 Sdk来开发，而是使用离线 App来为 Sdk打包，如果你原来的旧项目不想集成原生的sdk小程序，那可以将 Uni-app的代码发布成 H5的方式，在原来的 App里通过 Webview的方式来打开。方案1：把基于原生的小程序切换为 Uni-app的源码。...
uniapp 开发实操三 ：uniapp 与android 原生交互
qq_40263927的博客
01-22 6978
uniapp 与android 原生交互
uniapp项目嵌入到iOS原生及交互踩坑指南
u013712343的博客
08-12 5947
uniapp项目嵌入到iOS原生及交互踩坑指南
Android和uniapp互传数据
yun199466的博客
05-21 4603
一、在uniapp项目添加一个类，专门用来处理和原生进行交互使用； import Vue from 'vue'; ! function(root, factory) { if (typeof exports == 'object' && typeof module != 'undefined') { module.exports = factory() } else if (typeof define == 'function' && def...
uniapp js调用Android代码.zip
08-26
总结，uniapp通过JSBridge为开发者提供了JavaScript与Android原生代码交互的能力，使得开发者能够充分利用原生平台的特性，提升应用的性能和用户体验。在实际开发中，理解这一机制并熟练运用，可以极大地扩展uniapp...
成功在android采集心率血氧等数据并在简单的uniapp界面显示.zip
01-03
开发者需要熟悉Vue组件化开发、uni-props、uni-events等特性，以实现与原生Android模块的交互。 6. **数据同步与展示**：在 UniApp 中，可以通过调用插件或者自定义的原生模块接口，将Android端采集的数据传递到...
（uniapp框架）手动封装webview页面与App交互sdk
01-30
在这个特定的场景中，我们关注的是如何手动封装一个Webview页面与App的交互SDK，以便实现H5页面与原生App之间的通信。这个过程涉及到的关键技术包括uniApp的API调用、JavaScript接口（JSSDK）的构建以及事件的处理。...
uniapp与webview之间的相互传值的实现
10-15
在uni-app与Webview之间进行数据交互是非常常见的需求，本文将详细介绍如何实现uni-app向Webview发送数据以及Webview向uni-app传递数据。 1. uni-app向Webview发送数据 在uni-app中，可以通过`<web-view>`组件的`...
原生app与uniapp开发的H5交互，H5写法
2301_76697302的博客
07-21 998
1) ios环境：window.webkit.messageHandlers.toAppLogin.postMessage();2）安卓环境：window.android.toAppLogin();2、调用原生app方法 toAppLogin 为调用原生app的方法。在App.vue文件里面定义一个绑定在window身上的方法。1、先判断是安卓系统还是ios系统。注意：如果需要在某一个页面进行操作调用，写法一样。一、h5调用原生app方法。二、原生app调用h5方法。
uniapp如何与原生应用进行混合开发？
一个努力不被优化的程序员
12-07 2848
通过本文的介绍，我们了解了 uni-app 的基本概念和特点，并学习了如何通过插件机制和原生渲染进程来实现 uni-app 与原生应用的混合开发。针对这种情况，我们可以使用 uni-app 与原生应用进行混合开发，将 uni-app 与原生应用结合起来，实现更加强大的功能。uni-app 提供了插件机制，可以将原生应用的功能封装为插件，然后在 uni-app 中调用插件来实现原生应用的功能。通过上述步骤，我们就可以在 uni-app 中使用 iOS 插件，实现原生组件与接口与 uni-app 的混合开发。
android与uniapp项目联调
u012345830的博客
10-15 423
android与uniapp项目联调
uniapp H5与android交互
weixin_51078865的博客
02-21 840
Android与H5交互,方法之间的调用
uni-APP：实现前后端数据交互（登录案例）
热门推荐
qq_44429079的博客
03-18 2万+
uni-APP：实现前后端数据交互（登录案例） 上一个项目是用vue写的，然后这次采用了一样的写法（错误写法） methods: { login(){ let uid = this.uid; let password = this.password; this.$http.post("/userLogin",{uid,password}).then(res=>{ console.log(res); if(res.code==1){ cons
uniapp 与原生交互之 获取原生Android数据
confused_kitten的博客
12-16 2771
一、uniapp 代码 var JpushUtils = plus.android.importClass("com.android.aiyicheng.wisdomcity.utils.JpushUtils"); // 创建对象的实例 var jpush = new JpushUtils(); // 获取其name属性值 registrationid = jpush.plusGetAttribute("registrationid"); 二、原生代码
uniapp原生android开发监听蓝牙状态
06-01
你可以通过使用 Android 的 BluetoothAdapter 类提供的方法来监听蓝牙的状态。以下是一个示例代码： ``` import android.bluetooth.BluetoothAdapter; import android.content.BroadcastReceiver; import android.content.Context; import android.content.Intent; import android.content.IntentFilter; public class BluetoothStateListener { private BluetoothAdapter bluetoothAdapter; private BluetoothStateReceiver bluetoothStateReceiver; public BluetoothStateListener(Context context) { bluetoothAdapter = BluetoothAdapter.getDefaultAdapter(); bluetoothStateReceiver = new BluetoothStateReceiver(); IntentFilter filter = new IntentFilter(BluetoothAdapter.ACTION_STATE_CHANGED); context.registerReceiver(bluetoothStateReceiver, filter); } public void unregisterReceiver(Context context) { context.unregisterReceiver(bluetoothStateReceiver); } private class BluetoothStateReceiver extends BroadcastReceiver { @Override public void onReceive(Context context, Intent intent) { if (intent.getAction().equals(BluetoothAdapter.ACTION_STATE_CHANGED)) { int state = intent.getIntExtra(BluetoothAdapter.EXTRA_STATE, -1); switch (state) { case BluetoothAdapter.STATE_ON: // 蓝牙已打开 break; case BluetoothAdapter.STATE_OFF: // 蓝牙已关闭 break; } } } } } ``` 以上代码中，我们通过注册一个 BroadcastReceiver 来监听 BluetoothAdapter.ACTION_STATE_CHANGED 广播事件，当蓝牙状态发生变化时，会触发该广播事件，我们可以在 BroadcastReceiver 的 onReceive 方法中处理蓝牙状态的变化。在使用完后，记得调用 unregisterReceiver 方法来注销 BroadcastReceiver。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值