前言
最近公司要求研究一下 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
修改依赖为
dependencies {
compileOnly fileTree(dir: 'libs', include: ['*.jar'])
compileOnly fileTree(dir: 'libs', include: ['uniapp-v8-release.aar'])
compileOnly 'androidx.legacy:legacy-support-v4:1.0.0'
compileOnly 'androidx.appcompat:appcompat:1.0.0'
compileOnly 'androidx.recyclerview:recyclerview:1.0.0'
//下面的可以删除
/*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'*/
}
然后module就配置完了,然后就是android 的开发工作
下面是一个简单的示例。
新建类AndroidDialog 继承UniModule(示例是调用android原生的系统弹窗)
然后在AndroidDialog内写上自己的代码
package com.xiaohu.xiaohu_testmodule;
import android.app.Activity;
import android.content.DialogInterface;
import android.util.Log;
import android.widget.Toast;
import androidx.appcompat.app.AlertDialog;
import com.taobao.weex.annotation.JSMethod;
import com.taobao.weex.bridge.JSCallback;
import java.util.Map;
import io.dcloud.feature.uniapp.common.UniModule;
public class AndroidDialog extends UniModule {
/**
* 调用原生Dialog显示
*/
@JSMethod(uiThread = true) //必须加上注释,不然uniapp无法调用
public void showDialog(JSCallback jsCallback) { //需为pulic
if (mWXSDKInstance != null && mWXSDKInstance.getContext() instanceof Activity) {
new AlertDialog.Builder(mWXSDKInstance.getContext())
.setTitle("弹窗")
.setMessage("这是一个测试弹窗")
.setPositiveButton("确定", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
jsCallback.invoke("点击了确定");
}
})
.setNegativeButton("取消", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
jsCallback.invoke("点击了取消");
}
})
.show();
}
}
/**
* 调用原生Toast显示传入内容
*/
@JSMethod(uiThread = true)
public void showToast(String message) {
if (mWXSDKInstance != null && mWXSDKInstance.getContext() instanceof Activity) {
Toast.makeText(mWXSDKInstance.getContext(), message.toString(), Toast.LENGTH_SHORT).show();
Log.e("调用处理","bu显示就bu快乐");
}
}
}
到这一个简单的插件就写完了,但是我们肯定要先做一下测试才能发布或者给别人使用
4.调试插件
打开HbuilderX 新建unipp项目 uniTest
创建完成后的目录结构
修改index.vue的代码
<template>
<view class="content">
<view class="button1">
<button @click="showDialog(message)">点击显示原生Dialog</button>
</view>
</view>
</template>
<script>
const AndroidDialogModule = uni.requireNativePlugin("AndroidDialog")
export default {
data() {
},
onLoad() {
},
methods: {
showDialog(message) {
AndroidDialogModule.showDialog(processokdata => {
AndroidDialogModule.showToast(processokdata)
})
},
}
}
</script>
<style>
.button1 {
display: flex;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
打包为本地资源
编译完成后会返回文件存放地址
将打包得到的文件夹名称是__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
到这里一个简单的原生插件就开发完成了,运行到手机或者模拟器就能得到你的成果了