devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uniapp android 原生插件开发-测试流程_uniapp android插件

作者：盐析白兔 | 2024-06-14 05:10:57

赞

踩

uniapp android插件

前言

最近公司要求研究一下 uniapp 的 android 原生插件的开发，为以后的工作做准备。这篇文章记录一下自己的学习过程，也帮助一下有同样需求的同学们 : )

一、下载安装Hbuilder X , Android studio（相关的安装配置过程网上有很多，在这里就不再赘述,具体配置要求也可以访问官网查看Android 插件开发教程）

二、开发步骤

1.下载uniapp 的Android 离线SDK(可以前往官网链接下载Android 离线SDK)

下载后得到压缩包

2.android studio 导入工程

解压压缩包 ，使用android studio 导入压缩包中的UniPlugin-Hello-AS项目

导入后目录结构为

然后就可以开始我们的开发之旅了

3.新建module项目


选择 Android Library 输入你的插件名称 点击finish

将app目录下的libs中的uniapp-v8-release.aar复制到你创建的module目录下的libs中（我创建的是xiaohu_TestModule,后面都用xiaohu_TestModule讲解）
在这里插入图片描述

打开你创建的xiaohu_TestModule目录下的build.gradle
修改依赖为

  1. <span style="color:rgba(0, 0, 0, 0.75)"><span style="color:#000000"><span style="background-color:#282c34"><code class="language-java">dependencies <span style="color:#999999">{</span>
  2.     compileOnly <span style="color:#61aeee">fileTree</span><span style="color:#999999">(</span>dir<span style="color:#669900">:</span> <span style="color:#669900">'libs'</span><span style="color:#999999">,</span> include<span style="color:#669900">:</span> <span style="color:#999999">[</span><span style="color:#669900">'*.jar'</span><span style="color:#999999">]</span><span style="color:#999999">)</span>
  3.  
  4.     compileOnly <span style="color:#61aeee">fileTree</span><span style="color:#999999">(</span>dir<span style="color:#669900">:</span> <span style="color:#669900">'libs'</span><span style="color:#999999">,</span> include<span style="color:#669900">:</span> <span style="color:#999999">[</span><span style="color:#669900">'uniapp-v8-release.aar'</span><span style="color:#999999">]</span><span style="color:#999999">)</span>
  5.  
  6.  
  7.     compileOnly <span style="color:#669900">'androidx.legacy:legacy-support-v4:1.0.0'</span>
  8.     compileOnly <span style="color:#669900">'androidx.appcompat:appcompat:1.0.0'</span>
  9.  
  10.     compileOnly <span style="color:#669900">'androidx.recyclerview:recyclerview:1.0.0'</span>
  11.     <span style="color:#5c6370">//下面的可以删除</span>
  12.     <span style="color:#5c6370">/*implementation 'androidx.appcompat:appcompat:1.2.0'
  13.     implementation 'com.google.android.material:material:1.2.1'
  14.     testImplementation 'junit:junit:4.+'
  15.     androidTestImplementation 'androidx.test.ext:junit:1.1.2'
  16.     androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'*/</span>
  17. <span style="color:#999999">}</span>
  18. </code></span></span></span>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

然后module就配置完了，然后就是android 的开发工作
下面是一个简单的示例。

新建类AndroidDialog 继承UniModule（示例是调用android原生的系统弹窗）

