Wie Uniapp die native Entwicklung integriert

Mit der kontinuierlichen Entwicklung des Marktes für mobile Anwendungen ist auch die Entwicklung plattformübergreifender Anwendungen zu einem Trend geworden. Als eines der am weitesten verbreiteten plattformübergreifenden Frameworks auf dem Markt wird Uniapp von Entwicklern wegen seiner guten Kompatibilität, hohen Entwicklungseffizienz und einfachen Verwendung geliebt. Wenn jedoch einige Anforderungen stärker angepasst werden oder einige native Funktionen aufgerufen werden müssen, kann die Verwendung von reinem Uniapp zum Entwickeln von Anwendungen möglicherweise nicht den Anforderungen gerecht werden. Zu diesem Zeitpunkt müssen wir Uniapp und Native für die gemischte Entwicklung verwenden, um nicht nur einige benutzerdefinierte Anforderungen zu erfüllen, sondern auch die Effizienz der Uniapp-Entwicklung voll auszunutzen. Im Folgenden stellen wir detailliert vor, wie Uniapp die native Entwicklung basierend auf tatsächlichen Entwicklungserfahrungen integriert.

1. Vorbereitende Vorbereitungen

Bevor wir mit der Integration der nativen Entwicklung beginnen, müssen wir sicherstellen, dass die lokalen Android- und iOS-Entwicklungsumgebungen konfiguriert wurden und mit deren Verwendung vertraut sind. Gleichzeitig müssen Sie sicherstellen, dass Sie mit der Verwendung des Uniapp-Frameworks vertraut sind und grundlegende Entwicklungsvorgänge beherrschen.

2. Native Plug-Ins einführen

In der Uniapp-Entwicklung können wir native Funktionen nutzen, indem wir native Plug-Ins einführen. Es gibt zwei Möglichkeiten, native Plug-Ins in Uniapp einzuführen: Sie können Plug-Ins selbst entwickeln und Plug-Ins auf dem Markt verwenden.

1. Entwickeln Sie Ihre eigenen Plug-Ins

Es ist nicht schwierig, native Plug-Ins zu entwickeln. Sie können Code gemäß verschiedenen nativen Entwicklungsdokumenten schreiben. Hier stelle ich Ihnen ein allgemeineres Beispiel vor: das Abrufen von Geräteinformationen.

In Android können wir die Geräteinformationen über den folgenden Code abrufen:

import android.content.Context;
import android.content.pm.PackageInfo;
import android.content.pm.PackageManager;

public class DeviceInfoUtil {

    public static String getVersionName(Context context) {
        PackageManager packageManager = context.getPackageManager();
        try {
            PackageInfo packageInfo = packageManager.getPackageInfo(context.getPackageName(), 0);
            return packageInfo.versionName;
        } catch (PackageManager.NameNotFoundException e) {
            e.printStackTrace();
        }
        return "";
    }
}

Und in iOS können wir die Geräteinformationen über den folgenden Code abrufen:

#import <UIKit/UIKit.h>

@interface DeviceInfoUtil : NSObject

+ (NSString *)getUUID;

@end

@implementation DeviceInfoUtil

+ (NSString *)getUUID {
    NSString *uuid = [[[UIDevice currentDevice] identifierForVendor] UUIDString];
    return uuid;
}

@end

Nachdem wir die native Funktion geschrieben haben, müssen wir sie in eine packen Plug-in und veröffentlichen Sie es auf dem Markt von Uniapp. Als nächstes können Sie das native Plug-in in Uniapp einführen und verwenden. Die spezifischen Vorgänge lauten wie folgt:

(1) Fügen Sie zunächst einen Verweis auf das native Plug-In in der Datei manifest.json im Anwendungsprojekt hinzu:

"app-plus": {
    // 其他配置
    "plugins": {
      "device": {
        "version": "1.0.0",
        "provider": "xx"
      }
    }
  }

Unter diesen ist „Gerät“ der Name des Plug-Ins und „Version“ der Plug-in-Version und Anbieter ist der Plug-in-Anbieter.

(2) Verwenden Sie die Vue.js-Syntax, um eine JS-Datei zu definieren, die Funktion des Plug-Ins in der Datei aufzurufen und zu exportieren:

const device = uni.requireNativePlugin('device')

function getVersionName() {
    return device.getVersionName()
}

export default {
    getVersionName
}

Unter anderem ist uni.requireNativePlugin('device') die Syntax zum Referenzieren der Plug-In und getVersionName() ist die Funktion, die wir im Plug-In definiert haben, um die Versionsnummer abzurufen.

2. Nutzen Sie Plug-Ins auf dem Markt

Zusätzlich zur eigenen Entwicklung von Plug-Ins können wir auch von anderen Entwicklern entwickelte native Plug-Ins auf dem Uniapp-Markt herunterladen, um die erforderlichen nativen Funktionen zu nutzen. Die spezifischen Vorgänge lauten wie folgt:

