Document the UNI native plug-in development process

I would like to record that as a long-time hand party, I know what you likeOK first on the source link Hbuilder X openUniToastAndroidStudio openUniPlugin-Hello-ASNote that this project uses [email protected]_20201111

See the official documentation link for this article

1. Prepare the development environment

  • JAVA environment jdk1.8
  • Android Studio
  • App Offline SDK Download: Download the android SDK version 2.9.8+
  • The official website SDK is decompressed as follows

Second, develop debugging plug-ins

I. Import projects

  • Import the uni plug-in native project Uniplugin-Hello-AS project please find it in the App offline SDK
  • Click the Android Studio menu option File >New >Import Project.
  • The directory structure is as follows

  • Upgrade project for AndroidX click and wait

Create a plug-in Library

  • Because uni toasts have character limits, the following is the easiest way to call native toasts

Select the Android LibraryEnter the Library name toastplus and click FinishThen import ToastPlus under build.gradle in your app directoryCopy the uniapp-V8-release. aar package (with a different name) from the APP libs directory to toastPlus LibsThen modify the build.gradle file in Modle ToastPlus to import the AAR package by clicking on the upper right corner to synchronizeThen create the ToastPlus class integration UniMoudle in the Modle directory

The ToastPlus code is as follows

public class ToastPlus extends UniModule {
    JSCallback jsCallback;
    String path = "";

    /** * simple callback example * passes in a String and returns */
    @JSMethod(uiThread = true)
    public void processData(String data, JSCallback jsCallback) {
        this.jsCallback = jsCallback;
        if(mWXSDKInstance ! =null && mWXSDKInstance.getContext() instanceof Activity) {
            path = data + "+(processing done)";
            // Return the result of processing for callbackjsCallback.invoke(path); }}/** * Call native Toast to display incoming content */
    @JSMethod(uiThread = true)
    public void showToast(String message) {
        if(mWXSDKInstance ! =null && mWXSDKInstance.getContext() instanceofActivity) { Toast.makeText(mWXSDKInstance.getContext(), message, Toast.LENGTH_SHORT).show(); }}}Copy the code
  • Add the plug-in information to the app/dcloud_uniplugins.json file

Name is the name of the uni call native plug-in. Class is the absolute path

Create a UNI project

To open HBuilderX, be sure to use the latest UniApp Android native SDK and the latest version of HBuilderX

Create a new UNIApp project and modify the index code

The code for index.vue is as follows

<template>
	<view class="content">
		<view class="button1">
			<button @click="showToast(message)">Click to display native Toast</button>
		</view>
		<view class="button2">
			<button @click="processData(waitprocessdata)">The use of callbacks</button>
		</view>
	</view>
</template>

<script>
	const ToastPlusModule = uni.requireNativePlugin("toastplus")
	export default {
		data() {
			return {
				message: 'I'm a long Toast. I'm a long Toast.'.waitprocessdata: 'I'm data to be processed.'}},onLoad(){},methods: {
			showToast(message) {
				ToastPlusModule.showToast(message)
			},
			processData(data) {
				ToastPlusModule.processData(data, processokdata= > {
					ToastPlusModule.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;
	}

	.button2 {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 100rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}
</style>
Copy the code

3. Debug plug-ins

Click local Resource PackageThe console will output the path

Copy __UNI__904803F * * * * folder to AndroidStudio app/SRC/main/assets/apps/directory And modify the dcloud_control appid field in the XMLClick Run to debug the results of the plug-in! [Insert picture description here]Img – blog. Csdnimg. Cn / 20201216130…=300×600) ! [Insert picture description here]Img – blog. Csdnimg. Cn / 20201216130…=300×600) If you can successfully run congratulations on your UNI native plug-in you have developed the following is how to package for submission market needs zip package

Package as a local plug-in

  1. Create a folder name locally that can be named your UNI account name – plug-in name

Such asLet’s start by editing the pakege.json fileThe following code

{
    "name": "ToastPlus"."id": "AndroidLMY-ToastPlus"."version": "1.0.0"."description": "Native Toast"."_dp_type":"nativeplugin"."_dp_nativeplugin": {"android": {
            "plugins": [{"type": "module"."name":"ToastPlus"."class": "com.lmy.toastplus.ToastPlus"}]."integrateType": "aar"}}}Copy the code

Then package the aar package of the plugin. Select the option on the right side of Gradle and click on itThe aar package input path isCopy the AAR package to the Android directory

Debug local plug-ins

We first test the usability of the plug-in before packaging it as a ZIP package. Open the UNI project and place the assembled folder in the NativePlugins folder.Then modify index.vueThen configure the local plug-inFinally, click release Cloud packagingConfigure the signature file and click PackAfter the package is complete, the console will output the download address. Click Download and install to test it

Publish local plug-ins to the plug-in market

If there is no problem with the test, you can zip the folder ready to submit to the marketFinally, click Publish and wait for approval