首页 前端知识 开发与使用Uniapp原生插件[UniComponent]

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

2024-10-30 21:10:53 前端知识 前端哥 982 275 我要收藏

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

准备环境

  • AndroidStudio AndroidStudio官网
  • JAVA环境 jdk1.8
  • Uniapp离线SDK 下载地址
  • HBuilderX HBuilderX官网

使用官方Demo开发组件插件

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

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

点击文件-新建-New Module...开始新建模块

一定要点击文件新建,右击项目新建的不在项目根目录
在这里插入图片描述
选择Android Library,填入信息,点击完成
在这里插入图片描述

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

implementation project(':myTest')

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

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

编写插件类

在myText模块下新建文件TestComponent.java,文件继承UniComponent,你编写的是什么插件就引入什么View
包括两个固定方法

这里以ImageView为例,也就是Uniapp控制显示的图片,也可以是TextureView来实现各种视频的预览,原生实现比Uniapp更简单
在这里插入图片描述

新建两个测试方法,一个直接传参,一个通过标签传参

// 通过直接传入文件路径来显示
@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
重新同步一下即可
在这里插入图片描述

在这里插入图片描述
编译结束后,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": "component",
				"name": "myTest",
				"class": "com.uniapp.mytest.TestComponent"
			}],
			"integrateType": "aar",
			"minSdkVersion": 24,
			"abis": [
				"armeabi-v7a"
			]
		}
	}
}

在这里插入图片描述
注意:

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

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

使用插件

新建nvue页面[更建议nvue]
直接使用标签引入插件即可[module需要使用uni.requireNativePlugin哦,component不需要]

<template>
	<view>
		<myTest ref="myTest"></myTest>
	</view>
</template>

调用方法使用

在这里插入图片描述

标签直接使用

在这里插入图片描述
自此Uniapp开发与使用component组件方法结束

转载请注明出处或者链接地址:https://www.qianduange.cn//article/19690.html
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!