背景
公司业务需要使用安卓插件,本人无java与安卓开发基础的前端,慢慢踩坑摸索完成,小小插件耗时近一个月,感谢领导不杀之恩。由于uniapp插件官方文档对于纯前端开发相对不友善,因此汇总此攻略,方便大家上手原生开发。
目标
快速稳定的开发安卓插件,让uniapp的前端项目也能使用安卓功能
适用群体
前端开发,熟悉uniapp,不熟悉安卓开发的人群。
基础要求
初级java水平,初级Android Studio使用水平,若身边有android小伙伴,可以多咨询,解决问题速度max+。本人0安卓开发经验,赶项目选用的是极速版教程,学习视频为: java教程:https://www.bilibili.com/video/BV1o841187iP/?p=8&vd_source=80c581e5012f72b772296748ea6d6e6
环境准备
根据官网 要求进行下载:
备注:关于环境方面内容,跟着官网做即可,官网已经很齐全。
项目创建
在android studio中导入项目
按照官网文档进行导入即可,文档已经很清楚,不再赘述。
第一章 从零前端项目
第一步 申请离线key
在uniapp上新建chajianCeshi项目
本地打包,插入到插件app/src/main/assets/目录下
在本地生成 Android平台签名证书
根据官方文档进行操作 Android平台签名证书(.keystore)生成指南
备注:若发现秘钥中少了MD5,SHA1,SHA256中的一个,那请将java版本和官方指南版本保持一致,太高本版会没有的。
申请离线APPKey 登录开发者中心 =》在应用管理 =》 点击应用 =》 各平台信息 创建以及查看离线AppKey
将生成的Android平台签名证书生成的密钥填写进去
将生成的Android平台签名证书复制到Android studio的UniPlugin-Hello-AS/app/目录下,然后打开app/build.grale,将签名证书引入,keyPassword密码就是生成证书设置的密码。
填写APPKey和uniappID 生成查看app离线key,然后将appkey填写到AndroidManifest.xml中 在dcloud_control.xml填写uniappId
启动,成功则证明权限配置成功,不成功则检查配置项
run 'app',启动成功。若不成功根据错误提示进行排查,大概率是权限证书问题。
1.排除签名证书问题(keystroe) 如果是签名证书问题,比如密码,证书地址,证书别名等,那么打包的时候就会校验,出错就会报错。根据报错提示进行修改即可。
2.签名证书和appid对不上问题 如果出现提示"未配置AppKey或配置错误",证明已经打包成功了,但认证出了问题。这种情况不用怀疑,肯定是appid+签名证书+应用包名的信息填写有误,没有统一。根据官方文档逐一进行排查即可,未配置AppKey或配置错误排查步骤。
第二章 调试插件
将uniapp前端项目的index.vue文件新增代码。代码如图所示:
<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,项目启动成功。
第二步 创建自己的插件项目
这步主要参考# uniapp开发安卓原生插件,不能说一模一样,只能说一毛一样,谢谢大佬文章@fly_dream。
操作:File =》 New =》 New Module =》 Android Library
新建完毕后,开始移花接木,把官方示例uniplugin_module的配置复制过去。 在当前ceshi目录下,打开proguard-rules.pro文件,加入以下代码
-keep public class * extends io.dcloud.feature.uniapp.common.UniModule{*;}
先将java文件进行转换为 Sources Root(如果已经是了,就不用转了),操作如下图
创建Module类
填写插件代码
- uniapp的Module拓展,必须继承UniModule类。
- 扩展方法必须加上@UniJSMethod (uiThread = false or true) 注解。UniApp 会根据注解来判断当前方法是否要运行在 UI 线程,和当前方法是否是扩展方法。
uiThread = true 表示 运行在UI线程;
uiThread = false 表示 运行在JS线程 - 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"
测试插件代码完毕。
第三步 将插件导入到项目中
在APP目录的burild.gradle中引入插件包。跟着官方示例照葫芦画瓢。
implementation project(':插件包名')
在src/main/assets/dcloud_uniplugins.json文件中声明类名称。也是跟着官方示例照葫芦画瓢。
配置完成,Sync now 同步完后重新启动。插件流程自此结束。
备注:插件的开发与调试建议在Android studio中进行,若前端项目代码需要改动重新本地打包一下,再进入到Android studio即可。这个过程是很快的。而若是将插件进行打包,放到uniapp上进行调试,当插件需要更改,需要重新制作自定义调试基座,这个是需要云打包的,是非常慢的。总代来说,就是在Android studio中调试,uniapp前端项目可以本地打包,而在uniapp中调试,需要云打包,速度是很慢的,贼耽误时间。
第四步 打包插件,在uniapp中启动
打包插件
备注:有些 Android Studio 中右侧的 gradle 只有dependens,没有tasks任务栏。 此时点击左上角 File =》 Settings,再同步一下配置即可,按下图操作即可
此步骤引用至# uniapp开发安卓原生插件,再次感谢@fly_dream。此文中表示打包可能出会出版本问题,由于个人并非出现,并不了解,有此问题的小伙伴可参考大佬的文章。
将插件包配置到前端项目
在uniapp项目中新建unipluginDemo文件夹=》新建插件包ceshi文件夹=》新建android文件夹与package.js配置文件。将插件压缩包放到android文件夹中。uniapp会加载android文件夹中的插件,你只需在package.js中配置好文件参数即可。
注意别把package.js放到android文件夹中。
配置package.js文件,更多配置可参考uniapp官网插件参数配置进行配置。
"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
在uniapp项目中添加插件
制定自定义基座
android证书就用本地生产的那个,与android Studio保持一致。测试的话,可以直接使用公共测试证书,更简单一些。
启动项目
错误排查
console 插件对象,若是undefined,则证明无此插件,检查name名称是否对应得上。 若是空数组,证明插件已经引入,可能是类名填写错误