uniapp native Android development plug-in (module), and local debugging in the android environment

1. Development prospect

Due to the limitations of the uniapp framework, there are many functions that cannot be used as smoothly as native android development. Therefore, it is necessary to use plug-ins for assistance, and then uniapp introduces plug-ins to make the functions perfect. Without further ado, let's go straight to the tutorial! Please like it if you find it useful!

2. Preparation

The uniapp project (aka your own project)
Download and install JDK (java JDK) jdk1.8
Download and install android studio ( csdn download ), download android studio from the official website (official website download needs to bypass the wall, and installation also needs to bypass the wall, the company's network should be able to access the external network, otherwise the sdk will not be downloaded (the blogger also got it long time))
Download and unzip the uniapp offline SDK ( App offline SDK )

and the preparations are over

3. Android imports app offline SDK (compressed package downloaded in point 4)

Unzip app offline SDK
Import the UniPlugin-Hello-AS project into Android studio
Wait for the import and compilation to complete, and switch to project mode. The project structure after compilation is as follows

4. Create a new module (a module that implements our functions)

new module
Select Android library, fill in your package name (remember not to be the same as the package name when uniapp was packaged (this is a pit, uniapp is not compatible)), click Finish
Import and import the uniapp-release.aar plug-in, which is the main dependency library of the extended module
In the App Offline SDK —> SDK folder ----> libs -----> find uniapp-release.aar

and move it to android In the imported project, switch to the project directory

insert image description here

Add dependencies to the newly created module (uniplugin_sunmi is my own new module)

repositories {
    
    
    flatDir {
    
    
        dirs 'libs'
    }
}

dependencies {
    
    
    compileOnly fileTree(dir: 'libs', include: ['*.jar'])

    compileOnly fileTree(dir: '../app/libs', include: ['uniapp-v8-release.aar'])

    implementation 'androidx.recyclerview:recyclerview:1.0.0'
    implementation 'androidx.legacy:legacy-support-v4:1.0.0'
    implementation 'androidx.appcompat:appcompat:1.0.0'
    implementation 'com.alibaba:fastjson:1.1.46.android'
    implementation 'com.facebook.fresco:fresco:1.13.0'
    testImplementation 'junit:junit:4.12'

}

insert image description here

If the synchronization fails, please check if the following error appears No signature ofm.android0 is applicable for arg
Try Again Open 'Build' View
Show Log in Explorer
insert image description here
Please delete the namespace, then find androidManifest.xml to add the package name, and then click file —> sync project whit Gradle Files to synchronize

Create a new java class (the class used to implement our functions)

and configure it in the AndroidManifest.xml file (required)

 <application>
        <activity android:name="com.example.uniplugin_sunmi.ScanCode"
            android:theme="@android:style/Theme.DeviceDefault.Light.NoActionBar"></activity>
    </application>

insert image description here
Write the module class (that is, our new class name), write the test code
Note: Inherit UniModule , and add @UniJSMethod annotation ( add this annotation to any function method that needs to be thrown to uniapp )

package com.example.uniplugin_sunmi;

import com.alibaba.fastjson.JSONObject;
import io.dcloud.feature.uniapp.annotation.UniJSMethod;
import io.dcloud.feature.uniapp.bridge.UniJSCallback;
import io.dcloud.feature.uniapp.common.UniModule;

// 一定要继承UniModule
public class ScanCode extends UniModule {
    
    
    // 使用UniJSMethod注解，才能使用js调用
    @UniJSMethod(uiThread = true)
    public void  add (JSONObject json, UniJSCallback callback) {
    
    
        final int a = json.getInteger("a");
        final int b = json.getInteger("b");
        callback.invoke(new JSONObject() {
    
    {
    
    
            put("code", 0);
            put("result", a + b);
        }});
    }
}

end of writing

Add the uniapp-plugin in build.gradle(app), click sync now
Add a new plugin in dcloud_uniplugin.json, note: the plugin name will be referenced in uniapp
Package the module into a plug-in aar file.

If you do not find the assmbleRelese button, you can set

it. After packaging, you can view the aar file in the build

5. Use in uniapp

Create a plugin directory and configure the plugin package.json configuration just created

{
    
    
	"name": "sunmi-scan",
	"id": "sunmi-scan",
	"version": "1.0.0",
	"description": "订单的",
	"_dp_type": "nativeplugin",
	"_dp_nativeplugin": {
    
    
		"android": {
    
    
			"integrateType": "aar",
			"plugins": [{
    
    
				"type": "module",
				"name": "sunmi-scan",
				"class": "com.example.uniplugin_sunmi.ScanCode"
			}],
			 "minSdkVersion": "19"
		}
	}
}

insert image description here

use plugin

Add local plugin

Use plugins
to include in the page

<template>
  <view class="content">
    <image class="logo" src="/static/logo.png"></image>
    <view class="text-area">
      <button @click="test">测试</button>
    </view>
  </view>
</template>

<script setup lang="ts">
  const test= ()=>{
    
    
    // 引入自定义插件
    const testModule = uni.requireNativePlugin('sunmi-scan')
    // 使用module的add方法
    testModule.add({
    
    
      a:1,b:3
    },e=>{
    
    
      uni.showToast({
    
    
        title:JSON.stringify(e),
        icon:'none'
      })
    })
  }
</script>

Finally: packaging as a base for testing (most important)