Uniapp安卓原生插件开发Demo

文章目录

  • 前言
  • 一、安装开发工具
  • 二、导入uni插件原生项目
  • 三、开发Module
  • 四、开发Component
  • 五、合并原生代码到uniapp项目中
  • 总结

前言

当HBuilderX中提供的能力无法满足App功能需求，需要通过使用Andorid/iOS原生开发实现时，可使用App离线SDK开发原生插件来扩展原生能力。这里举两个例子来说明具体的流程。

官网文档地址：
https://nativesupport.dcloud.net.cn/NativePlugin/README

一、安装开发工具

JAVA： jdk1.8
Android Studio： 下载地址Android Studio官网 OR Android Studio中文社区
App离线SDK下载： 请下载2.9.8+版本的android平台SDK
HBuilderX 下载地址： 官网下载

二、导入uni插件原生项目

安装好开发工具后，先导入下载的Uniapp Demo中解压后有一个叫UniPlugin-Hello-AS安卓项目

在这里插入图片描述

UniPlugin-Hello-AS工程请在App离线SDK中查找

打开Android Studio菜单选项File—>New—>Import Project。

在这里插入图片描述

不同的Android 的Sdk和gradle的版本是存在对应关系的，如果gradle sync失败更换gradle版本或更换Android
Studio版本，不然的话会报各种错误

导入成功之后，等待一会，它会自动下载一些依赖的包，如过程中控制台报错，仔细去看，与下图类似的就提示你缺SDK，问你要不要下载，你点Install，然后选择accept，点击next下载，完了error就没了。

在这里插入图片描述

如果下载的依赖包速度很慢，可以在build.gradle中配置镜像。
在这里插入图片描述

三、开发Module

可以根据自己的业务进行定制自己的功能。

主要分为两类扩展：
1、Module 扩展 非 UI 的特定功能。
2、Component 扩展实现特别功能的 Native 控件。

在项目根目录右击new——》Module——》Android Library——》next

在这里插入图片描述
在这里插入图片描述

新建的module结构如下：

在这里插入图片描述

此时创建一个名为TestModule的类，继承UniModule。
在新建好类之后，在app中assets的dcloud_uniplugins.json文件中加入如下代码，将新建的类注册进去：

{
  "plugins": [
    {
      "type": "module",
      "name": "szjplugin_testmodule",
      "class": "com.example.szjplugin.testmodule.TestModule"
    }
  ]
}

之后在Gradle Scripts的build.gradle(app)中添加如下代码，将新建的模块进行注册进去：

// 添加uni-app插件
implementation project(':uniplugin_component')
implementation project(':uniplugin_module')
implementation project(':uniplugin_richalert')
implementation project(':szjplugin_testmodule')

之后在TestModule中写一个add方法（用来计算两个数的和）。 代码如下：

@UniJSMethod
public void add(JSONObject json, UniJSCallback callback){
    final int a = json.getIntValue("a");
    final int b = json.getIntValue("b");
    callback.invoke(new JSONObject(){{
        put("code",200);
        put("result",a+b);
    }});
}

@UniJSMethod注解就和@Controller的作用是一样的，上述代码调用理解成JS代码的话，可以看做是如下代码：

Module.add({
}，e => {
});

还需要进行配置，使项目可以调试，生成自定义基座，需要在根节点下添加debug="true"和syncDebug=“true”，如下图：

在这里插入图片描述

此时Android
Studio就告一段落，接下来来到HbuilderX中，新建一个uniapp项目。并创建nativeplugins目录（后面用到），结构如下：

在这里插入图片描述

在pages的index文件的index.nvue中的中添加代码：

<button type="default" @click="testAdd">2+5=</button>

TestAdd方法如下：

testAdd(){
	const testModule = uni.requireNativePlugin("szjplugin_testmodule")
		testModule.add(
		{
			a:2,
			b:5
		},
		e => {
			uni.showToast({
				title:JSON.stringify(e),
				icon:"none"
			})
		}
		)
	}
}

uni.requireNativePlugin(“szjplugin_testmodule”)中的参数要和在app中assets的dcloud_uniplugins.json文件中加入的plugins相同

这时候就可以进行发行，本地打包

在这里插入图片描述
在这里插入图片描述