在这里插入图片描述
然后在AndroidDialog内写上自己的代码

  1. <span style="color:rgba(0, 0, 0, 0.75)"><span style="color:#000000"><span style="background-color:#282c34"><code class="language-java"><span style="color:#c678dd">package</span> com<span style="color:#999999">.</span>xiaohu<span style="color:#999999">.</span>xiaohu_testmodule<span style="color:#999999">;</span>
  2.  
  3. <span style="color:#c678dd">import</span> android<span style="color:#999999">.</span>app<span style="color:#999999">.</span>Activity<span style="color:#999999">;</span>
  4. <span style="color:#c678dd">import</span> android<span style="color:#999999">.</span>content<span style="color:#999999">.</span>DialogInterface<span style="color:#999999">;</span>
  5. <span style="color:#c678dd">import</span> android<span style="color:#999999">.</span>util<span style="color:#999999">.</span>Log<span style="color:#999999">;</span>
  6. <span style="color:#c678dd">import</span> android<span style="color:#999999">.</span>widget<span style="color:#999999">.</span>Toast<span style="color:#999999">;</span>
  7.  
  8. <span style="color:#c678dd">import</span> androidx<span style="color:#999999">.</span>appcompat<span style="color:#999999">.</span>app<span style="color:#999999">.</span>AlertDialog<span style="color:#999999">;</span>
  9.  
  10. <span style="color:#c678dd">import</span> com<span style="color:#999999">.</span>taobao<span style="color:#999999">.</span>weex<span style="color:#999999">.</span>annotation<span style="color:#999999">.</span>JSMethod<span style="color:#999999">;</span>
  11. <span style="color:#c678dd">import</span> com<span style="color:#999999">.</span>taobao<span style="color:#999999">.</span>weex<span style="color:#999999">.</span>bridge<span style="color:#999999">.</span>JSCallback<span style="color:#999999">;</span>
  12.  
  13. <span style="color:#c678dd">import</span> java<span style="color:#999999">.</span>util<span style="color:#999999">.</span>Map<span style="color:#999999">;</span>
  14.  
  15. <span style="color:#c678dd">import</span> io<span style="color:#999999">.</span>dcloud<span style="color:#999999">.</span>feature<span style="color:#999999">.</span>uniapp<span style="color:#999999">.</span>common<span style="color:#999999">.</span>UniModule<span style="color:#999999">;</span>
  16.  
  17. <span style="color:#c678dd">public</span> <span style="color:#c678dd">class</span> AndroidDialog <span style="color:#c678dd">extends</span> UniModule <span style="color:#999999">{</span>
  18.     <span style="color:#5c6370">/**
  19.      * 调用原生Dialog显示
  20.      */</span>
  21.     <span style="color:#999999">@JSMethod</span><span style="color:#999999">(</span>uiThread <span style="color:#669900">=</span> <span style="color:#56b6c2">true</span><span style="color:#999999">)</span>   <span style="color:#5c6370">//必须加上注释，不然uniapp无法调用</span>
  22.     <span style="color:#c678dd">public</span> <span style="color:#c678dd">void</span> <span style="color:#61aeee">showDialog</span><span style="color:#999999">(</span>JSCallback jsCallback<span style="color:#999999">)</span> <span style="color:#999999">{</span>    <span style="color:#5c6370">//需为pulic</span>
  23.         <span style="color:#c678dd">if</span> <span style="color:#999999">(</span>mWXSDKInstance <span style="color:#669900">!=</span> <span style="color:#c678dd">null</span> <span style="color:#669900">&&</span> mWXSDKInstance<span style="color:#999999">.</span><span style="color:#61aeee">getContext</span><span style="color:#999999">(</span><span style="color:#999999">)</span> <span style="color:#c678dd">instanceof</span> Activity<span style="color:#999999">)</span> <span style="color:#999999">{</span>
  24.             <span style="color:#c678dd">new</span> AlertDialog<span style="color:#999999">.</span>Builder<span style="color:#999999">(</span>mWXSDKInstance<span style="color:#999999">.</span><span style="color:#61aeee">getContext</span><span style="color:#999999">(</span><span style="color:#999999">)</span><span style="color:#999999">)</span>
  25.                     <span style="color:#999999">.</span><span style="color:#61aeee">setTitle</span><span style="color:#999999">(</span><span style="color:#669900">"弹窗"</span><span style="color:#999999">)</span>
  26.                     <span style="color:#999999">.</span><span style="color:#61aeee">setMessage</span><span style="color:#999999">(</span><span style="color:#669900">"这是一个测试弹窗"</span><span style="color:#999999">)</span>
  27.                     <span style="color:#999999">.</span><span style="color:#61aeee">setPositiveButton</span><span style="color:#999999">(</span><span style="color:#669900">"确定"</span><span style="color:#999999">,</span> <span style="color:#c678dd">new</span> DialogInterface<span style="color:#999999">.</span>OnClickListener<span style="color:#999999">(</span><span style="color:#999999">)</span> <span style="color:#999999">{</span>
  28.                         <span style="color:#999999">@Override</span>
  29.                         <span style="color:#c678dd">public</span> <span style="color:#c678dd">void</span> <span style="color:#61aeee">onClick</span><span style="color:#999999">(</span>DialogInterface dialog<span style="color:#999999">,</span> <span style="color:#c678dd">int</span> which<span style="color:#999999">)</span> <span style="color:#999999">{</span>
  30.                             jsCallback<span style="color:#999999">.</span><span style="color:#61aeee">invoke</span><span style="color:#999999">(</span><span style="color:#669900">"点击了确定"</span><span style="color:#999999">)</span><span style="color:#999999">;</span>
  31.                         <span style="color:#999999">}</span>
  32.                     <span style="color:#999999">}</span><span style="color:#999999">)</span>
  33.                     <span style="color:#999999">.</span><span style="color:#61aeee">setNegativeButton</span><span style="color:#999999">(</span><span style="color:#669900">"取消"</span><span style="color:#999999">,</span> <span style="color:#c678dd">new</span> DialogInterface<span style="color:#999999">.</span>OnClickListener<span style="color:#999999">(</span><span style="color:#999999">)</span> <span style="color:#999999">{</span>
  34.                         <span style="color:#999999">@Override</span>
  35.                         <span style="color:#c678dd">public</span> <span style="color:#c678dd">void</span> <span style="color:#61aeee">onClick</span><span style="color:#999999">(</span>DialogInterface dialog<span style="color:#999999">,</span> <span style="color:#c678dd">int</span> which<span style="color:#999999">)</span> <span style="color:#999999">{</span>
  36.                             jsCallback<span style="color:#999999">.</span><span style="color:#61aeee">invoke</span><span style="color:#999999">(</span><span style="color:#669900">"点击了取消"</span><span style="color:#999999">)</span><span style="color:#999999">;</span>
  37.                         <span style="color:#999999">}</span>
  38.                     <span style="color:#999999">}</span><span style="color:#999999">)</span>
  39.                     <span style="color:#999999">.</span><span style="color:#61aeee">show</span><span style="color:#999999">(</span><span style="color:#999999">)</span><span style="color:#999999">;</span>
  40.         <span style="color:#999999">}</span>
  41.     <span style="color:#999999">}</span>
  42.  
  43.     <span style="color:#5c6370">/**
  44.      * 调用原生Toast显示传入内容
  45.      */</span>
  46.     <span style="color:#999999">@JSMethod</span><span style="color:#999999">(</span>uiThread <span style="color:#669900">=</span> <span style="color:#56b6c2">true</span><span style="color:#999999">)</span>
  47.     <span style="color:#c678dd">public</span> <span style="color:#c678dd">void</span> <span style="color:#61aeee">showToast</span><span style="color:#999999">(</span>String message<span style="color:#999999">)</span> <span style="color:#999999">{</span>
  48.         <span style="color:#c678dd">if</span> <span style="color:#999999">(</span>mWXSDKInstance <span style="color:#669900">!=</span> <span style="color:#c678dd">null</span> <span style="color:#669900">&&</span> mWXSDKInstance<span style="color:#999999">.</span><span style="color:#61aeee">getContext</span><span style="color:#999999">(</span><span style="color:#999999">)</span> <span style="color:#c678dd">instanceof</span> Activity<span style="color:#999999">)</span> <span style="color:#999999">{</span>
  49.             Toast<span style="color:#999999">.</span><span style="color:#61aeee">makeText</span><span style="color:#999999">(</span>mWXSDKInstance<span style="color:#999999">.</span><span style="color:#61aeee">getContext</span><span style="color:#999999">(</span><span style="color:#999999">)</span><span style="color:#999999">,</span> message<span style="color:#999999">.</span><span style="color:#61aeee">toString</span><span style="color:#999999">(</span><span style="color:#999999">)</span><span style="color:#999999">,</span> Toast<span style="color:#999999">.</span>LENGTH_SHORT<span style="color:#999999">)</span><span style="color:#999999">.</span><span style="color:#61aeee">show</span><span style="color:#999999">(</span><span style="color:#999999">)</span><span style="color:#999999">;</span>
  50.             Log<span style="color:#999999">.</span><span style="color:#61aeee">e</span><span style="color:#999999">(</span><span style="color:#669900">"调用处理"</span><span style="color:#999999">,</span><span style="color:#669900">"bu显示就bu快乐"</span><span style="color:#999999">)</span><span style="color:#999999">;</span>
  51.         <span style="color:#999999">}</span>
  52.     <span style="color:#999999">}</span>
  53. <span style="color:#999999">}</span>
  54.  
  55.  
  56. </code></span></span></span>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55

