# 背景公司业务需要使用安卓插件,本人无java与安卓开发基础的前端，慢慢踩坑摸索完成，小小插件耗时近一个月，感谢领导不杀之恩。由于uniapp插件官方文档对于纯前端开发相对不友善，因此汇总此攻略，方便大家上手原生开发。 # 目标快速稳定的开发安卓插件，让uniapp的前端项目也能使用安卓功能 # 适用群体前端开发，熟悉uniapp，不熟悉安卓开发的人群。 # 基础要求初级java水平，初级Android Studio使用水平，若身边有android小伙伴，可以多咨询，解决问题速度max+。本人0安卓开发经验，赶项目选用的是极速版教程，学习视频为： [java教程:https://www.bilibili.com/video/BV1o841187iP/?p=8&vd_source=80c581e5012f72b772296748ea6d6e6](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](https://www.bilibili.com/video/BV1PE411u7ox/?spm_id_from=333.999.0.0&vd_source=80c581e5012f72b772296748ea6d6e63) # 环境准备根据[官网](https://nativesupport.dcloud.net.cn/NativePlugin/course/android.html) 要求进行下载： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9e6dc52c7597451a9bfaf3b6929f5003~tplv-k3u1fbpfcp-watermark.image?) 备注：关于环境方面内容，跟着官网做即可，官网已经很齐全。 # 项目创建 ### 在android studio中导入项目按照官网文档进行导入即可，文档已经很清楚，不再赘述。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5988cffb56e84de4a665edbf8ba8c45b~tplv-k3u1fbpfcp-watermark.image?) # 第一章从零前端项目 #### 第一步申请离线key **在uniapp上新建chajianCeshi项目** ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/41fb93e088fc4e8091415e82ea446ccd~tplv-k3u1fbpfcp-watermark.image?) **本地打包，插入到插件app/src/main/assets/目录下** ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/78d1b221c9ae443097fe10dedcdf4d78~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3a7178461f6849c0a93074c532b6c366~tplv-k3u1fbpfcp-watermark.image?) **在本地生成 Android平台签名证书** 根据官方文档进行操作[ Android平台签名证书(.keystore)生成指南](https://ask.dcloud.net.cn/article/35777) 备注：若发现秘钥中少了MD5,SHA1,SHA256中的一个，那请将java版本和官方指南版本保持一致，太高本版会没有的。 **申请离线APPKey** 登录[开发者中心](https://dev.dcloud.net.cn/) =》在应用管理 =》点击应用 =》各平台信息创建以及查看离线AppKey ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b067001fd6614130b10e2e585c7a050e~tplv-k3u1fbpfcp-watermark.image?) 将生成的Android平台签名证书生成的密钥填写进去 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/13917f29210a47779a734d45fc4d72cf~tplv-k3u1fbpfcp-watermark.image?) 将生成的Android平台签名证书复制到Android studio的UniPlugin-Hello-AS/app/目录下，然后打开app/build.grale,将签名证书引入，keyPassword密码就是生成证书设置的密码。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6d8d7a2b1bd24cd388afec25776ea94e~tplv-k3u1fbpfcp-watermark.image?) **填写APPKey和uniappID** 生成查看app离线key，然后将appkey填写到AndroidManifest.xml中 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7273390d9a9d4f3ea55c600b8f8e9ee7~tplv-k3u1fbpfcp-watermark.image?) 在dcloud_control.xml填写uniappId ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d29ed3f9343649f6a47ce53e7e8775cf~tplv-k3u1fbpfcp-watermark.image?) **启动，成功则证明权限配置成功，不成功则检查配置项** run 'app'，启动成功。若不成功根据错误提示进行排查，大概率是权限证书问题。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f6bfffff05754f5383e04b85c9add492~tplv-k3u1fbpfcp-watermark.image?) 1.排除签名证书问题（keystroe）如果是签名证书问题，比如密码，证书地址，证书别名等，那么打包的时候就会校验，出错就会报错。根据报错提示进行修改即可。 2.签名证书和appid对不上问题如果出现提示"未配置AppKey或配置错误"，证明已经打包成功了，但认证出了问题。这种情况不用怀疑，肯定是appid+签名证书+应用包名的信息填写有误，没有统一。根据官方文档逐一进行排查即可，[未配置AppKey或配置错误排查步骤](https://nativesupport.dcloud.net.cn/AppDocs/usesdk/appkey.html#)。 # 第二章调试插件将uniapp前端项目的index.vue文件新增代码。代码如图所示： ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d7affbbe1eaa4cdfa0b45d132e4b7cc5~tplv-k3u1fbpfcp-watermark.image?) ``` ``` 重新打包，重新放到Android studio项目app/src/main/assps/目录下。重新启动run，项目启动成功。 ![1678176380121.jpg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0344e0ba02524232a387a1fbecd09029~tplv-k3u1fbpfcp-zoom-1.image) ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6c1c6fe14f7a4ceba4071e8df15e58ab~tplv-k3u1fbpfcp-watermark.image?) #### 第二步创建自己的插件项目这步主要参考[# uniapp开发安卓原生插件](https://juejin.cn/post/7180609901570293816)，不能说一模一样，只能说一毛一样，谢谢大佬文章@[fly_dream](https://juejin.cn/user/4195392104961047)。操作：File =》 New =》 New Module =》 Android Library ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2fe07f01c7404c3b9a594f85d6e975e9~tplv-k3u1fbpfcp-watermark.image?) 新建完毕后，开始移花接木，把官方示例uniplugin_module的配置复制过去。 ![22c60c25516dc7091253496ca60f9fc.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/17d237834cbe4fe7a0b4dd443f8da1bc~tplv-k3u1fbpfcp-watermark.image?) 在当前ceshi目录下，打开proguard-rules.pro文件，加入以下代码 ``` -keep public class * extends io.dcloud.feature.uniapp.common.UniModule{*;} ``` 先将java文件进行转换为 Sources Root（如果已经是了，就不用转了），操作如下图 ![47a14d21ba968b52a218805790e6f54.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ea606692da584c018f99bd987b1033a6~tplv-k3u1fbpfcp-watermark.image?) 创建Module类

