uniapp开发安卓原生插件详细流程,零安卓开发基础

2,863 阅读6分钟

背景

公司业务需要使用安卓插件,本人无java与安卓开发基础的前端,慢慢踩坑摸索完成,小小插件耗时近一个月,感谢领导不杀之恩。由于uniapp插件官方文档对于纯前端开发相对不友善,因此汇总此攻略,方便大家上手原生开发。

目标

快速稳定的开发安卓插件,让uniapp的前端项目也能使用安卓功能

适用群体

前端开发,熟悉uniapp,不熟悉安卓开发的人群。

基础要求

初级java水平,初级Android Studio使用水平,若身边有android小伙伴,可以多咨询,解决问题速度max+。本人0安卓开发经验,赶项目选用的是极速版教程,学习视频为: java教程:https://www.bilibili.com/video/BV1o841187iP/?p=8&vd_source=80c581e5012f72b772296748ea6d6e6

Android教程:https://www.bilibili.com/video/BV1PE411u7ox/?spm_id_from=333.999.0.0&vd_source=80c581e5012f72b772296748ea6d6e63

环境准备

根据官网 要求进行下载:

image.png 备注:关于环境方面内容,跟着官网做即可,官网已经很齐全。

项目创建

在android studio中导入项目

按照官网文档进行导入即可,文档已经很清楚,不再赘述。 image.png

第一章 从零前端项目

第一步 申请离线key

在uniapp上新建chajianCeshi项目

image.png 本地打包,插入到插件app/src/main/assets/目录下

image.png image.png

在本地生成 Android平台签名证书

根据官方文档进行操作 Android平台签名证书(.keystore)生成指南

备注:若发现秘钥中少了MD5,SHA1,SHA256中的一个,那请将java版本和官方指南版本保持一致,太高本版会没有的。

申请离线APPKey 登录开发者中心 =》在应用管理 =》 点击应用 =》 各平台信息 创建以及查看离线AppKey

image.png 将生成的Android平台签名证书生成的密钥填写进去 image.png

将生成的Android平台签名证书复制到Android studio的UniPlugin-Hello-AS/app/目录下,然后打开app/build.grale,将签名证书引入,keyPassword密码就是生成证书设置的密码。

image.png

填写APPKey和uniappID 生成查看app离线key,然后将appkey填写到AndroidManifest.xml中 image.png 在dcloud_control.xml填写uniappId image.png

启动,成功则证明权限配置成功,不成功则检查配置项

run 'app',启动成功。若不成功根据错误提示进行排查,大概率是权限证书问题。

image.png

1.排除签名证书问题(keystroe) 如果是签名证书问题,比如密码,证书地址,证书别名等,那么打包的时候就会校验,出错就会报错。根据报错提示进行修改即可。

2.签名证书和appid对不上问题 如果出现提示"未配置AppKey或配置错误",证明已经打包成功了,但认证出了问题。这种情况不用怀疑,肯定是appid+签名证书+应用包名的信息填写有误,没有统一。根据官方文档逐一进行排查即可,未配置AppKey或配置错误排查步骤

第二章 调试插件

将uniapp前端项目的index.vue文件新增代码。代码如图所示:

image.png

<template>
    <view>
        <view>
            <text>{{title}}</text>
        </view>
		
        <button @click="test">测试</button>
    </view>
</template>

<script>
    const ceshiMethodPlugin = uni.requireNativePlugin('ceshi-method');
    export default {
	data() {
            return {
		title: 'Hello'
            }
	},
	onLoad() {
            console.log('ceshiMethodPlugin', ceshiMethodPlugin);
	},
	methods: {
            /**
             * 测试原生插件
            */
            test() {
                ceshiMethodPlugin.ceshiStart('搞起来', (res) => {
                    console.log('res', res);
                    this.title = res.msg;
		})
            }
	}
    }
</script>

重新打包,重新放到Android studio项目app/src/main/assps/目录下。重新启动run,项目启动成功。 1678176380121.jpg image.png

第二步 创建自己的插件项目

这步主要参考# uniapp开发安卓原生插件,不能说一模一样,只能说一毛一样,谢谢大佬文章@fly_dream

操作:File =》 New =》 New Module =》 Android Library

image.png

新建完毕后,开始移花接木,把官方示例uniplugin_module的配置复制过去。 22c60c25516dc7091253496ca60f9fc.png 在当前ceshi目录下,打开proguard-rules.pro文件,加入以下代码

