uniapp安卓原生插件开发流程

本文详细记录了uni原生插件的开发过程,包括准备开发环境、创建与调试插件、打包及发布到插件市场。通过实例展示了如何在Android Studio中创建一个名为ToastPlus的插件,实现与uniapp的交互,并提供了完整的代码示例。最终,文章指导如何将插件打包为本地插件,并进行本地调试,以及如何提交到插件市场。
摘要由CSDN通过智能技术生成


记录下uni原生插件开发流程

看官方文档看的有点头蒙 特此记录下
作为长期伸手党的我深知你们喜欢的是什么
在这里插入图片描述
OK先上源码链接
Hbuilder X打开 UniToast
AndroidStudio打开UniPlugin-Hello-AS
注意此项目使用的是uni Android-SDK@2.9.8.80513_20201111

参考文章
官方文档链接

一、准备开发环境

二、开发调试插件

一、导入项目

  • 导入uni插件原生项目 UniPlugin-Hello-AS工程请在App离线SDK中查找
  • 点击Android Studio菜单选项File—>New—>Import Project。在这里插入图片描述
  • 导入以后目录结构如下
    在这里插入图片描述
  • 升级项目为androidx 点击等待即可点击等待即可
    在这里插入图片描述

一、创建插件Library

  • 因为uni的toast有字符长度限制 下面用一个最简单的调用原生Toast的方式
    在这里插入图片描述
    选择Android Library
    在这里插入图片描述
    输入 Library名称toastplus 点击finish在这里插入图片描述
    然后在app目录下的build.gradle下引入 toastplus
    在这里插入图片描述
    将app libs目录下的 uniapp-v8-release.aar包(名字可能不一样)复制到 toastplus libs下在这里插入图片描述
    然后修改modle toastplus中的build.gradle文件 引入aar包 点击右上角同步即可
    在这里插入图片描述
    然后在modle目录下创建ToastPlus类集成UniMoudle
    在这里插入图片描述

ToastPlus代码如下

public class ToastPlus extends UniModule {
    JSCallback jsCallback;
    String path = "";

    /**
     * 简单回调示例
     * 传入一个String类型 处理并返回
     */
    @JSMethod(uiThread = true)
    public void processData(String data, JSCallback jsCallback) {
        this.jsCallback = jsCallback;
        if (mWXSDKInstance != null && mWXSDKInstance.getContext() instanceof Activity) {
            path = data + "+(处理完成)";
            //返回处理结果 进行回调
            jsCallback.invoke(path);
        }
    }

    /**
     * 调用原生Toast显示传入内容
     */
    @JSMethod(uiThread = true)
    public void showToast(String message) {
        if (mWXSDKInstance != null && mWXSDKInstance.getContext() instanceof Activity) {
            Toast.makeText(mWXSDKInstance.getContext(), message, Toast.LENGTH_SHORT).show();
        }
    }
}

  • 在app/dcloud_uniplugins.json文件中添加插件信息
    在这里插入图片描述
    name为uni调用原生插件的名称 class为绝对路径

三、创建uni项目

打开HBuilderX,务必保证使用最新uniapp安卓原生SDK以及HBuilderX最新版本

新建uniapp项目 并修改index代码
在这里插入图片描述

index.vue代码如下

<template>
	<view class="content">
		<view class="button1">
			<button @click="showToast(message)">点击显示原生Toast</button>
		</view>
		<view class="button2">
			<button @click="processData(waitprocessdata)">回调的使用</button>
		</view>
	</view>
</template>

<script>
	const ToastPlusModule = uni.requireNativePlugin("toastplus")
	export default {
		data() {
			return {
				message: '我是一条很长的Toast我是一条很长的Toast',
				waitprocessdata: '我是待处理的数据'
			}
		},
		onLoad() {

		},
		methods: {
			showToast(message) {
				ToastPlusModule.showToast(message)
			},
			processData(data) {
				ToastPlusModule.processData(data, processokdata => {
					ToastPlusModule.showToast(processokdata)
				})
			}
		}
	}
</script>

<style>
	.button1 {
		display: flex;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.button2 {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 100rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}
</style>

三、调试插件

点击本地资源打包
在这里插入图片描述
控制台会输出路径
在这里插入图片描述

复制**__UNI__904803F** 文件夹到AndroidStudio
app/src/main/assets/apps/目录下 并修改
dcloud_control.xml中的appid字段
在这里插入图片描述
点击运行即可调试插件
运行结果
在这里插入图片描述
在这里插入图片描述
如果你可以成功运行 恭喜你 uni的原生插件你已经开发完成了
下面讲一下如何打包为提交市场需要的zip包

三、打包为本地插件

  1. 在本地创建一个文件夹 名称可以命名为你的uni账户名-插件名称
    在这里插入图片描述
    我们先来编辑这个pakege.json文件
    在这里插入图片描述
    代码如下
{
    "name": "ToastPlus",
    "id": "AndroidLMY-ToastPlus",
    "version": "1.0.0",
    "description": "原生Toast",
    "_dp_type":"nativeplugin",
    "_dp_nativeplugin":{
        "android": {
            "plugins": [
                {
                    "type": "module",
					"name":"ToastPlus",
                    "class": "com.lmy.toastplus.ToastPlus"
                }
            ],
            "integrateType": "aar" 
        }    
    }
}

然后打包插件的aar包
androidstudio选中右侧gradle选中图中选项点击即可
在这里插入图片描述
aar包输入路径为
在这里插入图片描述
复制aar包到android目录下在这里插入图片描述

四、调试本地插件

我们在打包为zip压缩包之前首先测试插件的可用性
打开uni项目
将整理好的文件夹放入nativeplugins文件夹下(没有创建即可)
在这里插入图片描述
然后修改index.vue在这里插入图片描述
然后配置本地插件
在这里插入图片描述
最后点击发行云打包在这里插入图片描述
配置签名文件即可 然后点击打包
在这里插入图片描述
打包完成以后控制台会有输出下载地址 点击下载安装进行测试即可
在这里插入图片描述

五、发布本地插件到插件市场

如果测试没有问题就可以吧整理的文件夹进行zip压缩准备提交市场了
在这里插入图片描述
最后填写完以后点击发布等待审核即可

评论 20
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值