uniapp开发一次安卓原生插件记录

tianqi
703 阅读2分钟

Android原生插件开发

uniapp开发一次安卓原生插件记录

之前在uni-app开发中，我们经常会使用到原生插件，比如自定义滚动条、自定义导航栏、自定义分享等等。现在记录一下uni-app开发中使用到的原生插件，以及使用的方式。

开发之前准备好开发环境。这里不做详细描述本次开发的是一个文件选择插件,本插件封装自FilePicker，由于该作者未提供公共maven库，本人又在该插件中添加了android-maven-gradle-plugin提交到了jit maven仓库

jitpack.io/android-maven-gradle-plugin插件使用记录

在开发之前，我们需要先准备好一个开发环境，这里我们使用了jitpack.io/android-mav…插件，这个插件可以自动安装android-maven-gradle-plugin插件，并且自动安装了android-gradle-plugin插件，这样我们就可以使用android-maven-gradle-plugin插件了。

配置好之后直接把代码提交到GitHub，然后在GitHub上新建一个Releases版本，然后授权jitpack使用GitHub账号

jitpack在检测后生成maven库，可能会等待10几分钟，然后就可以直接使用了

现在我们可以开始开发uniapp的插件了，新建module，引入插件，然后在插件中使用插件的api

FilePickerModule

package com.tq.tq_file_picker;

import android.app.Activity;
import android.content.Intent;

import com.tq.pldk.filepicker.FilePickerActivity;
import com.tq.pldk.filepicker.PickerManager;

import io.dcloud.feature.uniapp.annotation.UniJSMethod;
import io.dcloud.feature.uniapp.bridge.UniJSCallback;
import io.dcloud.feature.uniapp.common.UniModule;

public class FilePickerModule extends UniModule {
    String TAG = "FilePickerModule";
    public UniJSCallback mCallback = null;
    private static int REQ_CODE = 0X01;

    @UniJSMethod(uiThread = true)
    public void openFilePicker(int max,UniJSCallback callback){
        mCallback = callback;
        if(mUniSDKInstance != null && mUniSDKInstance.getContext() instanceof Activity) {
            Activity activity = (Activity) mUniSDKInstance.getContext();
            PickerManager.getInstance().setMaxCount(max);
            Intent intent = new Intent(activity, FilePickerActivity.class);
            activity.startActivityForResult(intent,REQ_CODE);
        }
    }

    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        if (requestCode == REQ_CODE) {
            mCallback.invoke(PickerManager.getInstance().files);
        } else {
            super.onActivityResult(requestCode, resultCode, data);
        }
    }
}

现在我们可以直接生成uniapp的插件了

生成的aar插件就是我们需要的了

开始上架商店

package.json文件

{
    "name": "Tq-FileSelector",
    "id": "Tq-FileSelector",
    "version": "1.0.1",
    "description": "Tq-FileSelector",
    "_dp_type":"nativeplugin",
    "_dp_nativeplugin":{
        "android": {
            "plugins": [
                {
                    "type": "module",
                    "name": "Tq-FileSelector",
                    "class": "com.tq.tq_file_picker.FilePickerModule"
                }
            ],
            "hooksClass": "",
            "integrateType": "aar",
            "dependencies": [
				{
					"id": "com.github.qitiandear",
					"source": "implementation('com.github.qitiandear:bigFile:1.0.3')"
				},
				{
					"id": "com.github.getActivity",
					"source": "implementation('com.github.getActivity:XXPermissions:11.0')"
				},
				{
					"id": "androidx.appcompat",
					"source": "implementation('androidx.appcompat:appcompat:1.2.0')"
				}
            ],
            "compileOptions": {
                "sourceCompatibility": "1.8",
                "targetCompatibility": "1.8"
            },
            "abis": [
            ],
            "minSdkVersion": "21",
            "useAndroidX": true,
            "permissions": [
				"android.permission.WRITE_EXTERNAL_STORAGE",
				"android.permission.READ_EXTERNAL_STORAGE",
				"android.permission.MANAGE_EXTERNAL_STORAGE"
            ],
            "parameters": {
            }
        }
    }
}

上架商店

插件使用说明

文件选择

注意：请现在 manifest 中配置该插件，否则无法运行！！！

<template>
	<view>
		<view class="mapCover" @click="check">
			<text>都是否定的否定</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mapHeight: 0,
				latitude: 39.909,
				longitude: 116.39742,
			}
		},
		onLoad(){
		},
		methods: {
			check(){
				const filePicker = uni.requireNativePlugin('Tq-FileSelector');
				console.log(filePicker);
				let count = 5;
				filePicker.openFilePicker(count,res => {
					console.log(res);
					uni.showToast({
						title:"成功"+JSON.stringify(res),
						icon:"none"
					})
				})
			}
		}
	}
</script>

<style>
	.map {
		width: 750rpx;
	}
	.mapCover{
		width: 750rpx;
		height: 254rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-top: 100rpx;
	}
</style>

说明

  • openFilePicker(int,Function)
  • 参数说明
let count = 5; //文件数量
  • 返回选择的内容 格式：
[{
	"selected": true,
	"fileType": {
		"iconStyle": 2131492884,
		"title": "TXT",
		"filterType": ["txt"]
	},
	"path": "/storage/emulated/0/secoclient/operate_system_info.txt",
	"mimeType": "text/plain",
	"id": 2187,
	"name": "operate_system_info",
	"size": "91"
}, {
	"selected": true,
	"fileType": {
		"iconStyle": 0,
		"title": "IMG",
		"filterType": ["png", "jpg", "jpeg", "gif"]
	},
	"path": "/storage/emulated/0/DCIM/Screenshots/Screenshot_2022-05-24-09-16-49-413_io.dcloud.HBuilder.jpg",
	"mimeType": "image/jpeg",
	"id": 2151,
	"name": "Screenshot_2022-05-24-09-16-49-413_io.dcloud.HBuilder",
	"size": "171038"
}]


# 重点在最后
返回文件路径怎样用？
```js
"file:///"+文件绝对路径（path）
avatar
文章
阅读
粉丝