-keep public class * extends io.dcloud.feature.uniapp.common.UniModule{*;}

先将java文件进行转换为 Sources Root(如果已经是了,就不用转了),操作如下图

47a14d21ba968b52a218805790e6f54.png

创建Module类

efd830b2008aa4c720b235ba5db2257.png

1678934837242.jpg

填写插件代码

  1. uniapp的Module拓展,必须继承UniModule类。
  2. 扩展方法必须加上@UniJSMethod (uiThread = false or true) 注解。UniApp 会根据注解来判断当前方法是否要运行在 UI 线程,和当前方法是否是扩展方法。
    uiThread = true 表示 运行在UI线程;
    uiThread = false 表示 运行在JS线程
  3. UniApp是根据反射来进行调用 Module 扩展方法,所以Module中的扩展方法必须是 public 类型 例子:
package com.example.ceshi;

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 CeshiMethod extends UniModule {
    @UniJSMethod(uiThread = true)
    public void ceshiStart (String name, UniJSCallback callback) {
        if (callback != null) {
            JSONObject data = new JSONObject();
            data.put("msg", name + ":你小子,真棒");
            callback.invoke(data);
        }
    }
}

在AndroidManifest.xml填写包入口,package="uni.dcloud.io.ceshi"

image.png

测试插件代码完毕。

第三步 将插件导入到项目中

在APP目录的burild.gradle中引入插件包。跟着官方示例照葫芦画瓢。

implementation project(':插件包名')

1678945664695.jpg

在src/main/assets/dcloud_uniplugins.json文件中声明类名称。也是跟着官方示例照葫芦画瓢。

1678948373517.jpg

image.png 配置完成,Sync now 同步完后重新启动。插件流程自此结束。

image.png

备注:插件的开发与调试建议在Android studio中进行,若前端项目代码需要改动重新本地打包一下,再进入到Android studio即可。这个过程是很快的。而若是将插件进行打包,放到uniapp上进行调试,当插件需要更改,需要重新制作自定义调试基座,这个是需要云打包的,是非常慢的。总代来说,就是在Android studio中调试,uniapp前端项目可以本地打包,而在uniapp中调试,需要云打包,速度是很慢的,贼耽误时间。

image.png

第四步 打包插件,在uniapp中启动

打包插件

image.png

备注:有些 Android Studio 中右侧的 gradle 只有dependens,没有tasks任务栏。 此时点击左上角 File =》 Settings,再同步一下配置即可,按下图操作即可

image.png image.png

此步骤引用至# uniapp开发安卓原生插件,再次感谢@fly_dream。此文中表示打包可能出会出版本问题,由于个人并非出现,并不了解,有此问题的小伙伴可参考大佬的文章。

将插件包配置到前端项目

在uniapp项目中新建unipluginDemo文件夹=》新建插件包ceshi文件夹=》新建android文件夹与package.js配置文件。将插件压缩包放到android文件夹中。uniapp会加载android文件夹中的插件,你只需在package.js中配置好文件参数即可。

image.png

注意别把package.js放到android文件夹中。

配置package.js文件,更多配置可参考uniapp官网插件参数配置进行配置。

image.png

  "name": "ceshi",
  "id": "ceShi",
  "version": "1.0.0",
  "description": "测试用",
  "_dp_type": "nativeplugin",
  "_dp_nativeplugin": {
    "android": {
      "plugins": [
        {
          "type": "module",
          "name": "ceshi-method",
          "class": "com.example.ceshi.CeshiMethod"
        }
      ],
      "integrateType": "aar",
      "parameters": {},
      "dependencies": [
			"io.mx51:spi-client-java:2.9.5"
	  ]
    }
  }
}

前端项目调用API的时候,调用的是就是配置里的name

image.png

在uniapp项目中添加插件

image.png

制定自定义基座

image.png

android证书就用本地生产的那个,与android Studio保持一致。测试的话,可以直接使用公共测试证书,更简单一些。

image.png

启动项目 image.png

3330d3cac1928a7290a1f7ec4736647.jpg

错误排查

console 插件对象,若是undefined,则证明无此插件,检查name名称是否对应得上。 image.png 若是空数组,证明插件已经引入,可能是类名填写错误 image.png

=完结,✿✿ヽ(°▽°)ノ✿,虽然整个流程比较长,但难度其实并不大,希望大家都能顺顺利利使用安卓原生插件。