到这一个简单的插件就写完了，但是我们肯定要先做一下测试才能发布或者给别人使用

4.调试插件

打开HbuilderX 新建unipp项目 uniTest
在这里插入图片描述
创建完成后的目录结构
在这里插入图片描述
修改index.vue的代码

在这里插入图片描述

  1. <span style="color:rgba(0, 0, 0, 0.75)"><span style="color:#000000"><span style="background-color:#282c34"><code class="language-java"><span style="color:#999999"><</span>template<span style="color:#999999">></span>
  2. 	<span style="color:#669900"><</span>view <span style="color:#c678dd">class</span><span style="color:#669900">=</span><span style="color:#669900">"content"</span><span style="color:#669900">></span>
  3. 		<span style="color:#669900"><</span>view <span style="color:#c678dd">class</span><span style="color:#669900">=</span><span style="color:#669900">"button1"</span><span style="color:#669900">></span>
  4. 			<span style="color:#669900"><</span>button <span style="color:#999999">@click</span><span style="color:#669900">=</span><span style="color:#669900">"showDialog(message)"</span><span style="color:#669900">></span>点击显示原生Dialog<span style="color:#669900"><</span><span style="color:#669900">/</span>button<span style="color:#669900">></span>
  5. 		<span style="color:#669900"><</span><span style="color:#669900">/</span>view<span style="color:#669900">></span>
  6. 	<span style="color:#669900"><</span><span style="color:#669900">/</span>view<span style="color:#669900">></span>
  7. <span style="color:#669900"><</span><span style="color:#669900">/</span>template<span style="color:#669900">></span>
  8.  
  9. <span style="color:#999999"><</span>script<span style="color:#999999">></span>
  10. 	<span style="color:#c678dd">const</span> AndroidDialogModule <span style="color:#669900">=</span> uni<span style="color:#999999">.</span><span style="color:#61aeee">requireNativePlugin</span><span style="color:#999999">(</span><span style="color:#669900">"AndroidDialog"</span><span style="color:#999999">)</span>
  11. 	export <span style="color:#c678dd">default</span> <span style="color:#999999">{</span>
  12. 		<span style="color:#61aeee">data</span><span style="color:#999999">(</span><span style="color:#999999">)</span> <span style="color:#999999">{</span>
  13. 			
  14. 		<span style="color:#999999">}</span><span style="color:#999999">,</span>
  15. 		<span style="color:#61aeee">onLoad</span><span style="color:#999999">(</span><span style="color:#999999">)</span> <span style="color:#999999">{</span>
  16.  
  17. 		<span style="color:#999999">}</span><span style="color:#999999">,</span>
  18. 		methods<span style="color:#669900">:</span> <span style="color:#999999">{</span>
  19. 			<span style="color:#61aeee">showDialog</span><span style="color:#999999">(</span>message<span style="color:#999999">)</span> <span style="color:#999999">{</span>
  20. 				AndroidDialogModule<span style="color:#999999">.</span><span style="color:#61aeee">showDialog</span><span style="color:#999999">(</span>processokdata <span style="color:#669900">=</span><span style="color:#669900">></span> <span style="color:#999999">{</span>
  21. 					AndroidDialogModule<span style="color:#999999">.</span><span style="color:#61aeee">showToast</span><span style="color:#999999">(</span>processokdata<span style="color:#999999">)</span>
  22. 				<span style="color:#999999">}</span><span style="color:#999999">)</span>
  23. 			<span style="color:#999999">}</span><span style="color:#999999">,</span>
  24. 		<span style="color:#999999">}</span>
  25. 	<span style="color:#999999">}</span>
  26. <span style="color:#669900"><</span><span style="color:#669900">/</span>script<span style="color:#669900">></span>
  27.  
  28. <span style="color:#999999"><</span>style<span style="color:#999999">></span>
  29. 	<span style="color:#999999">.</span>button1 <span style="color:#999999">{</span>
  30. 		display<span style="color:#669900">:</span> flex<span style="color:#999999">;</span>
  31. 		margin<span style="color:#669900">-</span>top<span style="color:#669900">:</span> <span style="color:#98c379">200</span>rpx<span style="color:#999999">;</span>
  32. 		margin<span style="color:#669900">-</span>left<span style="color:#669900">:</span> auto<span style="color:#999999">;</span>
  33. 		margin<span style="color:#669900">-</span>right<span style="color:#669900">:</span> auto<span style="color:#999999">;</span>
  34. 		flex<span style="color:#669900">-</span>direction<span style="color:#669900">:</span> column<span style="color:#999999">;</span>
  35. 		align<span style="color:#669900">-</span>items<span style="color:#669900">:</span> center<span style="color:#999999">;</span>
  36. 		justify<span style="color:#669900">-</span>content<span style="color:#669900">:</span> center<span style="color:#999999">;</span>
  37. 	<span style="color:#999999">}</span>
  38. <span style="color:#669900"><</span><span style="color:#669900">/</span>style<span style="color:#669900">></span>
  39. </code></span></span></span>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38

打包为本地资源
在这里插入图片描述
编译完成后会返回文件存放地址
在这里插入图片描述
将打包得到的文件夹名称是__UNI__24505A6（类似这样的）
在这里插入图片描述复制到android 项目中的app/src/main/assets/apps下
在这里插入图片描述
将同目录下data文件夹中的dcloud_control文件中的appid改为你复制的文件夹名称
在这里插入图片描述

在dcloud_uniplugins.json中添加插件配置
在这里插入图片描述
最后还需要配置两个文件

  1. app目录下的AndroidMainfest.xml中需要配置uniapp的key值，可以从dcloud的开发者平台配置获取，这个很简单就不在说了。
    在这里插入图片描述
  2. 在app目录下的build.gradle中依赖你写的module
    在这里插入图片描述

到这里一个简单的原生插件就开发完成了，运行到手机或者模拟器就能得到你的成果了
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号