uni-app 原生安卓插件基础

下载所需要的东西

  1. java8
  2. Android Studio
  3. HBuilder X
  4. 官方提供的sdk

java8

  1. 一定要使用这个java 环境,不然会出现各种莫名其妙的错误

    地址:https://www.oracle.com/java/technologies/javase/javase8-archive-downloads.html

    下载前可能需要登录,一步一步来就可以,配置不配置全局好像是都可以,我是配置了的,因为我感觉在编译器中配置也是可以的,应该是一样的

Android Studio

  1. 没啥好说的,直接官方下载即可,如果不想安装到c盘可以去更改文件设置,自行处理吧

    地址:https://developer.android.google.cn/

HBuilder X

  1. 这个很熟悉,直接下载就好了

官方提供的sdk

  1. 这个东西每次都会随着HBuilder X的更新而去更新,(有的时候可能会有延迟)

开始

  1. 在Android Studio中导入项目

  2. 设置 一定要
    在这里插入图片描述

在这里插入图片描述

完成这一步骤后就可以开发了插件了

我们制作插件的时候是创建的一个模块在我们创建的这个模块中去开发

在这里插入图片描述

新建的这个文件复制案例中的uniplugin_module模块下的这个文件
在这里插入图片描述

新建的一个java 文件名为 AddModel

这个文件里面的内容可以根据自己业务去写 一定要去继承这个类 还有这个注解

插件是分为两种

  1. Module 扩展 非 UI 的特定功能.
  2. Component 扩展 实现特别功能的 Native 控件.

具体可以根据文档:https://nativesupport.dcloud.net.cn/NativePlugin/course/android?id=%e6%8f%92%e4%bb%b6%e5%bc%80%e5%8f%91

package com.example.leruge_add;


import android.nfc.NfcManager;
import android.util.Log;

import com.alibaba.fastjson.JSONObject;

import io.dcloud.feature.uniapp.annotation.UniJSMethod;
import io.dcloud.feature.uniapp.bridge.UniJSCallback;
import io.dcloud.feature.uniapp.common.UniModule;

public class AddModel extends UniModule {


    private static final String TAG = "pull";

    @UniJSMethod(uiThread = true)
    public void add(JSONObject json, UniJSCallback callback) {
        Log.e(TAG, "add: 我执行了");
        int a = json.getIntValue("a");
        int b = json.getIntValue("b");
        JSONObject res = new JSONObject();
        res.put("code", 1);
        res.put("result", a + b);
        callback.invoke(res);
    }

    public  void  nfc (){

    }
}

写到这里就完成了插件的制作

调试插件

这里的顺序可以不同,但是一定要都过一遍

  1. 注册插件

在app下的src->main->assets->dcloud_uniplugins.json 这个文件中去注册这个插件
在这里插入图片描述

填写app->src->AndroidManifest 这个文件去申请离线打包秘钥

在这里插入图片描述

  1. 需要使用hbulidx 创建一个应用 需要dcloud账号 自己注册就行 然后创建一个uni-app的项目

  2. 在获取这个秘钥之前你需要自己创建一个安卓的打包证书文件,不需要任何东西就可以

  3. 使用创建项目的账号登录到开发者平台进入到《离线打包key管理》填写包名 sha1
    在这里插入图片描述

  4. 将创建的打包文件放到app 下根目录 然后再app 下的 build.gradle 文件中填写
    在这里插入图片描述

  5. 在Hbulix 中的uni-app 项目中使用插件并导出打包资源文件

    <template>
    	<view>
    		<button @click="add">加法</button>
    		<button @click="nfs">nfc</button>
    	</view>
    </template>
    
    <script>
    	import testtest from "../../js_sdk/hexiii-nfc/hexiii-nfc.js"
    	export default {
    		methods: {
    			add() {
    				// 引入原生插件 leruge-add  你设置的插件的名称
    				let lerugeAdd = uni.requireNativePlugin("leruge-add")
    				// 调用
    				lerugeAdd.add({
    					a: 1,
    					b: 2
    				}, res => {
    					uni.showToast({
    						title: JSON.stringify(res),
    						icon: 'none'
    					})
    				})
    			},
    			nfs() {
    				testtest.listenNFCStatus();
    			}
    		}
    	}
    </script>
    
    <style>
    </style>
    
    

    编写完成代码后将文件进行打包
    在这里插入图片描述

  6. 将打包后的文件放大app->src->main->assets->apps目录下

    修改成自己的uni-app id

在这里插入图片描述

同时修改dcloud_control文件中的uni-app的id
在这里插入图片描述

uni-app 在哪看?好问题,你的登录的那个开发者的那个就是也可以在项目中的manifest.json文件中看
在这里插入图片描述
到了这来就可以调试了
在这里插入图片描述

如果没有模拟器的话可以安装一个,也可以真机,都可以,这样就可以看到运行后的结果了,当调试的感觉没有问题了去生成arr文件

生成arr文件

点击这里可以生成出来了
在这里插入图片描述
生成的文件在
在这里插入图片描述
你们是不是和我的不一样,没有这么多东西,哈哈!!

点击设置,忘记是哪一个了,就跟着来吧,或者百度
在这里插入图片描述
这个样子以后就可以了,

上传打包

在这里插入图片描述

{
	"name": "leruge-add",
	"id": "leruge-add",
	"version": "1.0.1",
	"description": "加法",
	"_dp_type": "nativeplugin",
	"_dp_nativeplugin": {
		"android": {
			"plugins": [{
				"type": "module",
				"name": "leruge-add",
				"class": "com.example.leruge_add.AddModel"
			}],
			"integrateType": "aar"
		}
	}
}

这个样子差不就可以了,这个链接是官方的文档

地址:https://nativesupport.dcloud.net.cn/NativePlugin/course/android?id=%e6%8f%92%e4%bb%b6%e7%bc%96%e5%86%99%e5%91%bd%e5%90%8d%e8%a7%84%e8%8c%83

在这里插入图片描述

配置即可,然后上传,就ok了,图片可能有点模糊,见谅吧,我是在本地写的,传上去的


原文连接:https://blog.csdn.net/mrz123123123/article/details/124589043

相关推荐

Chrome插件开发教程

【程序员的浪漫】七夕到了,还不快给你女朋友做一个专属chrome插件

为了秋招,我开发了一款页面元素高亮插件

有手就行,从零开始的V3版本Chrome创意插件开发攻略

VSCode 居然是个娱乐软件?让你 high 到爆的几款插件!

是的,我写了一个摸鱼插件!

vue-echarts,百度地图插件的使用

【云原生 • DevOps】 DevOps 入门、Maven 插件自动部署微服务

Android组件化、插件化讲解

手把手教你手写 Vite Server(二)—— 插件架构设计

Api2ts 的 vscode 插件开发

一款 IDEA 插件帮你优雅转化 DTO、VO、BO、PO、DO

【插件】🔥🔥 前端处理文件的实用工具库(值得收藏)!

编写一个VSCode插件

关于我写的IDEA插件能一键生成service

Gradle插件的使用

vue封装原生的可预览裁剪上传图片插件H5,PC端都可以使用

这就是最好用的VSCode头部注释插件,Fileheader Pro登场

Springboot----项目整合微信支付与RabbitMQ(使用RabbitMQ延迟插件实现订单管理)

我写了一个将 excel 文件转化成 本地json文件的插件