开发与使用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...

开始新建模块

一定要点击文件新建，右击项目新建的不在项目根目录

选择

Android Library

，填入信息，点击

完成

找到

build.gradle

配置文件 [

app的哦，不是模块的

]，在

dependencies

中引入你的模块

implementation project(':myTest')

implementation project(':myTest')

还有模块的

build.gradle

的

dependencies

配置，根据官方的

UniPlugin-Hello-AS

项目的

uniplugin_component

项目配置直接复制就好了

结束后

Sync Now

编写插件类

在myText模块下新建文件

TestComponent.java

，文件继承UniComponent，你编写的是什么插件就引入什么View
包括两个固定方法

这里以

ImageView

为例，也就是

Uniapp控制显示的图片

，也可以是

TextureView

来实现各种视频的预览，原生实现比Uniapp更简单

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

// 通过直接传入文件路径来显示@UniJSMethodpublicvoidsetImage(String path){File file =newFile(path);Bitmap bitmap =BitmapFactory.decodeFile(file.getAbsolutePath());getHostView().setImageBitmap(bitmap);}// 通过标签src="路径"来直接显示@UniComponentProp(name ="src")publicvoidsrc(String path){File file =newFile(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><myTestref="myTest"></myTest></view></template>

调用方法使用

标签直接使用

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