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开发原生插件来扩展原生能力了,觉得有用的话烦请收藏加关注😀😀😀
下面是小弟的公众号有兴趣的大哥可以关注一下🤭
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

改进的A*算法的路径规划(2)

子节点优化选择策略 (1)子节点选择方式 为了找到从起始点到终点的路径&#xff0c;需定义一种可以选择后续节点的方式。在 A*算法中两种常见的方法为4-邻接(见图5-7(a) 和8-邻接(见图5-7(b)), 但考虑到 在复杂越野环境上&#xff0c;我们希望智能车辆允许更多的自由运动来更…

文件传输加速,这些aspera替代方案比你想象中还要好用

文件传输对于企业的业务来说是至关重要的&#xff0c;例如&#xff1a;多媒体制作、数据备份、云存储等。但是传统的文件传输方式&#xff0c;如FTP、SCP、HTTP甚至RSYNC&#xff0c;往往因为文件大小过大或者网络延迟等原因导致传输速度缓慢&#xff0c;给企业带来了极大的影响…

FTP、U盘等传统数据安全摆渡方法的6个弊端

数据安全摆渡&#xff0c;即数据在不同的网络之间&#xff0c;进行安全流转。做网间隔离的初衷&#xff0c;就是为了保护数据安全&#xff0c;但是在数据摆渡时&#xff0c;除了安全&#xff0c;企业还是需要考虑其他的要素&#xff0c;比如可靠性、易用性、兼容性等等。而传统…

【强化学习-读书笔记】多臂赌博机 Multi-armed bandit

参考 Reinforcement Learning, Second Edition An Introduction By Richard S. Sutton and Andrew G. Barto强化学习与监督学习 强化学习与其他机器学习方法最大的不同&#xff0c;就在于前者的训练信号是用来评估&#xff08;而不是指导&#xff09;给定动作的好坏的。 …

酒店管理平台

SSM MySQL Spring SecurityLayui等技术实现的管理系统 技术栈 后端&#xff1a; 核心框架&#xff1a;SSM 持久层框架&#xff1a;MyBatis 权限框架&#xff1a;Spring Security 分页插件&#xff1a;PageHelper 数据库&#xff…

react中img引入本地图片的方式

在html文件中&#xff0c;可以直接<img src./roadBook.png /> 但是在jsx文件中&#xff0c;不支持这种写法 必须这样写 在css样式中 App.css .img{background: url(./img/roadBook.png) }App.js import ./App.css;<div classNameimg></div> 1.基于es6Mod…

uniCloud(二) 使用数据库、前端展示数据

一、在云服务空间的云数据库中新建一张表 &#xff08;1&#xff09;它有两种方式&#xff0c;我暂时手动创建一张表 &#xff08;2&#xff09;修改表结构&#xff1a;权限read为true &#xff08;3&#xff09;添加数据记录 注意&#xff1a;需要一条一条的加入 二、在前端…

宿舍智能电能表预付费系统的费控策略及应用

安科瑞电气股份有限公司 上海嘉定 201801 摘要:基于智能电能表的预付费系统平台可以实现对预付费客户的适时算费、远程费控和服务。预付费系统的费控策略包括算费子策略、催费预警提醒子策略、欠费停电子策略,介绍3个子策略的制定原则、设计流程,并以示例说明策略的实现方式,通…

Kubeadm 方式部署K8s集群

环境 主节点CPU核数必须是 ≥2核且内存要求必须≥2G&#xff0c;否则k8s无法启动 主机名地址角色配置kube-master192.168.134.165主节点2核4Gkube-node1192..168.134.166 工作节点2核4Gkube-node2192.168.134.163工作节点2核4G 1.获取镜像 谷歌镜像[由于国内网络原因…

C++ 指针常量和常量指针的区别

指针常量 指针常量&#xff1a;顾名思义它就是一个常量&#xff0c;但是是指针修饰的。 格式为&#xff1a; int * const p //指针常量在这个例子下定义以下代码&#xff1a; int a&#xff0c;b&#xff1b; int * const p&a //指针常量 //那么分为一下两种操作 *p9;//操…

Dockerfile创建镜像介绍

1.介绍 Docker 提供了一种更便捷的方式&#xff0c;叫作 Dockerfile&#xff0c;docker build命令用于根据给定的Dockerfile构建Docker镜像。 docker build语法&#xff1a; # docker build [OPTIONS] <PATH | URL | -> 常用选项说明 --build-arg&#xff0c;设置构建时的…

【matlab】拆雷的程序

前言 法术的仙意&#xff0c;无法遮盖你千年的痴迷。——《仙逆》 \;\\\;\\\; 目录 前言拆雷 拆雷 function Bomb(n,mm) clear; close; if nargin ~ 2n [22,18];mm 65; end if mm 1 > n(1) * n(2)error(Setting error); endf1 figure(Name,Bombs,NumberTitle,off,Colo…