Das Mega-plugin in Ihr WeChat Mini Program integrieren

Dieses Dokument führt Sie durch die Integration des Mega-plugins in der Mini-Program-Umgebung von xr-frame.

Bevor Sie beginnen

Lesen Sie den xr-frame-Entwicklungsleitfaden und die offiziellen xr-frame-Beispiele, um zu lernen, wie die offizielle XR-3D engine von WeChat verwendet wird. Dazu gehören:
- das Einbinden der xr-frame-Komponente in eine normale WeChat-Mini-Program-Seite;
- die Kommunikation zwischen der xr-frame-Komponente und traditionellen Mini-Program-Komponenten;
- das Abrufen oder Erstellen eines Elements aus der scene und das Ändern bestimmter Eigenschaften wie Transform;
- das Laden und Freigeben von resources, z. B. GLTF-Modellen.

Globale Konfiguration

Fügen Sie im globalen Konfigurationsfile app.json im Root-Verzeichnis des Mini Program die Abhängigkeit vom Mega-Mini-Program-plugin hinzu und ändern Sie dependency loading auf Injection bei Bedarf.

{
  "lazyCodeLoading": "requiredComponents",
  "plugins": {
    "easyar-wechat-miniprogram": {
      "version": "2.0.2", //使用最新的插件版本
      "provider": "wx27fa3b52b5462e8f" // Mega 小程序插件固定 id
    }
  }
}

Plugin laden

Sie können das plugin über das plugin interface einbinden und anschließend einige Methoden des plugins direkt verwenden, um zu prüfen, ob es korrekt geladen wurde.

Nachdem Sie beispielsweise EasyARWechatMiniprogramPlugin über das von WeChat bereitgestellte interface requirePlugin(string path) erhalten haben, verwenden Sie die Methode isMegaTrackerSupported, um zu bestimmen, ob das Gerät unterstützt wird.

//如果已经引入了 typings 文件
//const easyarPlugin: easyar.EasyARWechatMiniprogramPlugin = requirePlugin("easyar-wechat-miniprogram") as easyar.EasyARWechatMiniprogramPlugin;
const easyarPlugin = requirePlugin("easyar-wechat-miniprogram") as any;
//调用 isMegaTrackerSupported 判断当前设备是否支持，若不支持则弹窗提示
if (!easyarPlugin.isMegaTrackerSupported()) {
    const message = `当前设备不支持 VK v1 和 v2，请参考微信官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/visionkit/plane.html`;
    wx.showModal({
        title: "设备不支持",
        content: message,
        showCancel: false,
    });
    console.error(message);
    return;
}

In diesem Beispiel wird zunächst über das von WeChat bereitgestellte interface requirePlugin(string path) easyarPlugin abgerufen, also das vom plugin bereitgestellte interface object. Danach wird die Methode isMegaTrackerSupported aufgerufen, um festzustellen, ob die aktuelle runtime environment verfügbar ist. Ist sie nicht verfügbar, wird ein Dialog angezeigt.

Typen einbinden

Für die Entwicklung wird Typescript empfohlen.

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

Kopieren Sie die Datei in dasselbe Verzeichnis Ihres Projekts und referenzieren Sie sie in /typings/types/index.d.ts mit einer Triple-Slash-Direktive:

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

Wenn type objects verwendet werden müssen, kann das type system IMegaSystem des EasyAR Mega WeChat Mini Program plugins über getMegaSystem abgerufen werden.

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

Anschließend können Sie die in IMegaSystem bereitgestellten Typen für type comparisons verwenden. Beispielsweise kann state mit mega.SessionState.Running verglichen werden, um zu bestimmen, 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-scene einrichten (WXML)

In der WXML-Datei der Seite muss die Komponente xr-easyar-mega ein child node von xr-scene sein und die id von Kamera und Tracker korrekt binden. Wenn keine id angegeben ist, verwendet die Komponente die erste in der scene gefundene Komponente xr-camera und xr-ar-tracker.

<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 des Mega-plugins 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 in WXML die von der xr-frame Element proxy verteilten events. Den event distribution mechanism von xr-frame finden Sie unter xr-frame event mechanism.

Vom plugin verteilte events:

Event-Name	Parametertyp	Beschreibung
`SessionStateChange`	SessionState	Wird sofort ausgelöst, wenn sich der Session-Status ändert. Der Parameter ist der neue Status der Session und dient zur Verarbeitung der callbacks für Beginn und Erfolg der Session-Initialisierung.
`MegaLocalizationResult`	MegaLocalizationResult	Wird ausgelöst, nachdem der rendering frame, der das Mega-localization-Ergebnis erhalten hat, fertig aktualisiert wurde. Beim Auslösen des events sind alle von EasyAR gesteuerten Transform-Änderungen in diesem rendering frame abgeschlossen.
`PostSessionUpdate`	Keine Parameter	Wird sofort ausgelöst, nachdem die Session in diesem rendering frame fertig aktualisiert wurde. Zu diesem Zeitpunkt sind alle von EasyAR gesteuerten Transform-Änderungen in diesem frame abgeschlossen.

AR Session

Erstellung, Start und Zerstörung der session finden Sie unter AR Session flow control.

Bestätigen Sie über den event callback sessionStateChange, ob die Initialisierung erfolgreich war. Wenn der Status zu Running wird, kann die ARSession als bereit betrachtet werden.

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

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

In der callback-Funktion onSessionStateChange() der xr-frame-Komponente können Sie den session-Status mit den einzelnen enums von SessionState vergleichen, um den aktuellen Status der session zu bestimmen.

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 die console nach Abschluss der Initialisierung "EasyAR Session initialized succeeded. Start running." ausgeben.

Table of Contents