(1) Fügen Sie eine benutzerdefinierte Komponente hinzu, die das erforderliche Plug-in in der Datei manifest.json im Anwendungsprojekt enthält:

"usingComponents": {
    "xxx": "@/components/xxx/xxx"
  }

Unter diesen steht xxx für den erforderlichen nativen Plug-in-Namen, @ /components/xxx/xxx Gibt den relativen Pfad an, in dem sich die Plug-In-Datei im Projekt befindet.

(2) Schreiben Sie den Code zur Verwendung des Plug-Ins in der JS-Datei der Vue.js-Syntax:

import xxx from '@/components/xxx/xxx'

export default {
    data() {
        return {
            versionName: ''
        }
    },
    methods: {
        getVersion() {
            this.versionName = xxx.getVersionName()
        }
    }
}

wobei xxx der Name des Plug-Ins und die Funktion getVersion zum Abrufen der Plug-In-Version ist Die Nummer wird im Methodenobjekt der Vue.js-Syntax () definiert und darin die Plug-in-Methode xxx.getVersionName() aufgerufen, um die Versionsnummer zu erhalten.

3. Native Interaktion mit Uniapp

In den vorherigen Schritten haben wir das native Plug-in erfolgreich integriert. Während der Entwicklung müssen wir jedoch möglicherweise auch die Interaktion zwischen Native und Uniapp implementieren. Wenn Benutzer beispielsweise auf native Steuerelemente reagieren, müssen sie zur Uniapp-Seite wechseln, oder wenn die Uniapp-Seite native Funktionen aufrufen muss, müssen sie nativen Code aufrufen usw. Zu diesem Zeitpunkt müssen wir die von Uniapp bereitgestellte API verwenden, um dies zu erreichen.

1. Nativen Code aufrufen

Um nativen Code in Uniapp aufzurufen, können Sie den folgenden Code verwenden:

if (uni.os.android) {
    // Android端
    let intent = new Intent(Intent.ACTION_VIEW)
    intent.setClassName("com.package.name", "com.package.name.MainActivity")
    intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK)
    uni.context.startActivity(intent)
} else if (uni.os.ios) {
    // iOS端
    try {
        window.webkit.messageHandlers.nativeMethod.postMessage(params)
    } catch (e) {
        console.log(e)
    }
}

Unter anderem muss die aufrufende Methode auf der Android-Seite die Intent-Klasse in der Android-API verwenden und ihren Sprung festlegen Ziel und die zu übertragenden Parameter; iOS Beim Aufruf müssen Sie zunächst feststellen, ob das Attribut messageHandlers vorhanden ist, und dann die Nachricht über die postMessage-Methode an den nativen senden. Die Parameter müssen in JSON konvertiert werden Format.

2. Native Nachrichten empfangen

Wenn wir Daten von Native zu Uniapp übertragen müssen, müssen wir im Voraus die entsprechende Rückruffunktion in Uniapp definieren, damit Native die Funktion aufrufen und die Daten übergeben kann. In der Vue.js-Syntaxdatei muss eine allgemeine Funktion „nativeCallback“ definiert werden, um native Daten zu empfangen und sie entsprechend in der Anwendung zu verarbeiten.

Das Folgende ist der Code zum Definieren der Funktion:

export default {
    data() {
        return {
            versionName: ''
        }
    },
    mounted() {
        // 定义原生回调函数
        window.nativeCallback = (data) => {
            console.log(data)
        }
    }
}

Dabei ist window.nativeCallback der Name der definierten Rückruffunktion und data sind die von native übergebenen Daten. In der gemounteten Funktion können wir die Rückruffunktion als globale Funktion definieren und sie dann überall dort verwenden, wo Daten empfangen werden müssen.

Durch die oben genannten Methoden können wir native Plug-Ins verwenden und nativen Code in Uniapp aufrufen, um den Anforderungen verschiedener Szenarien gerecht zu werden.

4. Zusammenfassung

Dieser Artikel beschreibt die Schritte für Uniapp zur Integration der nativen Entwicklung und wie man native Funktionen wie native Plug-Ins und Dialogfelder verwendet. Entwickler, die individuellere Funktionen benötigen oder schnell Anwendungen entwickeln müssen, können je nach tatsächlichem Bedarf verschiedene native Plug-Ins oder APIs verwenden, um ihre Anforderungen zu erfüllen. Gleichzeitig wird empfohlen, bei der Entwicklung nativer Plug-Ins auf verschiedene native Entwicklungsdokumente zu verweisen, um relevante Kenntnisse besser zu beherrschen.

Das obige ist der detaillierte Inhalt vonWie Uniapp die native Entwicklung integriert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!