uniapp 原生插件封装的过程及注意事项

准备工作

android studio

https://developer.android.google.cn/
uniapp app 并没有直接调用 外部 jar，arr 文件类以及方法的能力，需要经过特定方式对原有的代码进行二次封装
最后输出为 aar 文件，以插件的形式进行导入

HbuilderX

DCloud 官方的开发工具，uniapp 的打包，发布，调试等，都需要使用
下载真机运行插件
image.png

Android SDK

https://nativesupport.dcloud.net.cn/AppDocs/download/android
DCloud 官方提供的第三方插件开发DEMO 示例，在此基础上开发会更加简单

依赖的文件（jar、aar等）

第三方提供的一些特定功能的接口等，没有则跳过

注意事项

插件类型

  • Module 不包含 UI 界面的 特定功能
  • Component 实现特别功能的 Native 控件

参考文档

DCloud 安卓插件开发教程

https://nativesupport.dcloud.net.cn/NativePlugin/course/android

成为SDK开发指导v1.0.pdf

开发与调试

打开项目

解压 SDK文件
image.png
其中 UniPlugin-Hello-AS 目录是 android 项目目录
打开anroid studio，点击 open，选择到对应的项目，点击OK
image.png

出现代理设置的窗口时，勾选上选框，选择 NO 即可
image.png

如果当前已有打开的项目目录，选择 file -> Close Project 关闭项目后，再打开项目即可
image.png

新建 Module

将项目目录设置为 Project 形式
image.png
在根目录下 新增-> Module
image.png
选择 Android Library ，填好对应项目，点击Finish
image.png

配置插件

新增类

在新增模块的指定包下新建 java 类，后续会在此处编辑插件的功能代码
image.png

配置 gradle

打开新增模块下的 build.gradle，将 uniplugin_richalert 模块下的 build.gradle 中的内容 复制进去
image.png

配置依赖

uniapp-v8-release.aar 是插件必须依赖的包
image.png
如果有其他需要依赖的包，jar 文件可以放在 模块下的 libs 文件夹内
如果是 aar 在项目根目录新建一个 libs 文件，放在其中（放在模块的libs中会导致打包报错）
image.png
在 根目录下 setting.gradle 中 新增 libs 目录
image.png
配置根目录的 build.gradle
image.png
在模块下添加 aar 的依赖
image.png

配置插件

app -> src -> main -> dcloud_uniplugins.json 中 配置插件
image.png
image.png

构建

点击构建按钮，成功后开始编写插件代码
image.png

插件功能开发

插件类需要集成 UniModule
暴露给 uniapp 的方法需要用 @ UniJSMethod 修饰
通过 callback.invoke 给 调用方法的回调函数返回数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
package com.sinoma.uhf;

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 UHFModule extends UniModule {

    @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",0);
            put("data", a + b);
        }});
    }
}

UniApp 项目配置

新建应用

https://dev.dcloud.net.cn/#/pages/app/list
登录 DCloud 开发者中心
点击创建应用
image.png
填写对应信息
image.png

创建证书

点击应用名称 -> 离线打包 key 管理
image.png
根据操作指引生成证书后，填写到 sha1签名中
Android 包名 和 iOS BundleId 都填写成 插件的 applicationId
image.png
全部填写完成后，点击保存生成 android 和 ios 的app key

将生成的 keystore 文件 放入 app 文件夹内
image.png
配置 app-> build.gradle 的 证书
image.png
打开 app -> src -> main -> AndroidManifest.xml 配置生成的 app key
image.png

编写前端测试代码

新建 uniapp 项目，注意项目名和 开发者中心的 应用名称保持一致，同时 HBuilderX要登录 开发者账号
image.png
在 manifest.json 中 查看 appId和开发者中心的应用 appId 是否保持一致，不一致需要重新获取
image.png

在uniapp 中的测试页中写好对插件的引用，以及一些测试
image.png
写完测试代码后，点击发行，生成本地打包资源
image.png
资源打包完成以后，将 app -> src -> main -> assets -> app 内文件夹删除，替换为打包生成的文件
image.png

连接设备

使用 usb 连接 电脑，打开设备的开发模式后，开启usb调试，安装等功能
连接成功后，运行环境中会多出对应的设备
image.png
点击运行按钮，运行到设备
在设备上测试插件的功能是否有效

打包

双击 gradle 下 对应模块 task 下 的 打包脚本
image.png
如果gradle中没有对应层级，说明 task 被折叠
点击 file 下的 setting，将对应项目 取消勾选，即可看到所有的 内容
image.png

打包自定义调试基座

云打包

根据文档的对应格式，配置好插件，以及生成的 aar 文件
https://nativesupport.dcloud.net.cn/NativePlugin/course/package
在 HbuilderX 中的 运行中，选择 制作自定义调试基座
image.png
填写好对应信息后选择打包
image.png
等待云打包完毕后，在运行基座选中，选择自定义调试基座，后续运行中即可调用到对应插件方法

本地打包

可以在 android studio 中 点击 build 构建 apk
image.png
生成的apk 会存放到 apk 的 build 目录下
image.png
将该文件替换到 uniapp 项目下 unpackage 中的 对应的 apk 即可