当前位置:   article > 正文

uniapp原生Android插件开发入门教程 (最新版)_uniapp插件开发教程

uniapp插件开发教程

前言:

前段时间写了一个点餐系统的项目,APP运行在商米收银机上,需要调用其内置打印机去打印小发票,但是uniapp不能直接调用Android设备,所以只能通过Android插件实现,但当时对于Android原生插件开发的了解还是一片空白,后面在插件商城找了一个插件并完美实现了打印功能,自那之后,就一直想学习一下Android插件开发。刚好最近公司事情不多,便认真学习了一下,但是学习过程中发现官方文档对初学者不是很友好。为了让后面的头同学少踩坑,特点花了时间整理出此篇贴文。希望此文能够帮助到您!

1.开发环境

以下是我的开发环境,各位可根据自己的情况来,没必要跟我的一模一样

HBuilder X版本号3.96    Android Studio版本号 4.2.2

2.下载Android 离线SDK

下载完成后打开的zip文件是这样的

将该文件解压到电脑本地磁盘上

注意 : 保存该文件夹的路径不得包含中文,空格等非法字符,要不然Android Studio 打开会报错

这是我解压的文件路径 D:\test1\Android-SDK@3.96.81954_20231106

3. 使用Android Studio 打开 UniPlugin-Hello-AS 文件

导入完成后,这个地方改成Project,方便预览文件 

这个时候可以尝试运行一下这个模板项目,看有没有报错,第一次运行时间有点就,因为需要加载资源,耐心等待右下角进度条加载完成即可。

运行后发现无论是Android Studio还是模拟器都提示appkey错误,那么下面我们就去申请一下appkey等配置信息。

3.申请配置信息

使用HBuilder打开uniapp示例工程源码下面的unipluginDem项目文件夹

打开manifest.json选择基础配置重新获取AppID  

点击确定后AppID这一栏便后自动生成一个Id编号

 这个时候打开uniapp开发者后台就可以看到这个项目的信息 开发者后台icon-default.png?t=N7T8https://dev.dcloud.net.cn/pages/app/list

 如果还没有证书的话点击创建证书,如果已经有证书了那就点击下载证书

等待证书下载完成后将证书文件 复制到app文件下面,这里的目录需要注意一下,不要放错了

点击证书详情查看证书SHA1、SHA256秘钥和别名,点击查看证书密码,查看此证书密码,这些信息可先复制到其他地方,后面要用到。

将app 信息填写到build.gradle中

创建离线打包Key管理,离线打包key管理这个功能迁移到了各平台信息,单击 “点击前往”链接前往各平台信息选项卡

 点击右上角新增按钮创建一个新的key

点击创建按钮后回弹窗下图最右侧的弹窗,把相应的信息填写进去

填写完成表单信息后点击提交按钮

这里会提示这个包名已经在其他开发者使用了,自己可以将包名改一下,改了就不会出现这个提示框 。

添加完成后列表中会出现一行新的数据,点击创建按钮

创建完成后点击查看按钮,将APP key 复制到AndroidManifest.xml下面的android:value中,

修改完成后记得同步一下信息

修改app文件下的 dcloud_control.xml 里面的 appid

生成本地打包APP资源

打包完成后点击导出路径

将打包文件复制到apps文件下面

补充 : 这里如果不好粘贴的话,将apps文件夹在外部打开,用电脑自带文件夹去操作

这个时候再运行一下

这个时候便运行成功了

下面我们以前分析一下案例代码,在uniapp的ext-module页面中中分别调用了testAsyncFunc、testSyncFunc、gotoNativePage三个方法,而在Android的TestModule java文件中同样有这三个方法说明uniapp调用的就是这三个方法,我看可以改一下里面的返回值内容,看一下代码运行是否正常。

修改返回信息后,页面内容变化了,说明上面分析的没错,并且代码运行正常,可以进行下一步

下面我们自己创建一个module试试

这里我选择的是Android 4.1 最低版本,大家跟可以跟我一样,也可以根据自己的情况来。

创建完成后在这里可以看到创建的文件夹

创建一个java文件,这里是创建在com.example.test 这个包下面

复制 uniplugin_module文件夹下面 build.gradle 配置文件里面的内容,这里只要复制我框起来的就可以了。

将复制来的内容粘贴到新我们刚刚创建的test文件夹下面的build.gradle中。

下面开始编辑新建的Java文件,为了少出错,咱们还是先选择复制粘贴他原本的代码,后期自己可以根据之身情况修改代码,为了方便复制代码和比对代码,将代码窗口切换传左右两侧显示。

将TestModule里面的代码复杂到我们刚刚创建的java文件中,这里Android Studio 通常会自动帮你导入相应的包,不需要单独复制。

