Uniapp安卓原生插件开发Demo

这篇具有很好参考价值的文章主要介绍了Uniapp安卓原生插件开发Demo。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


前言

当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安卓项目

uniapp原生插件开发,uniapp,android,前端,java

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

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

uniapp原生插件开发,uniapp,android,前端,java

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

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

uniapp原生插件开发,uniapp,android,前端,java

如果下载的依赖包速度很慢,可以在build.gradle中配置镜像。
uniapp原生插件开发,uniapp,android,前端,java

三、开发Module

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

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

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

uniapp原生插件开发,uniapp,android,前端,java
uniapp原生插件开发,uniapp,android,前端,java

新建的module结构如下:

uniapp原生插件开发,uniapp,android,前端,java

此时创建一个名为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”,如下图:

uniapp原生插件开发,uniapp,android,前端,java

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

uniapp原生插件开发,uniapp,android,前端,java

在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相同

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

uniapp原生插件开发,uniapp,android,前端,java
uniapp原生插件开发,uniapp,android,前端,java

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

uniapp原生插件开发,uniapp,android,前端,java

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

uniapp原生插件开发,uniapp,android,前端,java

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

uniapp原生插件开发,uniapp,android,前端,java

运行到手机效果如下:

uniapp原生插件开发,uniapp,android,前端,java

四、开发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原生插件开发,uniapp,android,前端,java

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

点击右边栏gradle进行打包,如下图:

uniapp原生插件开发,uniapp,android,前端,java

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

uniapp原生插件开发,uniapp,android,前端,java

在HbuilderX中新建文件夹,结构如下:

uniapp原生插件开发,uniapp,android,前端,java

第二级文件名称要和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项目中看到原生的插件:

uniapp原生插件开发,uniapp,android,前端,java

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

uniapp原生插件开发,uniapp,android,前端,java

uniapp原生插件开发,uniapp,android,前端,java

总结

好了,当我们在开发中需要通过使用Andorid/iOS原生开发实现时,就可以使用App离线SDK开发原生插件来扩展原生能力了,觉得有用的话烦请收藏加关注😀😀😀
下面是小弟的公众号有兴趣的大哥可以关注一下🤭
文章来源地址https://www.toymoban.com/news/detail-664652.html

到了这里,关于Uniapp安卓原生插件开发Demo的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp ios原生插件开发之module

    在文章《uniapp ios原生插件开发 (framework,cocoapods)》中我们已经介绍了Module 类型的插件及其创建过程, 却没有深入的介绍Module类型插件开发过程中所涉及到的技术点。 本文呢就将重点放在对这些技术点的使用上进行详解,算是是对上篇文章的一个补充与扩展。 在文章开始之前

    2024年02月13日
    浏览(29)
  • 【UniAPP X快速上手】如何使用UniAPPX开发一个原生安卓商城

    uni-app x,是下一代 uni-app,是一个跨平台应用开发引擎。 uni-app x 没有使用js和webview,它基于 uts 语言。在App端,uts在iOS编译为swift、在Android编译为kotlin,完全达到了原生应用的功能、性能。 更重要的是,UniAPP X未来也会支持鸿蒙 ,这里引用DCloud社区的官方答复 DCloud有资源第

    2024年02月21日
    浏览(34)
  • uniapp原生插件开发调用第三方SDK

    uniapp安卓官方SDK Android 离线SDK - 正式版 | uni小程序SDK 官方uni原生插件开发教程(android)网址: 简介 | uni小程序SDK 第一步,开发环境的准备 下载uniapp安卓官方SDK待后面使用,解压完成如下图所示。 JAVA环境 jdk,打开cmd输入java -version查看自己的jdk版本,官方文档中提示jdk版本应

    2024年02月15日
    浏览(30)
  • uniapp开发安卓App注意事项(HTML5+规范 plus调用安卓原生能力:广播,扫描,相机等)

    使用安卓调试基座进行调试大大降低了uniapp开发安卓app的门槛 安卓开发经常需要调用到安卓原生的api,例如广播,扫码,相机等等,uniapp内置了App端的HTML5+规范,可以使用js直接调用丰富的原生能力。例如在安卓中调用原生的激光扫描能力: 该plus对象便是uniapp内置的HTML5+规

    2024年03月19日
    浏览(35)
  • 原生Android与uniapp开发的H5混合开发

    vue版本选择2.0  记住一点,打包H5前修改配置,否则在Android中打开会白屏,修改方式如下 打包成H5,打包后可以在浏览器打开确保有内容 assets文件夹没有就自己建 xml布局文件处加入一个webview标签 Activity的 onCreate周期加入如下代码 运行项目就可以看到uniAPP的页面了

    2024年02月21日
    浏览(30)
  • uniapp开发云打包详细流程(包含安卓Android和苹果IOS)

    Hbuilder在菜单栏选择“发行”,选择“原生App-云打包”,使用云打包不需要学习Android Studio的使用,节省开发时间,但是云打包需要排队(排队人数越多等待时间越长),每个账号每天限制打包5次。                     1.2.1、安卓包名 在项目中打开manifest.json文件,基础配

    2024年02月08日
    浏览(41)
  • uniapp——安卓扫码枪插件

    2.1、开启扫码 2.2、关闭扫码 3.1、startScan方法的参数: 第一个参数:json对象,根据实际情况传递,第二个参数会回传回来 参数名 类型 默认值 说明 name String 扫码 组件名称 showTip Boolean true 是否展示提示文字 tip String 扫码中… 提示文字 tipSize Number 12 提示文字大小 tipColor Stri

    2024年04月11日
    浏览(28)
  • uniapp引入小程序原生插件

    怎么在uniapp中使用微信小程序原生插件,以收钱吧支付插件为例 附录:收钱吧小程序签名算法实现 javascript java

    2024年02月08日
    浏览(32)
  • uniapp使用原生小程序插件

            本文主要讲述在uniapp上使用原生插件步骤 1、在使用插件之前,先登录微信公众平台,在微信公众平台,点击左下角设置==》第三方设置==》添加插件==》输入插件名字==》点击确定提交申请==》申请通过后可以使用该插件 第一步    2.搜索你需要的插件点击添加    

    2024年02月08日
    浏览(27)
  • uniapp使用微信小程序提供的原生插件(组件)

    小程序交易保障标展示组件 为例 参考uniapp加载插件、微信小程序加载插件 1. manifest.json: 先打开manifest.json文件,然后我们找到\\\"mp-weixin\\\",引入需要使用的插件 2. pages.json 打开pages.json文件,然后再对应的页面配置处添加东西 3.页面使用

    2024年02月11日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包