开发与使用Uniapp原生插件[UniModule]

3 篇文章 0 订阅
2 篇文章 0 订阅

这里主要使用官方的Demo来做继续开发,因为只需要新建module就行了,不需要再新建项目和处理一些依赖问题

准备环境

使用官方Demo开发组件插件

打开已经准备好的Uniapp离线SDK,找到UniPlugin-Hello-AS项目,
使用AndroidStudio打开项目,等待项目初始化结束

如果有其它第三方依赖需求,可以自行将.so|.jar文件复制到libs下,也可以使用implementation

如何新建Module模块请参考:开发与使用Uniapp原生插件[UniComponent]

新建模块结束后
找到build.gradle配置文件 [app的哦,不是模块的],在dependencies中引入你的模块implementation project(':myTest')

implementation project(':myTest')

在这里插入图片描述
在这里插入图片描述
还有模块的build.gradledependencies配置,根据官方的UniPlugin-Hello-AS项目的uniplugin_module项目配置直接复制就好了

在这里插入图片描述
结束后Sync Now

编写插件类

在myText模块下新建文件TestModule.java,继承WXModule

这里关于继承类找了很久,并没有在官方找到文档
官方提供的是继承UniModule,但是根据示例去编写后,集成到Uniapp中一直会提示自定义基座中不包含xxx插件
所以这里继承WXModule类,测试可以正常打自定义基座运行

这里以两个方法演示,一个单次回调,一个持续监听回调,可以根据需要编写自己的逻辑,实现一些需要原生去实现的逻辑
在这里插入图片描述

 // 单词回调
@JSMethod(uiThread = true)
 public void sendData(String data, UniJSCallback callback) {
     if (callback != null) {
         callback.invoke(data);
     }
 }
 // 持续回调
 @JSMethod(uiThread = true)
 public void listenData(String data, UniJSCallback callback) {
     if (callback != null) {
         try {
         	 // 演示需要持续回调
             for (int i = 0; i < 100; i++) {
                 callback.invokeAndKeepAlive(data);
                 Thread.sleep(1000);
             }
         } catch (InterruptedException e) {
             e.printStackTrace();
         }
     }
 }

关于JSMethod注解可以参考官方文档,true代表操作UI线程,false代表仅JS操作

打包aar

通过Gradle控制台直接打包即可,新版AndroidStudio可能没有显示assembleRelease选项,这里通过
文件-Sync Project with Gradle Files
重新同步一下即可
在这里插入图片描述
在这里插入图片描述

编译结束后,aar文件路径在插件目录\build\outputs\aar
到这里原生组件的插件开发就结束了,接下来需要将aar文件根据官方文档来配置到Uniapp项目中使用

Uniapp插件格式

官方插件包格式为:

插件目录[myText]
	平台目录[android|ios]
		插件aar[myText.aar]
	package.json

在HBuildX中显示如下
在这里插入图片描述

当然更建议使用小写,如:my-test,个人项目使用问题不大,官方上架有要求
注意:aar名称尽量与你的插件目录保持一致,或aar文件的名称前缀是你的插件目录名

package.json

{
	"name": "测试插件",
	"id": "myTest",
	"version": "1.0",
	"description": "测试插件1.0",
	"_dp_type": "nativeplugin",
	"_dp_nativeplugin": {
		"android": {
			"plugins": [{
				"type": "module",
				"name": "myTest",
				"class": "com.uniapp.mytest.TestModule"
			}],
			"integrateType": "aar",
			"minSdkVersion": 24,
			"abis": [
				"armeabi-v7a"
			]
		}
	}
}

注意:

  • name与id必须保持一致
  • class必须是包名.类名[com.uniapp.mytest是包名,TestModule是类名]
  • 这里演示的是module组件,所以type是module
  • 其它参数可以参考官方文档

在你的Uniapp项目根目录新建nativeplugins文件夹,这是原生插件存放目录,然后将你的插件包放入nativeplugins文件夹内即可

使用插件

新建nvue页面[更建议nvue]
使用uni.requireNativePlugin

uni.requireNativePlugin("myTest");

调用方法使用

onReady() {
	this.myTest = uni.requireNativePlugin("myTest");
	this.myTest.sendData("回调回来了", res=>{
		console.log("单次回调:",res);
	});
	this.myTest.listenData("我在一直回调", listenMsg);
},
methods: {
	listenMsg(data){
		console.log("持续回调:",data);
		
	}
}

在这里插入图片描述

自此Uniapp开发与使用module组件方法结束

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值