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

Uniapp插件开发入门:手把手教你制作一个简单的Android原生插件(附Hello World示例)

Uniapp插件开发实战:从零构建Android原生弹窗插件

第一次接触Uniapp原生插件开发时,我盯着官方文档里"需要Android/iOS原生开发经验"的提示犹豫了整整两周。直到发现官方提供的UniPlugin-Hello-AS工程模板,才意识到原来门槛可以这么低——只要会JavaScript和基础Java语法,就能开发简单的原生插件。本文将带你用最简化的方式,完成一个显示系统弹窗的Android原生插件开发全流程。

1. 环境准备与工程搭建

开发Uniapp原生插件需要配置以下环境(以Windows系统为例):

  • HBuilderX 3.4.0+:确保安装了App开发套件
  • Android Studio 2021.2.1+:推荐使用稳定版
  • Java JDK 11:配置好JAVA_HOME环境变量
  • Node.js 14+:用于依赖管理

提示:Android Studio安装时务必勾选"Android SDK"和"Android SDK Command-line Tools"

下载官方示例工程:

git clone https://github.com/dcloudio/UniPlugin-Hello-AS.git

用Android Studio打开后,关键目录结构如下:

UniPlugin-Hello-AS ├── app # 主模块 ├── plugin_hello # 示例插件模块 ├── README.md └── settings.gradle

2. 创建自定义插件模块

在Android Studio中右键项目 → New → Module → Android Library,命名为toast_plugin。然后修改build.gradle

apply plugin: 'com.android.library' android { compileSdkVersion 31 defaultConfig { minSdkVersion 21 targetSdkVersion 31 } } dependencies { implementation 'androidx.appcompat:appcompat:1.4.1' implementation project(':uniplugin_component') implementation project(':uniplugin_module') implementation project(':uniplugin_richalert') }

创建核心类ToastPlugin.java

package com.example.toastplugin; import android.content.Context; import android.widget.Toast; import io.dcloud.feature.uniapp.annotation.UniJSMethod; import io.dcloud.feature.uniapp.bridge.UniJSCallback; import io.dcloud.feature.uniapp.common.UniModule; public class ToastPlugin extends UniModule { @UniJSMethod(uiThread = true) public void showToast(String message) { if(mUniSDKInstance != null) { Context context = mUniSDKInstance.getContext(); Toast.makeText(context, message, Toast.LENGTH_SHORT).show(); } } }

3. 插件注册与配置

toast_plugin模块的src/main目录下新建assets文件夹,创建dcloud_uniplugins.json

{ "nativePlugins": [ { "hooksClass": "", "plugins": [ { "type": "module", "name": "ToastPlugin", "class": "com.example.toastplugin.ToastPlugin" } ] } ] }

修改主模块的build.gradle,添加对新插件的依赖:

dependencies { implementation project(':toast_plugin') }

4. 生成自定义基座

在Android Studio中:

  1. 点击Build → Generate Signed Bundle / APK
  2. 选择APK → 创建或选择现有签名文件
  3. Build Variants选择release
  4. 等待构建完成,生成的APK在app/release/目录下

将生成的APK文件重命名为android_debug.apk,复制到HBuilderX项目的unpackage/debug/目录(需先创建该目录)

5. Uniapp调用插件

在HBuilderX项目中创建测试页面:

<template> <view class="content"> <button @click="showToast">点击显示原生弹窗</button> </view> </template> <script> export default { methods: { showToast() { const toastModule = uni.requireNativePlugin('ToastPlugin') toastModule.showToast('Hello from Native!') } } } </script>

配置manifest.json启用自定义基座:

"app-plus": { "usingComponents": true, "plugins": { "ToastPlugin": { "version": "1.0.0", "provider": "com.example.toastplugin" } } }

6. 调试与问题排查

常见问题及解决方案:

问题现象可能原因解决方案
找不到插件插件未正确注册检查dcloud_uniplugins.json配置
方法调用无效方法未添加@UniJSMethod注解确保所有暴露方法都有正确注解
基座运行无效果未使用自定义基座确认HBuilderX运行的是自定义基座

调试技巧:

  • 在Android Studio的Logcat中过滤"uniPlugin"查看插件日志
  • 使用adb logcat命令实时查看设备日志
  • 修改插件代码后需要重新打包APK并替换基座文件

7. 插件功能扩展

