Table of Contents

Integrare il plug-in Mega nella tua mini-app WeChat

Questo documento ti guiderà attraverso l'integrazione del plug-in Mega nell'ambiente delle mini-app WeChat utilizzando xr-frame.

Prima di iniziare

  • Consulta la Guida allo sviluppo di xr-frame e gli esempi ufficiali di xr-frame per imparare come utilizzare il motore XR-3D fornito ufficialmente da WeChat. I contenuti includono:
    • Come introdurre il componente xr-frame nelle pagine regolari delle mini-app WeChat.
    • Modalità di comunicazione tra il componente xr-frame e i componenti tradizionali delle mini-app.
    • Come ottenere o creare un elemento dalla scena e modificarne alcune proprietà come Transform.
    • Caricamento e rilascio di risorse, ad esempio modelli GLTF.

Configurazione globale

Nel file di configurazione globale app.json nella directory principale della mini-app, aggiungi la dipendenza dal plug-in Mega per le mini-app WeChat e modifica il caricamento delle dipendenze in iniezione su richiesta.

{
  "lazyCodeLoading": "requiredComponents",
  "plugins": {
    "easyar-wechat-miniprogram": {
      "version": "2.0.2", //Utilizza l'ultima versione del plug-in
      "provider": "wx27fa3b52b5462e8f" // ID fisso del plug-in Mega per mini-app WeChat
    }
  }
}

Caricare il plug-in

Puoi importare il plug-in tramite l'interfaccia del plug-in e utilizzare direttamente alcuni dei suoi metodi per verificare che sia stato caricato correttamente.

Ad esempio, utilizza l'interfaccia requirePlugin(string path) fornita da WeChat per ottenere EasyARWechatMiniprogramPlugin e poi utilizza il suo metodo isMegaTrackerSupported per determinare se il dispositivo è supportato.

//Se sono già stati importati i file typings
//const easyarPlugin: easyar.EasyARWechatMiniprogramPlugin = requirePlugin("easyar-wechat-miniprogram") as easyar.EasyARWechatMiniprogramPlugin;
const easyarPlugin = requirePlugin("easyar-wechat-miniprogram") as any;
//Chiama isMegaTrackerSupported per determinare se il dispositivo corrente è supportato, in caso contrario mostra un avviso
if (!easyarPlugin.isMegaTrackerSupported()) {
    const message = `Il dispositivo corrente non supporta VK v1 e v2, consulta la documentazione ufficiale di WeChat: https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/visionkit/plane.html`;
    wx.showModal({
        title: "Dispositivo non supportato",
        content: message,
        showCancel: false,
    });
    console.error(message);
    return;
}

In questo esempio, si ottiene prima l'oggetto easyarPlugin (l'interfaccia esposta dal plug-in) tramite l'interfaccia requirePlugin(string path) di WeChat. Successivamente, si chiama il suo metodo isMegaTrackerSupported per determinare se l'ambiente corrente è utilizzabile. Se non lo è, viene visualizzato un avviso.

Introdurre i tipi

Si consiglia di utilizzare Typescript per lo sviluppo.

Percorso nel progetto di esempio: /typings/types/easyar/lib.easyar.d.ts.

Copialo nella stessa directory del tuo progetto e referenzialo con triple slash directive in /typings/types/index.d.ts:

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

Quando hai bisogno di utilizzare oggetti di tipo, puoi ottenere il sistema di tipi IMegaSystem del plug-in Mega per mini-app WeChat EasyAR tramite getMegaSystem.

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

Successivamente, puoi utilizzare i tipi esposti in IMegaSystem per confronti di tipo. Ad esempio, puoi confrontare state con mega.SessionState.Running per determinare se la sessione è stata inizializzata correttamente:

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

Configurazione della scena xr-frame (WXML)

Nel file WXML della pagina, il componente xr-easyar-mega deve essere un nodo figlio di xr-scene e deve correttamente associare gli id della fotocamera e del tracker. Se non si specifica un id, il componente utilizzerà il primo componente xr-camera e xr-ar-tracker trovato nella scena.

<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>
Attenzione

planeMode di ar-system deve essere impostato su 1

Registrare le callback degli eventi del plug-in Mega

<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>

Associa gli eventi distribuiti dal proxy dell'elemento xr-frame nel WXML. Il meccanismo di distribuzione degli eventi di xr-frame è descritto nella meccanica degli eventi di xr-frame

Gli eventi distribuiti dal plug-in sono:

Nome evento Tipo parametro Descrizione
SessionStateChange SessionState Attivato immediatamente quando lo stato della sessione cambia. Il parametro è il nuovo stato della sessione, utilizzato per gestire le callback di inizio e successo dell'inizializzazione della sessione.
MegaLocalizationResult MegaLocalizationResult Attivato dopo il completamento dell'aggiornamento del frame di rendering in cui è stato ricevuto il risultato della localizzazione Mega. Quando l'evento viene attivato, tutte le modifiche Transform controllate da EasyAR all'interno di quel frame di rendering sono state completate.
PostSessionUpdate Nessun parametro Attivato immediatamente dopo che la sessione ha completato l'aggiornamento in quel frame di rendering. A questo punto, tutte le modifiche Transform controllate da EasyAR all'interno di quel frame sono state completate.

AR Session

La creazione, l'avvio e la distruzione della sessione sono descritti in Controllo del flusso dello stato della sessione AR

Conferma se l'inizializzazione ha avuto successo tramite la callback dell'evento sessionStateChange. Quando lo stato diventa Running, si può considerare che l'ARSession sia pronta.

Nel WXML, registra la funzione onSessionStateChange() del componente xr-frame come callback dell'evento sessionStateChange tramite bind:sessionStateChange="onSessionStateChange":

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

Nella funzione di callback onSessionStateChange() nel componente xr-frame, confronta lo stato della sessione con le varie enumerazioni di SessionState per determinare lo stato corrente della sessione.

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);
}

Nel codice sopra, dopo l'inizializzazione, la console dovrebbe stampare "EasyAR Session initialized succeeded. Start running."

Argomenti correlati