Android端Uni-App混合开发插件

一、简介

前言,注意首先如果单纯的js与原生混合开发并不建议使用uni插件开发,开发周期将近1个半月其中大量时间都是用在采坑上,而且官方的坑不会100%在社区给你解决,途径只有自己研究,截止目前更新后续插件还会遇到奇葩的问题,目前也是无法解决,原因①调试过程无法获取很多的报错信息,比如一个按钮点击无反应任何报错提示没有全靠猜,②文档问题,我开发过程前期靠文档开发,结果后来问官方,结果说我使用的方式不再维护更新,然后推翻从来,我当时笑了,而且就算你找到文档,也不会百分比看懂(用过的都懂),其他原因就不一一说了,这里建议如果单纯的js与原生混合开发,建议使用其他框架进行混合开发,作为原生开发者个人感觉使用Uni开发完一整套app(很多功能也不支持),不比原生容易很多,还是建议开发者自己斟酌,好废话就这么多了。

此文档用于记录和说明Uni插件开发过程, 以及后期其他开发包开发须知和一些注意事项。

重点~,开发完成之后,后期维护一定要仔细检查全部文件是否都更新完成(*HbuilderX在你出现错误的时候不会给你很多提示),所以需要仔细检查更新的插件文件。

二、开发准备

2.1 工具准备:

① android studio (以下简称AS) ② HBuilderX

2.2 资料准备:

①Dcloud插件开发demo;

客户和开发者需要用到HBuilderX 进行混合开发app,此demo为最终客户使用的项目demo.

②android studio插件项目demo:

此demo更偏向于原生开发者,使用HBuilderX 打包js等项目资源,在AS中引用.(注*推荐使用已经开发好的demo进行改造)

③ Dcloud部分官方文档(可适当参考文档):

uni-app官方文档:uni-app原生插件(native plugin)开发指南

Uni-app android端插件开发文档: uni-app android 插件开发文档

2.3 AS项目架构:

授权以及核心文件可忽略



2.4 HBuilderX 项目架构:



三、开发步骤

3.1 调试AS项目

3.1.1 在AS导入as的demo(例如:导入UniVinProject)

如图方式导入你准备好的AS项目的demo,这里推荐使用已经完成的项目demo进行导入后续在进行修改.







导入已有项目之后目录如下:


熟悉了大概的目录结构,首先UNI_3B45678这个H5界面文件如何生成后续再HBuliderX项目中会提到.


然后看下assets中的授权文件和核心文件

  授权文件:开发包中的授权文件即可放在图中文件夹下

核心文件: 为深度学习核心文件,也就是非深度学习文件可以忽略不添加这3个文件

Androidmainfest.xml: 此文件导入之后不需要大幅度更改唯一更改如下图

根据开发包的权限设置对应增加或者修改权限配置


3.1.2 在项目中导入开发核心库module(VinLibrary) (*注此库为公司项目需要,开发者可以忽略)



3.1.3 手动生成桥接module(uniplugin_vin)




命名好你自定义桥接库的名字如:uniplugin_vin




uniplugin_vin创建好后在java目录下创建好例如univinmodule的桥接类文件



uniplugin_vin中的 build文件配置如下



然后需要看下桥接类文件的配置UniVinModule.java文件的配置:

首先以视频流识别为例子,注意此方法在h5端调用所以方法头部用@JSMethod(uiThread = ture)  注释



配置如下方法用来接收识别结果并将结果回调给h5界面:



此外还需要配置下权限回调方法:



3.1.4 配置AS项目

配置好以上2个module之后我们来看下主项目的配置:



看下build.gradle的配置: 红框中需要配置之前创建好的桥接库



以上AS项目配置完毕, 下面开始配置HBuilderX项目的资源,也就是H5端的界面以及如何调用我们的核心库


3.2 调试HBuilderX 项目

3.2.1 在HBuilderX 中引入之前准备的HBuilderX的demo:


选择准备好的demo


导入项目之后的结构



3.2.2 配置H5调用界面

导入之后找到如下图文件: 此文件为H5界面的文件 也就是调用我们刚刚在AS项目中配置的桥接类的使用者,但是我们现在需要把这个H5界面生成APP资源在我们刚刚的AS项目中进行调试和应用.


找到文件后打开配置我们需要调用的代码:

