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

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'*/
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

然后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快乐");
        }
    }
}
 
 

• 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的代码

<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>

• 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
   

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