uni-app Android 原生插件开发

uni-app Android 原生插件开发

【转载： uni-app Android 原生插件开发_mb607a58fde255a的技术博客_51CTO博客】

在开发 uni-app 项目时，我们可能会遇到 HBuilderX 提供的功能无法满足需求的情况。这时，通过开发 Android 原生插件来扩展功能是一种有效的解决方案。本文将详细介绍如何开发 Android 原生插件，包括 Module 模式和 Component 模式的开发流程，并通过实际代码示例帮助你快速上手。

一、插件简介

1.1 插件类型

uni-app 的原生插件分为两种类型：Module 模式和 Component 模式。

• Module 模式：用于能力扩展，不包含嵌入窗体的 UI 控件。大多数插件属于此类，例如调用计步器 API。使用时通过 JavaScript 的 require 方法加载插件对象并调用其方法。如果涉及弹出框或全屏 UI，也属于 Module 模式。
• Component 模式：用于在窗体中内嵌显示原生 UI 组件。例如在窗体局部内嵌地图组件时，需要将原生地图 SDK 封装为 Component 模式。其代码写法类似于 Vue 组件，直接在 template 中使用。

1.2 插件的使用

开发好的原生插件可以选择不上架插件市场，仅在内部使用。如果需要上架，则必须按照指定格式压缩为 ZIP 包。

二、插件的开发

2.1 开发环境准备

插件开发基于 uni-sdk 进行。你可以从 uni-sdk 离线下载地址 下载必要的资源和示例工程，也可以新建一个原生 Android 项目并拷贝相关资源进行开发。

2.2 创建插件 Module

在 Android Studio 中，右键点击项目，选择新建一个插件 Module。

选择 library 类型，填写 Module 名称并完成创建。

2.3 配置依赖

在项目的 build.gradle 文件中添加对新 Module 的依赖：

gradle复制

AI检测代码解析

implementation project(':mylibrary')1.

在 Module 的 build.gradle 文件中配置相关依赖库：

gradle复制

AI检测代码解析

dependencies {
    compileOnly fileTree(include: ['uniapp-v8-release.aar'], dir: '../app/libs')
    implementation 'com.alibaba:fastjson:1.2.83'
    compileOnly 'androidx.appcompat:appcompat:1.5.0'
    compileOnly 'com.google.android.material:material:1.6.1'
}1.2.3.4.5.6.

2.4 创建 Module 类

创建一个继承自 UniModule 的类，并添加扩展方法。例如：

java复制

AI检测代码解析

public class TestModule extends UniModule {
    private static final String TAG = "TestModule";

    @UniJSMethod(uiThread = true)
    public void testAsyncFunc(JSONObject options, UniJSCallback callback) {
        Log.e(TAG, "testAsyncFunc--" + options);
        if (callback != null) {
            JSONObject data = new JSONObject();
            data.put("code", "success");
            callback.invoke(data);
        }
    }

    @UniJSMethod(uiThread = false)
    public JSONObject testSyncFunc() {
        JSONObject data = new JSONObject();
        data.put("code", "success");
        return data;
    }
}1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.

2.5 注册插件

在 Android Studio 的 assets 目录下新建 dcloud_uniplugins.json 文件，并注册插件信息：

JSON复制

AI检测代码解析

{
  "nativePlugins": [
    {
      "plugins": [
        {
          "type": "module",
          "name": "TestModule",
          "class": "com.juai.plugin_module.TestModule"
        }
      ]
    }
  ]
}1.2.3.4.5.6.7.8.9.10.11.12.13.

2.6 测试插件

在 uni-app 项目中，通过以下代码调用原生插件：

vue复制

AI检测代码解析

<template>
  <view class="content">
    <button type="primary" @click="testAsyncFunc">testAsyncFunc</button>
  </view>
</template>

<script>
export default {
  methods: {
    testAsyncFunc() {
      const testModule = uni.requireNativePlugin("TestModule");
      testModule.testAsyncFunc({
        name: 'unimp',
        age: 1
      }, (e) => {
        uni.showToast({
          title: JSON.stringify(e),
          icon: 'none'
        });
      });
    }
  }
};
</script>1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.

2.7 打包插件

生成插件的 AAR 包：

1. 在 Android Studio 的 Gradle 工具中，找到项目的 Task 目录下的 other，点击 assembleRelease。
2. 在插件 Module 的 build 目录下找到生成的 AAR 文件。
3. 将 AAR 文件拷贝到 uni-app 项目的 nativeplugins/TestModule/android 目录下。
4. 在 nativeplugins/TestModule 目录下创建 package.json 文件，配置插件信息：

JSON复制

AI检测代码解析

{
  "name": "TestModule",
  "id": "TestModule",
  "version": "1.0.0",
  "description": "插件描述信息",
  "_dp_type": "nativeplugin",
  "_dp_nativeplugin": {
    "android": {
      "integrateType": "aar",
      "plugins": [
        {
          "type": "module",
          "name": "TestModule",
          "class": "com.juai.plugin_module.TestModule"
        }
      ]
    }
  }
}1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.

2.8 配置与测试

在 uni-app 的 manifest.json 中识别本地插件，然后通过云打包进行测试。

三、组件 Component 开发

3.1 创建组件 Module

组件开发与 Module 类似，但需要继承 UniComponent 或 UniVContainer。

3.2 配置依赖

在组件 Module 的 build.gradle 文件中添加依赖：

gradle复制

AI检测代码解析

compileOnly 'com.alibaba:fastjson:1.2.83'
compileOnly fileTree(include: ['uniapp-v8-release.aar'], dir: '../app/libs')1.2.

3.3 创建组件类

例如创建一个简单的文本组件：

java复制

AI检测代码解析

public class TestText extends UniComponent<TextView> {
    @Override
    protected TextView initComponentHostView(@NonNull Context context) {
        TextView textView = new TextView(context);
        textView.setTextSize(20);
        textView.setTextColor(Color.BLACK);
        return textView;
    }

    @UniComponentProp(name = "tel")
    public void setTel(String telNumber) {
        getHostView().setText("tel: " + telNumber);
    }
}1.2.3.4.5.6.7.8.9.10.11.12.13.14.

3.4 注册组件

在 dcloud_uniplugins.json 中注册组件：

JSON复制

AI检测代码解析

{
  "plugins": [
    {
      "type": "component",
      "name": "myText",
      "class": "com.juai.modulecomponent.TestText"
    }
  ]
}1.2.3.4.5.6.7.8.9.

3.5 使用组件

在 uni-app 项目中使用自定义组件：

vue复制

AI检测代码解析

<template>
  <div>
    <myText ref="telText" tel="12305" style="width:200;height:100" @click="myTextClick"></myText>
  </div>
</template>

<script>
export default {
  methods: {
    myTextClick(e) {
      this.$refs.telText.clearTel();
    }
  }
};
</script>1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.

3.6 打包与测试

将组件打包为 AAR 文件，拷贝到 uni-app 项目的 nativeplugins 目录下，并配置 package.json。通过云打包测试组件功能。

四、发布插件到 DCloud 市场

开发好的插件可以通过 DCloud 插件市场 发布，供其他开发者使用。

1. 填写插件的基础信息。
2. 打包插件为 ZIP 文件。
3. 上传插件使用说明的 Markdown 文件。
4. 发布插件，并确保插件 ID 与压缩包中的 ID 一致。