再回到Android Studio中，将下图的文件删除，替换成刚刚打包得到的文件。

在这里插入图片描述

此时在dcloud_control.xml中将appid换成打包得到的文件名称。

在这里插入图片描述

一切就绪之后，就可以在Android Studio中进行调试了，也可以打断点调试，确保集成到uniapp是没有问题，免得一直重复打包调试

在这里插入图片描述

运行到手机效果如下：

在这里插入图片描述

四、开发Component

过程大致和Module类似，模仿一个原生输入框，在TestModule相同的包下创建TestComponent类，继承UniComponent，并使用super调用父类构造函数

public class TestComponent extends UniComponent<EditText> {
    public TestComponent(UniSDKInstance instance, AbsVContainer parent, AbsComponentData componentData) {
        super(instance, parent, componentData);
    }
}

重写方法：这个方法对组件进行初始化

@Override
protected EditText initComponentHostView(@NonNull Context context) {
    return new EditText(context);
}
@UniComponentProp(name = "setText")
public void setText(String text){
    getHostView().setText(text);
}

写好之后不要忘记在app中assets的dcloud_uniplugins.json文件中加入如下代码，将新建的类注册进去。
就绪后再回到HbuilderX，在button的下方添加代码使用组件：

<sn-input ref=”input” style="width: 400rpx;height: 60rpx;border-width: 2rpx;border-color: #2C405A;background-color: #2C405A"/>
<button type="default" @click="testSetText"></button>

testSetText(){
	this.$refs.input.setText("hello uni plugin");
}

组件名称要和app中assets的dcloud_uniplugins.json一致。之后本地打包，替换app下文件目录，Android
Studio中运行。如下图：

在这里插入图片描述

五、合并原生代码到uniapp项目中

点击右边栏gradle进行打包，如下图：

在这里插入图片描述

打包好之后在项目文件目录中找到

在这里插入图片描述

在HbuilderX中新建文件夹，结构如下：

在这里插入图片描述

第二级文件名称要和package.json中的id相同。Package.json如下：

{
  "name":"Android插件开发Demo",
  "id":"szj-textmodule",
  "version":"1.0.0",
  "description":"提供Android插件开发Demo",
  "_dp_type":"nativeplugin",
  "_dp_nativeplugin": {
    "android": {
      "integrateType":"aar",
      "plugins":[
        {
          "type": "module",
          "name": "szjplugin_testmodule",
          "class": "com.example.szjplugin.testmodule.TestModule"
        },
        {
          "type": "module",
          "name": "sn-input",
          "class": "com.example.szjplugin.testmodule.TestComponent"
        }
      ]
    }
  }
}

文件好了之后，就可以在uniapp项目中看到原生的插件：

在这里插入图片描述

之后云打包，运行到安卓基座，就可以运行这个原生插件了，效果如下：
插件目前暂时不支持Kotlin。如果再必要情况下，必须使用Kotlin的时候，可以在package.json中加入dependences。当然我没有试过，有兴趣的小伙伴可以尝试一下。

在这里插入图片描述

在这里插入图片描述

总结

好了，当我们在开发中需要通过使用Andorid/iOS原生开发实现时，就可以使用App离线SDK开发原生插件来扩展原生能力了，觉得有用的话烦请收藏加关注😀😀😀
下面是小弟的公众号有兴趣的大哥可以关注一下🤭
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/235998.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

第二十一章，网络通信

第二十一章，网络通信

网络协议 IP协议 IP是Internet Protocol的简称&#xff0c;是一种网络协议。Internet 网络采用的协议是TCP/IP协议&#xff0c;其全称是Transmission Control Protocol/Internet Protocol。Internet 依靠TCP/IP协议&#xff0c;在全球范围内实现了不同硬件结构、不同操作系统…
阅读更多...
排序算法之三：希尔排序

排序算法之三：希尔排序

希尔排序基本思想 希尔排序法又称缩小增量法 希尔排序法的基本思想是&#xff1a;先选定一个整数&#xff0c;把待排序文件中所有记录分成个组&#xff0c;所有距离为的记录分在同一组内&#xff0c;并对每一组内的记录进行排序。然后&#xff0c;取&#xff0c;重复上述分组…
阅读更多...
Vue3+ElementPlus：icon图标不显示（给表格字段里添加图标）

