Table of Contents

Integrieren Sie das Mega-Plugin in Ihr WeChat-Mini-Programm

Dieses Dokument führt Sie durch die Integration des Mega-Plugins in einer xr-frame-Mini-Programm-Umgebung.

Vorbereitung

  • Lernen Sie die Verwendung der offiziellen XR-3D-Engine von WeChat anhand des xr-frame-Entwicklungsleitfadens und der xr-frame-Beispiele, einschließlich:
    • Einbindung der xr-frame-Komponente in reguläre WeChat-Mini-Programm-Seiten.
    • Kommunikation zwischen xr-frame-Komponenten und traditionellen Mini-Programm-Komponenten.
    • Abrufen oder Erstellen von Elementen aus einer Szene und Ändern von Eigenschaften wie Transform.
    • Laden und Freigeben von Ressourcen, z.B. GLTF-Modelle.

Globale Konfiguration

Fügen Sie in der globalen Konfigurationsdatei app.json im Stammverzeichnis des Mini-Programms die Abhängigkeit vom Mega-Mini-Programm-Plugin hinzu und ändern Sie das Lazy Loading in On-Demand-Injection.

{
  "lazyCodeLoading": "requiredComponents",
  "plugins": {
    "easyar-wechat-miniprogram": {
      "version": "2.0.2", //Verwenden Sie die neueste Plugin-Version
      "provider": "wx27fa3b52b5462e8f" // Feste ID des Mega-Mini-Programm-Plugins
    }
  }
}

Plugin laden

Sie können das Plugin über die Plugin-Schnittstelle einbinden, um einige Methoden direkt zu verwenden und zu überprüfen, ob das Plugin korrekt geladen wurde.

Verwenden Sie beispielsweise die von WeChat bereitgestellte Schnittstelle requirePlugin(string path), um EasyARWechatMiniprogramPlugin zu erhalten, und verwenden Sie dann die Methode isMegaTrackerSupported, um zu prüfen, ob das Gerät unterstützt wird.

//Wenn typings-Datei bereits eingebunden ist
//const easyarPlugin: easyar.EasyARWechatMiniprogramPlugin = requirePlugin("easyar-wechat-miniprogram") as easyar.EasyARWechatMiniprogramPlugin;
const easyarPlugin = requirePlugin("easyar-wechat-miniprogram") as any;
//Rufen Sie isMegaTrackerSupported auf, um zu prüfen, ob das aktuelle Gerät unterstützt wird
if (!easyarPlugin.isMegaTrackerSupported()) {
    const message = `Aktuelles Gerät unterstützt VK v1 und v2 nicht. Bitte konsultieren Sie die offizielle WeChat-Dokumentation: https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/visionkit/plane.html`;
    wx.showModal({
        title: "Gerät nicht unterstützt",
        content: message,
        showCancel: false,
    });
    console.error(message);
    return;
}

Dieses Beispiel ruft zunächst über die WeChat-Schnittstelle requirePlugin(string path) das Objekt easyarPlugin ab, das die Plugin-Schnittstelle bereitstellt. Anschließend wird die Methode isMegaTrackerSupported aufgerufen, um die Unterstützung zu prüfen. Bei Nichtunterstützung wird eine Meldung angezeigt.

Typen einbinden

Es wird empfohlen, Typescript für die Entwicklung zu verwenden.

Pfad im Beispielprojekt: /typings/types/easyar/lib.easyar.d.ts.

Kopieren Sie die Datei in das entsprechende Projektverzeichnis und binden Sie sie in /typings/types/index.d.ts mit einer Triple-Slash-Direktive ein:

/// <reference path="./easyar/lib.easyar.d.ts" />

Wenn Typobjekte benötigt werden, können Sie das Typsystem IMegaSystem des EasyAR-Mega-WeChat-Mini-Programm-Plugins über getMegaSystem abrufen.

const mega: easyar.IMegaSystem = easyarPlugin.getMegaSystem();

Anschließend können Sie die von IMegaSystem bereitgestellten Typen für Typvergleiche verwenden. Beispielsweise können Sie state mit mega.SessionState.Running vergleichen, um zu prüfen, ob die Session erfolgreich initialisiert wurde:

const newState: easyar.SessionState = event.detail.value;
if (newState === mega.SessionState.Running) {
    console.log("EasyAR Session initialized succeeded. Start running.");
}

