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界面.


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
禁止转载,如需转载请通过简信或评论联系作者。
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,802评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,109评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,683评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,458评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,452评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,505评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,901评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,550评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,763评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,556评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,629评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,330评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,898评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,897评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,140评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,807评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,339评论 2 342

推荐阅读更多精彩内容