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

Logo

前往低代码交流专区

更多推荐