xr-frame-Szene einrichten (WXML)

In der WXML-Datei der Seite muss die xr-easyar-mega-Komponente ein untergeordneter Knoten von xr-scene sein und die id der Kamera und des Trackers korrekt gebunden werden. Wenn keine id angegeben ist, verwendet die Komponente die erste gefundene xr-camera- und xr-ar-tracker-Komponente in der Szene.

<xr-scene id="xr-scene" ar-system="modes:Plane; planeMode: 1" bind:ready="handleReady">
    <xr-easyar-mega
        id="easyar-mega"
        camera-id="xrCamera"
        ar-tracker-id="xrARTracker"
    ></xr-easyar-mega>
    <xr-node>
        <xr-ar-tracker id="xrARTracker" mode="Plane"></xr-ar-tracker>
        <xr-camera id="xrCamera" node-id="xrCamera" clear-color="0.925 0.925 0.925 1" background="ar" is-ar-camera></xr-camera>
    </xr-node>
    <xr-shadow id="shadow-root" node-id="xrShadow"></xr-shadow>
</xr-scene>
Vorsicht

planeMode von ar-system muss auf 1 gesetzt werden

Event-Callbacks für das Mega-Plugin registrieren

<xr-easyar-mega
    id="easyar-mega"
    camera-id="xrCamera"
    ar-tracker-id="xrARTracker"
    bind:sessionStateChange="onSessionStateChange"
    bind:megaLocalizationResult="onMegaLocalizationResult"
    bind:postSessionUpdate="onPostSessionUpdate"
></xr-easyar-mega>

Binden Sie die von xr-frame-Element-Proxy verteilten Events in WXML. Den xr-frame-Eventmechanismus finden Sie unter xr-frame-Eventmechanismus

Die vom Plugin verteilten Events sind:

Eventname Parametertyp Beschreibung
SessionStateChange SessionState Wird sofort ausgelöst, wenn sich der Session-Status ändert. Der Parameter ist der neue Status der Session, um Initialisierungsrückrufe zu verarbeiten.
MegaLocalizationResult MegaLocalizationResult Wird nach Abschluss des Updates des Render-Frames mit Mega-Lokalisierungsergebnissen ausgelöst. Zu diesem Zeitpunkt sind alle durch EasyAR gesteuerten Transform-Änderungen in diesem Frame abgeschlossen.
PostSessionUpdate Keine Parameter Wird unmittelbar nach Abschluss des Session-Updates in diesem Render-Frame ausgelöst. Zu diesem Zeitpunkt sind alle durch EasyAR gesteuerten Transform-Änderungen in diesem Frame abgeschlossen.

AR Session

Erstellung, Start und Zerstörung der Session finden Sie unter AR Session-Prozesssteuerung

Bestätigen Sie den Erfolg der Initialisierung über den sessionStateChange-Event-Callback. Wenn der Status Running erreicht, ist die ARSession bereit.

Registrieren Sie in WXML die Funktion onSessionStateChange() der xr-frame-Komponente mit bind:sessionStateChange="onSessionStateChange" als Callback für sessionStateChange-Events:

<xr-easyar-mega
    bind:sessionStateChange="onSessionStateChange"
></xr-easyar-mega>

In der Callback-Funktion onSessionStateChange() der xr-frame-Komponente kann der aktuelle Session-Status durch Vergleich mit den Enumerationen von SessionState bestimmt werden.

onSessionStateChange(event) {
    const newState: easyar.SessionState = event.detail.value;
    console.log(`EasyAR Session state changed to: ${mega.SessionState[newState]}`);
    let displayInfoStr: string = "";
    if (newState === mega.SessionState.None) {
        displayInfoStr = "EasyAR Session is inactive.";
    } else if (newState === mega.SessionState.Initializing) {
        displayInfoStr = "EasyAR Session is initializing...";
    } else if (newState === mega.SessionState.Running) {
        displayInfoStr = "EasyAR Session initialized succeeded. Start running.";
    }
    this.triggerEvent("sessionDisplayInfoEvent", displayInfoStr);
}

Im obigen Code sollte nach Abschluss der Initialisierung "EasyAR Session initialized succeeded. Start running." in der Konsole ausgegeben werden.

Verwandte Themen