Vue3+ElementPlus：icon图标不显示（给表格字段里添加图标）

一、背景 在Vue3项目中&#xff0c;想在表格的字段中引入图标因为给字段做了触发提示&#xff0c;希望用户能够注意到这个功能&#xff0c;因此想加个图标提示一下用户&#xff0c;效果如下&#xff1a; 触发提示效果如下&#xff1a; &#xff08;样式这里就不进行优化了&am…
阅读更多...
【VS Code开发】使用Live Server搭建MENJA小游戏并发布至公网远程访问

【VS Code开发】使用Live Server搭建MENJA小游戏并发布至公网远程访问

文章目录 前言1. 编写MENJA小游戏2. 安装cpolar内网穿透3. 配置MENJA小游戏公网访问地址4. 实现公网访问MENJA小游戏5. 固定MENJA小游戏公网地址 前言 本篇教程&#xff0c;我们将通过VS Code实现远程开发MENJA小游戏&#xff0c;并通过cpolar内网穿透发布到公网&#xff0c;分…
阅读更多...
【nodejs升级版本】win10 nodejs版本低升级版本流程

【nodejs升级版本】win10 nodejs版本低升级版本流程

首先 网上说的n模块不支持window系统&#xff01;&#xff01;&#xff01; window系统升级node只能到node官网下载window安装包来覆盖之前的node 升级步骤如下&#xff1a; 1&#xff0c;找到你node的安装路径&#xff0c;不知道的可以cmd命令行中输入这个命令就可以看到了…
阅读更多...
Python：核心知识点整理大全13-笔记

Python：核心知识点整理大全13-笔记

目录 6.4.3 在字典中存储字典 6.5 小结 第7章 用户输入和while循环 7.1 函数 input()的工作原理 7.1.1 编写清晰的程序 7.1.2 使用 int()来获取数值输入 7.1.3 求模运算符 7.1.4 在 Python 2.7 中获取输入 7.2 while 循环简介 7.2.1 使用 while 循环 往期快速传送门…
阅读更多...
jsonpath:使用Python处理JSON数据

jsonpath:使用Python处理JSON数据

使用Python处理JSON数据 25.1 JSON简介 25.1.1 什么是JSON JSON全称为JavaScript Object Notation&#xff0c;一般翻译为JS标记&#xff0c;是一种轻量级的数据交换格式。是基于ECMAScript的一个子集&#xff0c;采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清…
阅读更多...
中国教师未来发展趋势

中国教师未来发展趋势

随着科技的进步和社会的发展&#xff0c;教师的发展趋势尤其引人关注。那么&#xff0c;教师未来的发展趋势又将是什么呢&#xff1f;” 引领未来的教育变革 在快速发展的信息化社会&#xff0c;教育行业正经历着前所未有的变革。中国教师将扮演着引领这场变革的重要角色。未来…
阅读更多...
教培管理系统源码 培训管理系统源码

教培管理系统源码 培训管理系统源码

教培管理系统源码 培训管理系统源码 使用教培管理系统可以带来哪些好处&#xff1a; 1. 提高管理效率&#xff1a;教培管理系统可以自动化处理许多管理任务&#xff0c;如学生信息管理、课程管理、成绩管理等&#xff0c;从而减少人工干预&#xff0c;提高管理效率。 2. 提…
阅读更多...
Nodejs后端+express框架

Nodejs后端+express框架

前言 基于vue3Node后台管理项目&#xff0c;补充nodejs和express相关知识。 文章目录 一&#xff0c;express 1.官网 Express - 基于 Node.js 平台的 web 应用开发框架 - Express中文文档 | Express中文网 2.安装 npm install express --save 二、MongoDB 特点 非关…
阅读更多...
3D摄影棚布光：Set A Light 3D Studio

3D摄影棚布光：Set A Light 3D Studio

Set A Light 3D Studio是一款专业的灯光模拟软件&#xff0c;旨在帮助摄影师和电影制片人在电脑上进行虚拟灯光布置和场景模拟&#xff0c;以实现更加精准和高质量的拍摄效果。该软件提供了丰富的灯光和场景模型&#xff0c;支持灵活调整光源位置、强度、颜色和效果等参数&…
阅读更多...
stm32学习：stm32f103c8t6+STM32CubeMX+st-link烧录+亮灯