以下是我 的代码

  1. package com.example.test;
  2. import android.util.Log;
  3. import com.alibaba.fastjson.JSONObject;
  4. import io.dcloud.feature.uniapp.annotation.UniJSMethod;
  5. import io.dcloud.feature.uniapp.bridge.UniJSCallback;
  6. import io.dcloud.feature.uniapp.common.UniModule;
  7. public class testmode extends UniModule {
  8. //run ui thread
  9. @UniJSMethod(uiThread = true)
  10. public void getTest(JSONObject options, UniJSCallback callback) {
  11. if(callback != null) {
  12. JSONObject data = new JSONObject();
  13. data.put("code", "success");
  14. data.put("code", "我是新来的");
  15. callback.invoke(data);
  16. //callback.invokeAndKeepAlive(data);
  17. }
  18. }
  19. }

 注册插件

这里需要在app\src\main\assets目录下打开dcloud_uniplugins.json文件,将我们刚刚创建的包名以及类名复制进去格式为"包名"+类名 ,type这里填module

 引入插件

在插件项目app目录下的build.gradle文件中,添加我们刚刚注册的插件这里的名称就是我们刚刚创建的文件名称

在HBuider中编辑uniapp代码,这里requireNativePlugin引入的就是我们刚刚注册插件时填写的name,方法名就是我们在Java文件里面定义的方法名。

 以下是我这边ext-module.nvue文件里的代码

  1. <template>
  2. <div>
  3. <button type="primary" @click="MyTest">这是我刚写的</button>
  4. <button type="primary" @click="testAsyncFunc">testAsyncFunc</button>
  5. <button type="primary" @click="testSyncFunc">testSyncFunc</button>
  6. <button type="primary" @click="gotoNativePage">跳转原生Activity</button>
  7. </div>
  8. </template>
  9. <script>
  10. // 获取 module
  11. var testModule = uni.requireNativePlugin("TestModule")
  12. var testmode = uni.requireNativePlugin("testmodule")
  13. const modal = uni.requireNativePlugin('modal');
  14. export default {
  15. onLoad() {
  16. plus.globalEvent.addEventListener('TestEvent', function(e){
  17. modal.toast({
  18. message: "TestEvent收到:"+e.msg,
  19. duration: 1.5
  20. });
  21. });
  22. },
  23. methods: {
  24. MyTest() {
  25. testmode.getTest({
  26. 'name': 'unimp',
  27. 'age': 1
  28. },
  29. (ret) => {
  30. modal.toast({
  31. message: ret,
  32. duration: 1.5
  33. });
  34. })
  35. },
  36. testAsyncFunc() {
  37. // 调用异步方法
  38. testModule.testAsyncFunc({
  39. 'name': 'unimp',
  40. 'age': 1
  41. },
  42. (ret) => {
  43. modal.toast({
  44. message: ret,
  45. duration: 1.5
  46. });
  47. })
  48. },
  49. testSyncFunc() {
  50. // 调用同步方法
  51. var ret = testModule.testSyncFunc({
  52. 'name': 'unimp',
  53. 'age': 1
  54. })
  55. modal.toast({
  56. message: ret,
  57. duration: 1.5
  58. });
  59. },
  60. gotoNativePage() {
  61. testModule.gotoNativePage();
  62. }
  63. }
  64. }
  65. </script>

代码写完后重新打一个 打包APP资源,打包教程文章前半部分有,可以直接按照前面的方法打包。

打包完成后替换掉原来的打包文件,这里替换的是Android Studio里面的文件。

 替换完成后重新运行一下,这里可以看到我们刚刚新加的功能已经能够正常使用

 打包插件打包之前需要检测一下SDK版本,如果插件于uniapp里面的SDK里面设置的SDK版本不一致打包会报错。

点击Android Studio窗口右侧的Gradle在我们刚刚创建的文件夹下面找到assembleRelease,点击即可打包编译。

 编译完成后左侧文件目录中找到目录为test/build/outputs/aar/test-release.aar 的打包产物

将打包产物复制到uniapp中,这里需要事先创建好一下文件目录 nativeplugins 、test、Android、package.json 其中Android、package.json为同等级。

目录创建完成后需要编辑一下package.json文件,这里的class就是我们注册插件时填写的class,name和type也是。

 这是 package.json 里面的代码

  1. {
  2. "name": "testmodule",
  3. "id": "testmodule",
  4. "version": "0.0.1",
  5. "description": "我是新来的",
  6. "_dp_type":"nativeplugin",
  7. "_dp_nativeplugin":{
  8. "android": {
  9. "plugins": [
  10. {
  11. "type": "module",
  12. "name": "testmodule",
  13. "class": "com.example.test.testmode"
  14. }
  15. ],
  16. "integrateType": "aar",
  17. "parameters": {
  18. },
  19. "dependencies": []
  20. }
  21. }
  22. }

下面就可以打包一个出来试试看,这里的证书就是我们前面申请的证书, 

打包完成后安装到模拟器运行正常。

结束语

这也是我第一次写这么长的贴文,写的不是很好,希望各位见谅。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/秋刀鱼在做梦/article/detail/994344
推荐阅读
相关标签
  

闽ICP备14008679号