定义点击按钮


以视频流识别为例, 添加调用视频流识别的方法


注意:上图中的插件名称对应下图Hbuilderx项目中的插件名


3.2.3 配置插件配置文件

定义好以上这些我们需要在HBuilderX项目中配置文件中进行相关配置:

找到项目中的插件目录下的配置文件(因为导入的项目是已经完成的插件所以会自带,如果是新建的项目,则需要自己创建此插件VinPluginModule)


打开文件package.json:

 class要和你的as项目中桥接类包路径一致,在上面例子中调用视频流会用到android 下的name 来调用桥接类



3.2.4 生成app资源用于AS项目调试

在HBuilderX 中打包好项目资源文件


将打包好的资源文件放入AS项目中的assets/apps下文件


找到data中的dcloud_control.xml文件



确定配置的id为之前生成的app资源名称一致



3.2.5 运行调试AS项目



3.3 生成插件文件

3.3.1 打包AS项目中桥接module以及核心识别库的module

测试通过可打包好插件包相关文件

使用此程序生成桥接module的arr打包文件


核心库module同样打包成arr文件


生成之后在对应的module下的build-outputs-arr文件下:


3.3.2 插件文件结构

①打包好需要的module,生成的arr文件集成到HbuilderX项目中

②以及libs文件和assets下的资源文件


③插件配置文件


3.3.3 确认插件配置文件

由于前面步骤以及配置过这里,需要确认插件配置文件是否配置正确

* 配置插件名称和id要和你的插件文件名一一对应

* plugins下的name以及class配置需要特别注意,此处name 用于你再H5页面调用时的名称,class则代表桥接类的包名路径(也就是在as项目中可以看到的桥接类的包名路径)是一一对应的


下面还有分别有abis 中cpu类型设置, permissions 权限配置等



3.4 uni-app原生插件本地配置

将原生插件配置到uni-app项目的“nativeplugins”下,还需要在manifest.json文件的“App原生插件配置”项下点击“选择本地插件”,在列表中选择需要打包生效的插件:


3.5 自定义基座配置

3.5.1 什么是自定义基座?

自定义调试基座是使用开发者申请的第三方SDK配置生成的基座应用,用于HBuilder/HBuilderX开发应用时实时在真机/模拟器上查看运行效果。(注:iOS仅支持真机运行自定义基座,不能使用xcode模拟器运行自定义基座)

3.5.2 制作自定义基座

在修改好manifest配置后,在HBuilder/HBuilderX中点击菜单栏“运行”->“运行到手机或模拟器”->“制作自定义基座”生成自定义基座安装包:


3.5.3 使用自定义基座

打包成功后需要在以下位置确保开启自定义调试基座功能:


然后就可以像运行到HBuilder标准运行基座那样,运行你的工程到手机/Android模拟器上,查看控制台日志信息。


注意:自定义调试基座是测试版,不可直接商用(使用自定义调试基座覆盖安装apk不会更新应用资源,并且有toast警告)。正式发版时需要按正常打包方式重新打包。


配置好可以在HBuliderX中进行使用和测试了


四、注意事项

1.新增混合开发插件包: 使用现有的demo 进行改造生成新的插件包,否则有可能出现找不到某些文件等问题.

五、常见问题

1. 点击识别无法调用核心部分,没有反应

此问题为导入依赖核心库不成功或者为桥接类中调用配置错误导致,请仔细检查现有demo中方式进行配置,也可能由于官方的坑导致无法调用成功,目前没有任何解决方案,官方社区更是没法指望。


2. 参照官方文档集成问题

官方文档新旧文档鱼龙混杂,导致很难找到正确文档集成开发,所以新增开发包尽量在已有成熟的开发包基础上进行改造新增即可,可避免一些问题.


3. 调用提示找不到由aseets下保存到安卓内部存储的文件

此原因为uni混合开发项目中无法读取到内部存储下的文件,具体原因未知,开发如遇到此问题,一般为自己创建的混合开发项目会出现这类问题,所以推荐在现有插件包改造新增.


4.找不到调用的识别库activity

  如图,正常的这种导入原生资源是没问题的,如果参照官方文档这部分官方要求用compile 方式导入资源会导致,我们在桥接类中无法调用我们的核心activity界面.


你可能感兴趣的:(Android端Uni-App混合开发插件)