Uni-app原生插件开发：高效构建指南

Uni-app原生插件开发：高效构建指南

引用

CSDN

等

8

来源

1.

https://blog.csdn.net/qq_43822861/article/details/138156970

2.

https://blog.csdn.net/matchaa__/article/details/139435456

3.

https://blog.csdn.net/u013083465/article/details/136329652

4.

https://blog.csdn.net/qq_56892518/article/details/134686079

5.

https://ask.dcloud.net.cn/article/35428

6.

https://www.bilibili.com/video/BV13V411H7W2/

7.

https://juejin.cn/post/7430121829091770383

8.

https://osdoc.net/uniapp/27/

随着移动应用功能的不断丰富，仅依靠前端技术已经难以满足所有需求。uni-app原生插件开发为开发者提供了一种强大的能力扩展方式，可以调用原生API，实现更复杂的功能。本文将从环境搭建到具体开发，为你详细介绍如何快速上手uni-app原生插件开发。

在开始开发之前，你需要准备以下开发环境：

1. Java环境：确保已安装JDK 1.8或以上版本。可以通过java -version命令检查版本。

2. Android Studio：下载并安装最新版本的Android Studio，建议使用2021.1.1或以上版本。

3. App离线SDK：从DCloud官网下载最新版本的Android平台SDK。

4. HBuilderX：用于uni-app项目的开发和调试。

5. 模拟器或真机：用于测试插件功能，推荐使用夜神模拟器或其他主流模拟器。

uni-app原生插件主要分为两种类型：

• Module模式：用于功能扩展，不涉及UI组件。例如调用计步器、获取设备信息等。通过JS调用，返回数据或执行操作。

• Component模式：用于在页面中嵌入原生UI组件。例如地图、视频播放器等。使用方式与Vue组件类似，可以直接在template中使用。

1. 创建项目与模块

打开Android Studio，选择File > New > New Project，创建一个新的Android项目。选择"Empty Activity"，点击"Next"，填写项目名称和保存位置，点击"Finish"。

接下来创建一个模块，用于存放插件代码。选择File > New > New Module，选择"Android Library"，点击"Next"，填写模块名称（例如my_plugin），点击"Finish"。

2. 配置依赖

在项目中导入必要的库文件。首先将UniPlugin-Hello-AS示例工程中的libs目录复制到你的项目中，然后在模块的build.gradle文件中添加以下依赖：

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

3. 编写插件代码

以Module模式为例，创建一个简单的功能扩展插件。在模块的src/main/java目录下创建一个新的Java类，继承UniModule：

package com.example.my_plugin;

import io.dcloud.feature.uniapp.annotation.UniJSMethod;
import io.dcloud.feature.uniapp.UniModule;
import io.dcloud.feature.uniapp.UniJSCallback;
import org.json.JSONObject;

public class MyPluginModule extends UniModule {
    @UniJSMethod(uiThread = true)
    public void sayHello(String name, UniJSCallback callback) {
        try {
            JSONObject result = new JSONObject();
            result.put("message", "Hello, " + name);
            callback.invoke(result);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

4. 注册与打包

在app/src/main/assets目录下创建dcloud_uniplugins.json文件，注册你的插件：

{
  "nativePlugins": [
    {
      "plugins": [
        {
          "type": "module",
          "name": "MyPlugin",
          "class": "com.example.my_plugin.MyPluginModule"
        }
      ]
    }
  ]
}

最后，生成aar文件。在Android Studio的Terminal中输入以下命令：

./gradlew :my_plugin:assembleRelease

生成的aar文件位于my_plugin/build/outputs/aar目录下。

在uni-app原生插件中，数据回调主要通过UniJSCallback实现。在上面的例子中，我们已经展示了如何使用UniJSCallback返回数据。需要注意的是，如果回调方法不是运行在UI线程，需要使用@UniJSMethod(uiThread = true)注解来确保线程安全。

将生成的aar文件复制到uni-app项目的nativeplugins目录下，并在package.json中添加插件依赖：

{
  "nativePlugins": {
    "MyPlugin": {
      "path": "./nativeplugins/my_plugin.aar"
    }
  }
}

在uni-app项目中调用插件方法：

const myPlugin = uni.requireNativePlugin('MyPlugin');
myPlugin.sayHello('UniApp', (data) => {
  console.log(data.message);
});

使用HBuilderX的云打包功能或自定义基座进行测试。确保插件功能正常，然后可以将其应用到实际项目中。

1. Gradle同步失败：检查网络连接，确保Gradle配置正确。可以尝试使用国内镜像源。

2. 插件无法调用：确认dcloud_uniplugins.json中的插件注册信息是否正确，检查aar文件是否正确导入。

3. 线程冲突：确保所有涉及UI操作的代码都在UI线程中执行，使用@UniJSMethod(uiThread = true)注解。

4. 数据传递失败：检查数据格式是否正确，确保回调函数的参数类型匹配。

通过本文的介绍，你已经掌握了uni-app原生插件开发的基本流程和关键要点。无论是功能扩展还是UI组件封装，都可以通过原生插件实现。希望你能将这些知识应用到实际开发中，创造出更强大、更丰富的应用。记住，实践是最好的老师，多动手尝试，你一定会收获更多！