基础弹窗功能运行成功后,可以尝试扩展更多实用功能:

设备信息获取示例

@UniJSMethod(uiThread = true) public void getDeviceInfo(UniJSCallback callback) { if(mUniSDKInstance == null || callback == null) return; Activity activity = mUniSDKInstance.getContext(); WifiManager wifi = (WifiManager)activity.getSystemService(Context.WIFI_SERVICE); WifiInfo info = wifi.getConnectionInfo(); JSONObject data = new JSONObject(); try { data.put("model", Build.MODEL); data.put("sdkVersion", Build.VERSION.SDK_INT); data.put("macAddress", info.getMacAddress()); } catch (JSONException e) { e.printStackTrace(); } callback.invoke(data); }

JS端调用方式:

toastModule.getDeviceInfo(res => { console.log('设备信息:', res) })

8. 性能优化建议

  1. 减少跨语言调用:批量传输数据优于频繁调用
  2. 异步处理耗时操作:避免阻塞UI线程
  3. 合理使用缓存:对不变的数据进行缓存
  4. 内存管理:及时释放不再使用的资源

优化后的调用示例:

@UniJSMethod(uiThread = false) public void complexOperation(JSONObject params, UniJSCallback callback) { // 在子线程执行耗时操作 String result = doHeavyWork(params); // 返回结果到JS线程 mUniSDKInstance.runOnUiThread(new Runnable() { @Override public void run() { if(callback != null) { callback.invoke(result); } } }); }

在实际项目中,我发现插件初始化的性能开销较大,推荐将多个相关功能整合到一个插件模块中,而不是创建多个小型插件。

http://www.jsqmd.com/news/720970/

相关文章:

  • 跨国软件企业的“合规风暴“:834号令三条红线深度解析与应对策略
  • 告别手动拼接命令!fscan实战:从B段扫描到Redis一键写公钥的保姆级参数指南
  • 10分钟搞定黑苹果:OpCore-Simplify自动化配置终极指南 [特殊字符]
  • Win11Debloat:3分钟快速清理Windows系统垃圾的终极免费工具
  • 【Vercel实用Skill】skill-creator 技能
  • Zotero浏览器扩展跨平台架构深度解析:如何实现学术文献一键保存的终极解决方案
  • 嵌入式编程学习日记(一)——C语言篇(文件分析库函数版)
  • 算法工程师效率工具:用 OpenClaw 自动生成数据集预处理代码、实验报告、调参日志整理
  • Meta、HuggingFace等大佬联手搞的GAIA基准测试,到底在测什么?GPT-4为啥才15%?
  • 实测 DeepSeek V4:为什么真正决定 Coding Agent 上限的,往往不是模型,而是 Harness Engineering
  • 双碳目标下的智慧园区:数字化如何赋能绿色高效运营
  • 【第26期】2026年4月29日 AI日报
  • Windows下用清华源5分钟搞定ONNX全家桶(含CUDA版本匹配避坑指南)
  • 保姆级教程:图形验证码后端核验全流程(多语言实现)
  • Winhance中文版:让你的Windows系统飞起来的免费优化神器
  • 3分钟解锁QQ音乐加密文件:qmcdump终极解密指南
  • 【助睿ETL】实验作业1——订单利润分流数据加工
  • Henghao恒浩HH温度开关原厂一级代理分销经销
  • 揭秘导师不会说:6款AI论文神器,效率飙升200%从此告别拖延 - 麟书学长
  • 在家用显卡上也能生成720P高清视频:Wan2.2-TI2V-5B实战指南
  • YOLO已经不够了:为什么自动驾驶开始转向BEV? ——从“看见物体”到“理解空间”的一次升级
  • Web运行
  • Vue3 + 高德地图JS API v2:手把手教你实现一个带进度条和倍速控制的车辆轨迹回放组件
  • 2025届必备的五大降重复率助手解析与推荐
  • 告别丑图:MapChart 2.32从安装到高级绘图(共线性、LOD曲线)全攻略
  • 定义“具身智造”新范式,海康机器人助推制造业全面升维
  • 我为什么一直看好 RustFS?Beta 发布后,我的判断更坚定了
  • 【Java结构化梳理】泛型-初步了解-上
  • 从‘卖软件’到‘管软件’:一个轻量级License授权系统如何帮你搞定私有化部署后的客户管理
  • 五种IO模型与⾮阻塞IO