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
修改依赖为

<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>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>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>compileOnly <span style="color:#669900">'androidx.legacy:legacy-support-v4:1.0.0'</span>compileOnly <span style="color:#669900">'androidx.appcompat:appcompat:1.0.0'</span>compileOnly <span style="color:#669900">'androidx.recyclerview:recyclerview:1.0.0'</span><span style="color:#5c6370">//下面的可以删除</span><span style="color:#5c6370">/*implementation 'androidx.appcompat:appcompat:1.2.0'implementation 'com.google.android.material:material:1.2.1'testImplementation 'junit:junit:4.+'androidTestImplementation 'androidx.test.ext:junit:1.1.2'androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'*/</span>
<span style="color:#999999">}</span>
</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内写上自己的代码

<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><span style="color:#c678dd">import</span> android<span style="color:#999999">.</span>app<span style="color:#999999">.</span>Activity<span style="color:#999999">;</span>
<span style="color:#c678dd">import</span> android<span style="color:#999999">.</span>content<span style="color:#999999">.</span>DialogInterface<span style="color:#999999">;</span>
<span style="color:#c678dd">import</span> android<span style="color:#999999">.</span>util<span style="color:#999999">.</span>Log<span style="color:#999999">;</span>
<span style="color:#c678dd">import</span> android<span style="color:#999999">.</span>widget<span style="color:#999999">.</span>Toast<span style="color:#999999">;</span><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><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>
<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><span style="color:#c678dd">import</span> java<span style="color:#999999">.</span>util<span style="color:#999999">.</span>Map<span style="color:#999999">;</span><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><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><span style="color:#5c6370">/*** 调用原生Dialog显示*/</span><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><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><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><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><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><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><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><span style="color:#999999">@Override</span><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>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><span style="color:#999999">}</span><span style="color:#999999">}</span><span style="color:#999999">)</span><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><span style="color:#999999">@Override</span><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>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><span style="color:#999999">}</span><span style="color:#999999">}</span><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><span style="color:#999999">}</span><span style="color:#999999">}</span><span style="color:#5c6370">/*** 调用原生Toast显示传入内容*/</span><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:#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><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>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>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><span style="color:#999999">}</span><span style="color:#999999">}</span>
<span style="color:#999999">}</span></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的代码

<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><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><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><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><span style="color:#669900"><</span><span style="color:#669900">/</span>view<span style="color:#669900">></span><span style="color:#669900"><</span><span style="color:#669900">/</span>view<span style="color:#669900">></span>
<span style="color:#669900"><</span><span style="color:#669900">/</span>template<span style="color:#669900">></span><span style="color:#999999"><</span>script<span style="color:#999999">></span><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>export <span style="color:#c678dd">default</span> <span style="color:#999999">{</span><span style="color:#61aeee">data</span><span style="color:#999999">(</span><span style="color:#999999">)</span> <span style="color:#999999">{</span><span style="color:#999999">}</span><span style="color:#999999">,</span><span style="color:#61aeee">onLoad</span><span style="color:#999999">(</span><span style="color:#999999">)</span> <span style="color:#999999">{</span><span style="color:#999999">}</span><span style="color:#999999">,</span>methods<span style="color:#669900">:</span> <span style="color:#999999">{</span><span style="color:#61aeee">showDialog</span><span style="color:#999999">(</span>message<span style="color:#999999">)</span> <span style="color:#999999">{</span>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>AndroidDialogModule<span style="color:#999999">.</span><span style="color:#61aeee">showToast</span><span style="color:#999999">(</span>processokdata<span style="color:#999999">)</span><span style="color:#999999">}</span><span style="color:#999999">)</span><span style="color:#999999">}</span><span style="color:#999999">,</span><span style="color:#999999">}</span><span style="color:#999999">}</span>
<span style="color:#669900"><</span><span style="color:#669900">/</span>script<span style="color:#669900">></span><span style="color:#999999"><</span>style<span style="color:#999999">></span><span style="color:#999999">.</span>button1 <span style="color:#999999">{</span>display<span style="color:#669900">:</span> flex<span style="color:#999999">;</span>margin<span style="color:#669900">-</span>top<span style="color:#669900">:</span> <span style="color:#98c379">200</span>rpx<span style="color:#999999">;</span>margin<span style="color:#669900">-</span>left<span style="color:#669900">:</span> auto<span style="color:#999999">;</span>margin<span style="color:#669900">-</span>right<span style="color:#669900">:</span> auto<span style="color:#999999">;</span>flex<span style="color:#669900">-</span>direction<span style="color:#669900">:</span> column<span style="color:#999999">;</span>align<span style="color:#669900">-</span>items<span style="color:#669900">:</span> center<span style="color:#999999">;</span>justify<span style="color:#669900">-</span>content<span style="color:#669900">:</span> center<span style="color:#999999">;</span><span style="color:#999999">}</span>
<span style="color:#669900"><</span><span style="color:#669900">/</span>style<span style="color:#669900">></span>
</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
   

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

官网  简介 | uni小程序SDK