填写插件代码 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](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/192b0fedd0494fc9946746ce64291bae~tplv-k3u1fbpfcp-watermark.image?) 测试插件代码完毕。 #### 第三步将插件导入到项目中在APP目录的burild.gradle中引入插件包。跟着官方示例照葫芦画瓢。 ``` implementation project(':插件包名') ``` ![1678945664695.jpg](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/44b964c1dbf84dcbaafd7d90d53a49a1~tplv-k3u1fbpfcp-watermark.image?) 在src/main/assets/dcloud_uniplugins.json文件中声明类名称。也是跟着官方示例照葫芦画瓢。 ![1678948373517.jpg](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dd4d13c39b38464d80e26bb284fe84bf~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e2e7d0bb705b4ee6b6dc6660e69190a4~tplv-k3u1fbpfcp-watermark.image?) 配置完成，Sync now 同步完后重新启动。插件流程自此结束。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/32a0fc2f8b8341189ecb84eab3015768~tplv-k3u1fbpfcp-watermark.image?) 备注：插件的开发与调试建议在Android studio中进行，若前端项目代码需要改动重新本地打包一下，再进入到Android studio即可。这个过程是很快的。而若是将插件进行打包，放到uniapp上进行调试，当插件需要更改，需要重新制作自定义调试基座，这个是需要云打包的，是非常慢的。总代来说，就是在Android studio中调试，uniapp前端项目可以本地打包，而在uniapp中调试，需要云打包，速度是很慢的，贼耽误时间。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3910b7b748bd408d88a4eacb014aeac1~tplv-k3u1fbpfcp-watermark.image?) #### 第四步打包插件，在uniapp中启动 ##### 打包插件 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0bbabf2fff344b8fb081485fcb3d4996~tplv-k3u1fbpfcp-watermark.image?) 备注：有些 Android Studio 中右侧的 gradle 只有dependens，没有tasks任务栏。此时点击左上角 File =》 Settings，再同步一下配置即可，按下图操作即可 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a6148923d4274fb18b54a64c8af60034~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/68da913ad7bf41a0a94bb2ae3c8d8fc3~tplv-k3u1fbpfcp-watermark.image?) 此步骤引用至[# uniapp开发安卓原生插件](https://juejin.cn/post/7180609901570293816)，再次感谢@[fly_dream](https://juejin.cn/user/4195392104961047)。此文中表示打包可能出会出版本问题，由于个人并非出现，并不了解，有此问题的小伙伴可参考大佬的文章。 ##### 将插件包配置到前端项目在uniapp项目中新建unipluginDemo文件夹=》新建插件包ceshi文件夹=》新建android文件夹与package.js配置文件。将插件压缩包放到android文件夹中。uniapp会加载android文件夹中的插件，你只需在package.js中配置好文件参数即可。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/52221299df024626a0d151bad2b38e40~tplv-k3u1fbpfcp-watermark.image?) 注意别把package.js放到android文件夹中。 **配置package.js文件**，更多配置可参考[uniapp官网插件参数配置](https://nativesupport.dcloud.net.cn/NativePlugin/course/package.html)进行配置。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4f2ac41c22d84f6995656b99c5c3300a~tplv-k3u1fbpfcp-watermark.image?) ```{ "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](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/eab0140328fd4043a131e3bd51c19277~tplv-k3u1fbpfcp-watermark.image?) **在uniapp项目中添加插件** ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ae6e5a8195664187b0c730fde7c9aa69~tplv-k3u1fbpfcp-watermark.image?) **制定自定义基座** ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cb0b1d44e821498d832a9ac46445a5d5~tplv-k3u1fbpfcp-watermark.image?) android证书就用本地生产的那个，与android Studio保持一致。测试的话，可以直接使用公共测试证书，更简单一些。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bb1ddbb31b894e16949f6a3cf5817baf~tplv-k3u1fbpfcp-watermark.image?) **启动项目** ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a595adadef9b43b0b583b9b7d1d0195a~tplv-k3u1fbpfcp-watermark.image?) ![3330d3cac1928a7290a1f7ec4736647.jpg](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/eab599ccd262495986b04cdccc249982~tplv-k3u1fbpfcp-watermark.image?) **错误排查** console 插件对象，若是undefined，则证明无此插件，检查name名称是否对应得上。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7e3b7f9502b3496289ca8539996e62a3~tplv-k3u1fbpfcp-watermark.image?) 若是空数组，证明插件已经引入，可能是类名填写错误 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d515cb2a661f4659b70d04c5d6d3a8ff~tplv-k3u1fbpfcp-watermark.image?) #### =完结，✿✿ヽ(°▽°)ノ✿，虽然整个流程比较长，但难度其实并不大，希望大家都能顺顺利利使用安卓原生插件。