uni-app 原生安卓插件基础

342 阅读3分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第1天,点击查看活动详情

下载所需要的东西

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

java8

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

    地址:www.oracle.com/java/techno…

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

Android Studio

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

    地址: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 控件.

具体可以根据文档:nativesupport.dcloud.net.cn/NativePlugi…

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"
		}
	}
}

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

地址:nativesupport.dcloud.net.cn/NativePlugi…

在这里插入图片描述

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