stm32学习：stm32f103c8t6+STM32CubeMX+st-link烧录+亮灯

准备材料&#xff1a; stm32f103c8t6开发板st-link烧录器安装stm32cubemx(官网下载就行)安装keil5&#xff08;找找网上有很多破解软件&#xff0c;下载后破解&#xff09;安装st-link驱动&#xff08;下载入口STSW-LINK009 - 为Windows 7、Windows 8、Windows 10签署的ST-LIN…
阅读更多...
基于深度学习的yolov7植物病虫害识别及防治系统

基于深度学习的yolov7植物病虫害识别及防治系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介简介YOLOv7 系统特性工作流程 二、功能三、系统四. 总结 一项目简介 # YOLOv7植物病虫害识别及防治系统介绍 简介 该系统基于深度学习技术&#xff0c;采…
阅读更多...
python+pytest接口自动化(13)-token关联登录

python+pytest接口自动化(13)-token关联登录

在PC端登录公司的后台管理系统或在手机上登录某个APP时&#xff0c;经常会发现登录成功后&#xff0c;返回参数中会包含token&#xff0c;它的值为一段较长的字符串&#xff0c;而后续去请求的请求头中都需要带上这个token作为参数&#xff0c;否则就提示需要先登录。 这其实就…
阅读更多...
ArkUI Button组件

ArkUI Button组件

Button 1.声明button组件 Button(label?:ResourceStr) label是按钮上面显示的文字 如果不传入label 则需要在内部嵌套其他组件 内部嵌套其他组件 可以放入icon图标来构建自己想要的样式 按钮类型 按钮使用type(ButtonType.xxx)属性来设置&#xff0c;xxx的类型分为三种 1.…
阅读更多...
想知道修改图片dpi会影响清晰度吗？点击这里找答案

想知道修改图片dpi会影响清晰度吗？点击这里找答案

很多人都对图片dpi分辨率有不少疑问&#xff0c;比如dpi对图片清晰的影响&#xff0c;还有哪些地方需要修改图片dpi&#xff1f;其实dpi是指每英寸墨点的数量。对同一张图像来说,一般使用300dpi比使用72dpi打印出来的效果要清晰很多 &#xff0c;一般只有在打印照片或者上传证件…
阅读更多...
pip指定优先从豆瓣源下载包

pip指定优先从豆瓣源下载包

对于 Unix/macOS 系统&#xff0c;使用以下命令&#xff1a; pip config set global.index-url https://pypi.douban.com/simple/ 对于 Windows 系统&#xff0c;打开命令提示符或PowerShell&#xff0c;并使用相同的命令&#xff1a; pip config set global.index-url http…
阅读更多...
Unity中实现ShaderToy卡通火（一）

Unity中实现ShaderToy卡通火（一）

文章目录 前言一、准备好我们的后处理基础脚本1、C#&#xff1a;2、Shader&#xff1a; 二、开始逐语句对ShaderToy进行转化1、首先&#xff0c;找到我们的主函数 mainImage2、其余的方法全部都是在 mainImage 函数中调用的方法3、替换后的代码(已经没报错了&#xff0c;都是效…
阅读更多...
渲染技术在虚拟仿真中的应用

渲染技术在虚拟仿真中的应用

虚拟仿真&#xff08;Virtual Reality&#xff09;是一种仿真技术&#xff0c;它使用计算机生成一个虚拟世界&#xff0c;用户可以通过各种传感通道与这个虚拟世界进行自然的交互。虚拟仿真技术可以创建和体验虚拟世界&#xff0c;使用户可以像在真实世界中一样进行操作和体验。…
阅读更多...
Python将字典列表导出为Excel文件的方法

Python将字典列表导出为Excel文件的方法

将如下的字典列表内容导出为Excel表格文件形式&#xff1a; python将字典列表导出为Excel文件的方法&#xff0c;如下所示&#xff1a; 1、安装python官方Excel库------xlwt 直接在终端进行安装即可&#xff1a;pip install xlwt 安装完成后&#xff0c;在程序中引入xlwt的库…
阅读更多...
最新文章

Copyright @ 2022~2023