uni-app Android 原生插件开发

误将油门当刹车踩 發表於 2025-4-1 11:30:00

<h1 id="uni-app-android-原生插件开发">uni-app Android 原生插件开发</h1>
<p>【转载： uni-app Android 原生插件开发_mb607a58fde255a的技术博客_51CTO博客】</p>
<p>在开发 uni-app 项目时，我们可能会遇到 HBuilderX 提供的功能无法满足需求的情况。这时，通过开发 Android 原生插件来扩展功能是一种有效的解决方案。本文将详细介绍如何开发 Android 原生插件，包括 Module 模式和 Component 模式的开发流程，并通过实际代码示例帮助你快速上手。</p>
<h2 id="一插件简介">一、插件简介</h2>
<h3 id="11-插件类型">1.1 插件类型</h3>
<p>uni-app 的原生插件分为两种类型：Module 模式和 Component 模式。</p>
<ul>
<li><strong>Module 模式</strong>：用于能力扩展，不包含嵌入窗体的 UI 控件。大多数插件属于此类，例如调用计步器 API。使用时通过 JavaScript 的 <code>require</code> 方法加载插件对象并调用其方法。如果涉及弹出框或全屏 UI，也属于 Module 模式。</li>
<li><strong>Component 模式</strong>：用于在窗体中内嵌显示原生 UI 组件。例如在窗体局部内嵌地图组件时，需要将原生地图 SDK 封装为 Component 模式。其代码写法类似于 Vue 组件，直接在 <code>template</code> 中使用。</li>
</ul>
<h3 id="12-插件的使用">1.2 插件的使用</h3>
<p>开发好的原生插件可以选择不上架插件市场，仅在内部使用。如果需要上架，则必须按照指定格式压缩为 ZIP 包。</p>
<h2 id="二插件的开发">二、插件的开发</h2>
<h3 id="21-开发环境准备">2.1 开发环境准备</h3>
<p>插件开发基于 uni-sdk 进行。你可以从uni-sdk 离线下载地址下载必要的资源和示例工程，也可以新建一个原生 Android 项目并拷贝相关资源进行开发。</p>
<h3 id="22-创建插件-module">2.2 创建插件 Module</h3>
<p>在 Android Studio 中，右键点击项目，选择新建一个插件 Module。</p>
<p><img src="https://s2.51cto.com/images/blog/front/202502/2109441731df461004849181e211c8eb46e3d4.png?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=,x-oss-process=image/resize,m_fixed,w_1184/format,webp" alt="uni-app Android 原生插件开发_Android" loading="lazy"></p>
<p>选择 <code>library</code> 类型，填写 Module 名称并完成创建。</p>
<h3 id="23-配置依赖">2.3 配置依赖</h3>
<p>在项目的 <code>build.gradle</code> 文件中添加对新 Module 的依赖：</p>
<p>gradle复制</p>
<p>AI检测代码解析</p>
<pre><code class="language-gradle">implementation project(':mylibrary')1.
</code></pre>
<p>在 Module 的 <code>build.gradle</code> 文件中配置相关依赖库：</p>
<p>gradle复制</p>
<p>AI检测代码解析</p>
<pre><code class="language-gradle">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.
</code></pre>
<h3 id="24-创建-module-类">2.4 创建 Module 类</h3>
<p>创建一个继承自 <code>UniModule</code> 的类，并添加扩展方法。例如：</p>
<p>java复制</p>
<p>AI检测代码解析</p>
<pre><code class="language-java">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.
</code></pre>
<h3 id="25-注册插件">2.5 注册插件</h3>
<p>在 Android Studio 的 <code>assets</code> 目录下新建 <code>dcloud_uniplugins.json</code> 文件，并注册插件信息：</p>
<p>JSON复制</p>
<p>AI检测代码解析</p>
<pre><code class="language-json">{
"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.
</code></pre>
<h3 id="26-测试插件">2.6 测试插件</h3>
<p>在 uni-app 项目中，通过以下代码调用原生插件：</p>
<p>vue复制</p>
<p>AI检测代码解析</p>
<pre><code class="language-vue"><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.
</code></pre>
<h3 id="27-打包插件">2.7 打包插件</h3>
<p>生成插件的 AAR 包：</p>
<ol>
<li>在 Android Studio 的 Gradle 工具中，找到项目的 <code>Task</code> 目录下的 <code>other</code>，点击 <code>assembleRelease</code>。</li>
<li>在插件 Module 的 <code>build</code> 目录下找到生成的 AAR 文件。</li>
<li>将 AAR 文件拷贝到 uni-app 项目的 <code>nativeplugins/TestModule/android</code> 目录下。</li>
<li>在 <code>nativeplugins/TestModule</code> 目录下创建 <code>package.json</code> 文件，配置插件信息：</li>
</ol>
<p>JSON复制</p>
<p>AI检测代码解析</p>
<pre><code class="language-json">{
"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.
</code></pre>
<h3 id="28-配置与测试">2.8 配置与测试</h3>
<p>在 uni-app 的 <code>manifest.json</code> 中识别本地插件，然后通过云打包进行测试。</p>
<h2 id="三组件-component-开发">三、组件 Component 开发</h2>
<h3 id="31-创建组件-module">3.1 创建组件 Module</h3>
<p>组件开发与 Module 类似，但需要继承 <code>UniComponent</code> 或 <code>UniVContainer</code>。</p>
<h3 id="32-配置依赖">3.2 配置依赖</h3>
<p>在组件 Module 的 <code>build.gradle</code> 文件中添加依赖：</p>
<p>gradle复制</p>
<p>AI检测代码解析</p>
<pre><code class="language-gradle">compileOnly 'com.alibaba:fastjson:1.2.83'
compileOnly fileTree(include: ['uniapp-v8-release.aar'], dir: '../app/libs')1.2.
</code></pre>
<h3 id="33-创建组件类">3.3 创建组件类</h3>
<p>例如创建一个简单的文本组件：</p>
<p>java复制</p>
<p>AI检测代码解析</p>
<pre><code class="language-java">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.
</code></pre>
<h3 id="34-注册组件">3.4 注册组件</h3>
<p>在 <code>dcloud_uniplugins.json</code> 中注册组件：</p>
<p>JSON复制</p>
<p>AI检测代码解析</p>
<pre><code class="language-json">{
"plugins": [
{
   "type": "component",
   "name": "myText",
   "class": "com.juai.modulecomponent.TestText"
}
]
}1.2.3.4.5.6.7.8.9.
</code></pre>
<h3 id="35-使用组件">3.5 使用组件</h3>
<p>在 uni-app 项目中使用自定义组件：</p>
<p>vue复制</p>
<p>AI检测代码解析</p>
<pre><code class="language-vue"><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.
</code></pre>
<h3 id="36-打包与测试">3.6 打包与测试</h3>
<p>将组件打包为 AAR 文件，拷贝到 uni-app 项目的 <code>nativeplugins</code> 目录下，并配置 <code>package.json</code>。通过云打包测试组件功能。</p>
<p><img src="https://s2.51cto.com/images/blog/front/202502/8724797141a5ca708e983670f179475f330d63.png?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=,x-oss-process=image/resize,m_fixed,w_1184/format,webp" alt="uni-app Android 原生插件开发_Android_02" loading="lazy"></p>
<h2 id="四发布插件到-dcloud-市场">四、发布插件到 DCloud 市场</h2>
<p>开发好的插件可以通过DCloud 插件市场发布，供其他开发者使用。</p>
<ol>
<li>填写插件的基础信息。</li>
<li>打包插件为 ZIP 文件。</li>
<li>上传插件使用说明的 Markdown 文件。</li>
<li>发布插件，并确保插件 ID 与压缩包中的 ID 一致。</li>
</ol><br><br>
来源：https://www.cnblogs.com/20lxj666/p/18803779

頁: [1]

琼殿技术论坛's Archiver

uni-app Android 原生插件开发