开发与使用Uniapp原生插件[UniComponent]
这里主要使用官方的Demo来做继续开发，因为只必要新建module就行了，不必要再新建项目和处置惩罚一些依赖标题准备情况
[*]AndroidStudio AndroidStudio官网
[*]JAVA情况 jdk1.8
[*]Uniapp离线SDK 下载地址
[*]HBuilderX HBuilderX官网
使用官方Demo开发组件插件
打开已经准备好的Uniapp离线SDK，找到UniPlugin-Hello-AS项目，
使用AndroidStudio打开项目，等候项目初始化竣事
假如有别的第三方依赖需求，可以自行将.so|.jar文件复制到libs下，也可以使用implementation
点击文件-新建-New Module...开始新建模块
一定要点击文件新建，右击项目新建的不在项目根目次
https://i-blog.csdnimg.cn/direct/738d68b5b9854ea7b72090414a289b2a.png
选择Android Library，填入信息，点击完成
https://i-blog.csdnimg.cn/direct/4f9bb5f22bad4904b77fc145eade77f3.png
找到build.gradle配置文件 ，在dependencies中引入你的模块implementation project(':myTest')
implementation project(':myTest')
https://i-blog.csdnimg.cn/direct/6126639ed3b34a2b92591702cdcd6a92.png
https://i-blog.csdnimg.cn/direct/38167e122aff4ee396adf35c9a77d5ee.png
另有模块的build.gradle的dependencies配置，根据官方的UniPlugin-Hello-AS项目的uniplugin_component项目配置直接复制就好了
https://i-blog.csdnimg.cn/direct/573d4dffd8094776a7364978d2d46fff.png
竣事后Sync Now
编写插件类
在myText模块下新建文件TestComponent.java，文件继续UniComponent，你编写的是什么插件就引入什么View
包括两个固定方法
这里以ImageView为例，也就是Uniapp控制表现的图片，也可以是TextureView来实现各种视频的预览，原生实现比Uniapp更简单
https://i-blog.csdnimg.cn/direct/f469328bd0df4659a9d45b51c19fe3dc.png
新建两个测试方法，一个直接传参，一个通过标签传参
// 通过直接传入文件路径来显示
@UniJSMethod
public void setImage(String path) {
File file = new File(path);
Bitmap bitmap = BitmapFactory.decodeFile(file.getAbsolutePath());
getHostView().setImageBitmap(bitmap);
}
// 通过标签src="路径"来直接显示
@UniComponentProp(name = "src")
public void src(String path) {
File file = new File(path);
Bitmap bitmap = BitmapFactory.decodeFile(file.getAbsolutePath());
getHostView().setImageBitmap(bitmap);
}
打包aar
通过Gradle控制台直接打包即可，新版AndroidStudio大概没有表现assembleRelease选项，这里通过
文件-Sync Project with Gradle Files
重新同步一下即可
https://i-blog.csdnimg.cn/direct/737bcb010c2b492398906bb4884cd185.png
https://i-blog.csdnimg.cn/direct/106461e6212542a98d904f2019e06a82.png
编译竣事后，aar文件路径在插件目次\build\outputs\aar下
到这里原生组件的插件开发就竣事了，接下来必要将aar文件根据官方文档来配置到Uniapp项目中使用
Uniapp插件格式
官方插件包格式为：
插件目录
平台目录
插件aar
package.json
在HBuildX中表现如下
https://i-blog.csdnimg.cn/direct/e8eddc60eb524622b4a08ffda7d336dd.png
当然更建议使用小写，如：my-test，个人项目使用标题不大，官方上架有要求
注意：aar名称尽量与你的插件目次保持一致，或aar文件的名称前缀是你的插件目次名
package.json
{
"name": "测试插件",
"id": "myTest",
"version": "1.0",
"description": "测试插件1.0",
"_dp_type": "nativeplugin",
"_dp_nativeplugin": {
"android": {
"plugins": [{
"type": "component",
"name": "myTest",
"class": "com.uniapp.mytest.TestComponent"
}],
"integrateType": "aar",
"minSdkVersion": 24,
"abis": [
"armeabi-v7a"
]
}
}
}
https://i-blog.csdnimg.cn/direct/f6117999a0664a74ac382d98457aed49.png
注意：
[*]name与id必须保持一致
[*]class必须是包名.类名
[*]这里演示的是component组件，所以type是component而不是module
[*]别的参数可以到官方文档参考
在你的Uniapp项目根目次新建nativeplugins文件夹，这是原生插件存放目次，然后将你的插件包放入nativeplugins文件夹内即可
使用插件
新建nvue页面[更建议nvue]
直接使用标签引入插件即可
<template>
<view>
<myTest ref="myTest"></myTest>
</view>
</template>
调用方法使用
https://i-blog.csdnimg.cn/direct/365edfc2aad74612bf171fba617d9e88.png
标签直接使用
https://i-blog.csdnimg.cn/direct/17261eeaecdd4857a4cc0ff29caf1419.png
自此Uniapp开发与使用component组件方法竣事
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]