Table of Contents

Integrar el plugin Mega en su WeChat Mini Program

Este documento le guiará para completar la integración del plugin Mega en el entorno de Mini Program con xr-frame.

Antes de empezar

  • Consulte la guía de desarrollo de xr-frame y los ejemplos oficiales de xr-frame para aprender a usar el motor XR-3D oficial de WeChat, incluido:
    • La forma de introducir el componente xr-frame en una página normal de WeChat Mini Program.
    • La comunicación entre el componente xr-frame y los componentes tradicionales de Mini Program.
    • Cómo obtener o crear un elemento desde la scene y modificar algunas propiedades, como Transform.
    • Cargar y liberar resources, por ejemplo modelos GLTF.

Configuración global

Agregue la dependencia del plugin Mega Mini Program al archivo de configuración global app.json en el directorio raíz del Mini Program y cambie la carga de dependencias a inyección bajo demanda.

{
  "lazyCodeLoading": "requiredComponents",
  "plugins": {
    "easyar-wechat-miniprogram": {
      "version": "2.0.2", //usa la version mas reciente del plugin
      "provider": "wx27fa3b52b5462e8f" // id fijo del plugin de miniprograma Mega
    }
  }
}

Cargar el plugin

Puede introducir el plugin mediante la interfaz de plugin y usar directamente algunos métodos del plugin para verificar si se ha cargado correctamente.

Por ejemplo, después de obtener EasyARWechatMiniprogramPlugin mediante la interfaz requirePlugin(string path) proporcionada por WeChat, use su método isMegaTrackerSupported para determinar si el dispositivo es compatible.

//si ya se ha incluido el archivo typings
//const easyarPlugin: easyar.EasyARWechatMiniprogramPlugin = requirePlugin("easyar-wechat-miniprogram") as easyar.EasyARWechatMiniprogramPlugin;
const easyarPlugin = requirePlugin("easyar-wechat-miniprogram") as any;
//llama a isMegaTrackerSupported para determinar si el dispositivo actual es compatible; si no lo es, muestra un aviso emergente
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;
}

En este ejemplo, primero se obtiene easyarPlugin, es decir, el objeto de interfaz expuesto por el plugin, mediante la interfaz requirePlugin(string path) proporcionada por WeChat. Después se llama al método isMegaTrackerSupported que proporciona para determinar si el entorno de ejecución actual está disponible. Si no está disponible, se muestra una ventana modal.

Introducir tipos

Se recomienda usar Typescript para el desarrollo.

Ruta en el proyecto de ejemplo: /typings/types/easyar/lib.easyar.d.ts.

Cópielo al mismo directorio del proyecto y refiéralo en /typings/types/index.d.ts con una directiva de triple barra:

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

Cuando necesite usar objetos de tipo, puede obtener el type system IMegaSystem del plugin EasyAR Mega WeChat Mini Program mediante getMegaSystem.

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

Después puede usar los tipos expuestos en IMegaSystem para comparaciones de tipo. Por ejemplo, puede comparar state con mega.SessionState.Running para determinar si la session se inicializó correctamente:

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

Configuración de scene xr-frame (WXML)

En el archivo WXML de la página, el componente xr-easyar-mega debe ser un child node de xr-scene y debe enlazar correctamente los id de la cámara y del tracker. Si no se rellena id, el componente usará el primer componente xr-camera y xr-ar-tracker que encuentre en la scene.

<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>
Precaución

El planeMode de ar-system debe establecerse en 1

Registrar callbacks de eventos del plugin 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>

En WXML, enlace los eventos distribuidos por el proxy de xr-frame Element. Para el mecanismo de distribución de eventos de xr-frame, consulte el mecanismo de eventos de xr-frame.

Los eventos distribuidos por el plugin son:

Nombre del evento Tipo de parámetro Descripción
SessionStateChange SessionState Se activa inmediatamente cuando cambia el estado de Session. El parámetro es el nuevo estado de Session y se usa para procesar los callbacks del inicio y el éxito de la inicialización de Session.
MegaLocalizationResult MegaLocalizationResult Se activa después de que el frame de rendering que recibe el resultado de Mega localization termina de actualizarse. Cuando se activa el evento, todos los cambios de Transform controlados por EasyAR en ese frame ya han terminado.
PostSessionUpdate Sin parámetros Se activa inmediatamente después de que Session termina de actualizarse en ese frame de rendering. En este momento todos los cambios de Transform controlados por EasyAR en el frame ya han terminado.

AR Session

Para la creación, el inicio y la destrucción de la session, consulte control del flujo de AR Session.

Confirme si la inicialización se realizó correctamente mediante el callback del evento sessionStateChange. Cuando el estado cambia a Running, se puede considerar que ARSession está lista.

En WXML, registre la función onSessionStateChange() del componente xr-frame como callback del evento sessionStateChange mediante bind:sessionStateChange="onSessionStateChange":

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

En la función callback onSessionStateChange() del componente xr-frame, compare el estado de session con los distintos enumeradores de SessionState para determinar el estado actual de la session.

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

En el código anterior, después de completar la inicialización, la consola debería imprimir "EasyAR Session initialized succeeded. Start running."

Temas relacionados