UniApp原生插件开发Demo

2023-06-27 0 1,044

UniApp原生插件开发Demo

我们好,我是合作开发时数一年半的Java开发人员小邵UniApp原生插件开发DemoUniApp原生插件开发DemoUniApp原生插件开发Demo

当HBuilderX中提供更多的潜能难以满足用户App机能市场需求,须要透过采用Andorid/iOS原生植物合作开发同时实现时,可采用AppappSDK合作开发原生植物应用程序来扩充原生植物能力。这儿举三个范例来表明具体内容的业务流程

官方网站文件格式门牌号:

https://nativesupport.dcloud.net.cn/NativePlugin/README

01

加装合作应用软件

JAVA:jdk1.8

Android Studio:浏览门牌号Android Studio官方网站 OR Android Studio英文街道社区

AppappSDK浏览:请浏览2.9.8+版本的android平台SDK

HBuilderX 浏览门牌号:官方网站浏览

02

导入uni应用程序原生植物项目

加装好合作应用软件后,先导入浏览的Uniapp Demo中解压后有一个叫UniPlugin-Hello-AS安卓项目,UniPlugin-Hello-AS工程请在AppappSDK中查找:

UniApp原生插件开发Demo

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

UniApp原生插件开发Demo

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

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

UniApp原生插件开发Demo

如果浏览的依赖包速度很慢,可以在build.gradle中配置镜像:

UniApp原生插件开发Demo

03

合作开发Module

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

主要分为两类扩充:

1、Module 扩充 非 UI 的特定机能。

2、Component 扩充同时实现特别机能的 Native 控件。

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

UniApp原生插件开发Demo

UniApp原生插件开发Demo

新建的module结构如下:

UniApp原生插件开发Demo

此时创建一个名为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方法(用来计算三个数的和)。代码如下:

@UniJSMethodpublic void add(JSONObject json, UniJSCallback callback){ final int a = json.getIntValue(“a”); final int b = json.getIntValue(“b”); callback.invoke(newJSONObject(){{ put(“code”,200); put(“result”,a+b); }});}

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

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

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

UniApp原生插件开发Demo

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

UniApp原生插件开发Demo

在pages的index文件的index.nvue中的<template>中添加代码:

<button type=“default” @click=“testAdd”>2+5=</button>testAdd(){ consttestModule = 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原生插件开发Demo

UniApp原生插件开发Demo

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

UniApp原生插件开发Demo

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

UniApp原生插件开发Demo

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

UniApp原生插件开发Demo

运行到手机效果如下:

UniApp原生插件开发Demo

04

合作开发Component

过程大致和Module类似,模仿一个原生植物输入框,在TestModule相同的包下创建TestComponent类,继承UniComponent<EditText>,并采用super调用父类构造函数:

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

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

@Overrideprotected EditText initComponentHostView(@NonNullContext context) { return new EditText(context);}@UniComponentProp(name = “setText”)public void setText(Stringtext){ 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下文件目录,AndroidStudio中运行。如下图:

UniApp原生插件开发Demo

05

合并原生植物代码到uniapp项目中

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

UniApp原生插件开发Demo

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

UniApp原生插件开发Demo

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

UniApp原生插件开发Demo

第二级文件名称要和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原生插件开发Demo

之后云打包,运行到安卓基座,就可以运行这个原生植物应用程序了,效果如下:

UniApp原生插件开发Demo应用程序目前暂时不支持Kotlin。如果在必要情况下,必须采用Kotlin的时候,可以在package.json中加入dependences。当然我没有试过,有兴趣的小伙伴可以尝试一下:

UniApp原生插件开发Demo

UniApp原生插件开发Demo

UniApp原生插件开发Demo

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务