[December 31, 2021] Android native plug-in development tutorial of uniapp

Posted by spellbinder on Sun, 02 Jan 2022 21:02:59 +0100

Android native plug-in development tutorial for uniapp

prepare

  1. hbuilderX,download
  2. app offline SDK, download
  3. Andorid Studio,Android official or Chinese community
  4. Certificate (you can prepare it yourself or generate it using android Studio)

Plug in function introduction

  • For the addition function, we call the plug-in name leruge add, the method is add, and the parameters are a and b

process

  1. HbuilderX creates a project
  2. In pages / index / index Write a button in Vue, then call our native plug-in leruge-add. The code is as follows
<template>
	<view>
		<button @click="add">addition</button>
	</view>
</template>

<script>
	export default {
		methods: {
			add() {
				// Introducing the native plug-in leruge add
				let lerugeAdd = uni.requireNativePlugin("leruge-add")
				// call
				lerugeAdd.add({
					a: 1,
					b: 2
				}, res => {
					uni.showToast({
						title: JSON.stringify(res),
						icon: 'none'
					})
				})
			}
		}
	}
</script>

<style>
</style>
  1. Apply for Appkey in Developer Center , click the app just created
  2. The Android package name and IOS bundle are filled in as com android. UniPlugin
  3. How to obtain SHA1 signature by Baidu is good. Here's a detailed explanation, course
  4. Click Save to generate the appkey
  5. Unzip the downloaded APP offline SDK, Download address
  6. open Android Studio and select uniplugin hello as

  7. I'm personally used to the project mode, so switch it
  8. Fill in the appkey we just applied in APP / SRC / main / androidmanifest In XML, because Android is developed, appkey must also be Android
  9. Put our certificate in the app directory. My certificate name is leruge keystore
  10. Configure the certificate in APP / build Gradle's signingConfigs option
  11. Right click uniplugin hello as to create the Module
  12. Fill in plug-in information
  13. Configure error_ add/build. Gradle, copy example uniplugin_module/build.gradle
  14. In leruge_ Add / SRC / main / Java / COM / example / leuge / add create class AddModule
  15. To realize addition, the code is as follows
package com.example.leruge.add;

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;

public class AddModule extends UniModule {

    @UniJSMethod
    public void add(JSONObject json, UniJSCallback callback) {
        int a = json.getIntValue("a");
        int b = json.getIntValue("b");
        JSONObject res = new JSONObject();
        res.put("code", 1);
        res.put("result", a + b);
        callback.invoke(res);
    }
}
  1. Register the plug-in in APP / SRC / main / assets / dccloud_ uniplugins. JSON file, as follows
  2. Generate local packaged resources to HbuilderX
  3. Copy the generated local packaged resources to the app/src/main/assets/apps directory

  4. Configure appid in APP / SRC / main / assets / data / dccloud_ control. Configuration in XML
  5. Add a plug-in project reference in APP / build Add components to gradle
  6. Test: after the mobile phone or virtual device is connected, click Run to test
  7. After the test is successful, generate the uniapp plug-in, click Gradle on the right side of Android Studio, and then select leruge_ Add / tasks / other / assemblyrelease, double-click to generate aar package, and the generated package is in leruge_add/build/outputs/aar directory
  8. Create a folder with the same name as the plug-in_ Add, in leruge_ Create the android folder and package. Exe under add JSON file
  9. Put the aar package in the android folder, package JSON can be configured at the minimum or according to the actual situation
{
    "name": "leruge-add",
    "id": "leruge-add",
    "version": "1.0.1",
    "description": "addition",
    "_dp_type":"nativeplugin",
    "_dp_nativeplugin":{
        "android": {
            "plugins": [
                {
                    "type": "module",
                    "name": "lerug-add",
                    "class": "com.example.leruge.add.AddModule"
                }
            ],
            "integrateType": "aar"
        }
    }
}
  1. It can be used as a local plug-in or uploaded to the plug-in market

Conclusion

So far, Android native plug-in development has been completed

Leaving a message.

click Leaving a message.

Topics: uniapp