前言
最近公司要求研究一下 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中添加插件配置
最后还需要配置两个文件
- app目录下的AndroidMainfest.xml中需要配置uniapp的key值，可以从dcloud的开发者平台配置获取，这个很简单就不在说了。
- 在app目录下的build.gradle中依赖你写的module
到这里一个简单的原生插件就开发完成了，运行到手机或者模拟器就能得到你的成果了
官网
简介 | uni小程序SDK
