这里主要使用官方的Demo来做继续开发,因为只需要新建module就行了,不需要再新建项目和处理一些依赖问题
准备环境
- AndroidStudio AndroidStudio官网
- JAVA环境 jdk1.8
- Uniapp离线SDK 下载地址
- HBuilderX HBuilderX官网
使用官方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.gradle
的dependencies
配置,根据官方的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组件方法结束