当前位置：首页 > news >正文

Uni APP中关于Android原生插件UniComponent的使用

news 2025/11/4 8:35:03

目录

前言

一. HBuilderX创建一个项目

二. 配置本地插件

1. 创建"nativeplugins"目录

2. 配置package.json文件

3. 将插件配置到manifest.json文件的“App原生插件配置”下

三. 本地插件在nvue中的使用

总结

前言

前面写了一篇关于UniComponent<SurfaceView> 的原生插件开发，有需要的可以去看一下。

今天记录一下关于这个原生插件在uni app中是怎么使用的。

Uni APP官方文档使用本地插件传送门

一. HBuilderX创建一个项目

HBuilderX开发工具下载在原生开发中有提供下载链接。

直接“文件” -> "新建“ -> "项目” ，输入项目名，选择路径就可以了。

二. 配置本地插件

1. 创建"nativeplugins"目录

项目下创建一个"nativeplugins"目录，下面放置本地插件。

2. 配置package.json文件

package.json文件中关键字官方说明

修改package.json文件使用原生开发的CameraPreview.aar插件，内容如下：

{  "name": "Camera Preview 插件",  "id": "CameraPreview",  "version": "1.0.0",  "description": "安卓摄像头预览插件",  "_dp_type": "nativeplugin",  "_dp_nativeplugin": {  "android": {  "plugins": [{  "type": "component",  "name": "CameraPreview",  "class": "com.bob.camera.preview.CameraPreview"  }],  "integrateType": "aar","dependencies": [],"compileOptions": {"sourceCompatibility": "1.8",  "targetCompatibility": "1.8"  },  "abis": [  "armeabi-v7a,arm64-v8a"  ],  "minSdkVersion": "21"}  }  
}

3. 将插件配置到manifest.json文件的“App原生插件配置”下

在manifest.json文件的“App原生插件配置”项下点击“选择本地插件”

选择本地插件

三. 本地插件在nvue中的使用

template中使用：

<template><view class="content"><!-- <view class="btn-group"> --><button @click="handleOpen">打开相机</button><button @click="handleClose">关闭相机</button><!-- </view> --></view><CameraPreview class="preview" ref="CameraPreview"@oncameraopened="oncameraopened" @oncameraclosed="oncameraclosed"@oncameradisconnect="oncameradisconnect"@oncameraerror="oncameraerror"></CameraPreview>
</template>

script中使用：

methods: {// 打开相机handleOpen() {if(this.$refs.CameraPreview){//default back camerathis.$refs.CameraPreview.setCameraId(0);this.$refs.CameraPreview.startCamera();}},// 关闭相机handleClose() {if(this.$refs.CameraPreview){this.$refs.CameraPreview.stopCamera();}},// 相机打开成功回调oncameraopened(e) {console.log("相机打开成功：",e);uni.showToast({ title: "相机已打开", icon: "none" });},// 相机关闭回调oncameraclosed(e) {console.log("相机关闭",e);uni.showToast({ title: "相机关闭", icon: "none" });},// 相机断开回调oncameradisconnect(e) {console.log("相机断开",e);uni.showToast({ title: "相机断开", icon: "none" });},// 错误回调oncameraerror(e) {console.error("相机错误：", e.detail)uni.showToast({ title: `错误：${e.detail.message}`, icon: "none" })}}