Table of Contents

Integre o plug-in Mega em seu miniprograma WeChat

Este documento orienta você durante a integração do plug-in Mega no ambiente de miniprogramas usando o xr-frame.

Antes de começar

  • Consulte o Guia de desenvolvimento do xr-frame e o Exemplo oficial do xr-frame para aprender como usar o mecanismo XR-3D fornecido oficialmente pelo WeChat, incluindo:
    • Como introduzir o componente xr-frame em páginas regulares de miniprogramas WeChat.
    • Como o componente xr-frame se comunica com componentes tradicionais de miniprogramas.
    • Como obter ou criar um elemento de uma cena e modificar propriedades como Transform.
    • Carregar e liberar recursos, como modelos GLTF.

Configuração global

Adicione a dependência do plug-in Mega de miniprograma no arquivo de configuração global app.json no diretório raiz do miniprograma e altere o carregamento de dependência para injeção sob demanda.

{
  "lazyCodeLoading": "requiredComponents",
  "plugins": {
    "easyar-wechat-miniprogram": {
      "version": "2.0.2", //Use a versão mais recente do plug-in
      "provider": "wx27fa3b52b5462e8f" // ID fixo do plug-in Mega de miniprograma
    }
  }
}

Carregar o plug-in

Você pode introduzir o plug-in através da interface do plug-in e usar diretamente alguns de seus métodos para verificar se o plug-in foi carregado corretamente.

Por exemplo, usando a interface requirePlugin(string path) fornecida pelo WeChat para obter EasyARWechatMiniprogramPlugin e, em seguida, usar seu método isMegaTrackerSupported para verificar se o dispositivo é compatível.

//Se já introduziu o arquivo typings
//const easyarPlugin: easyar.EasyARWechatMiniprogramPlugin = requirePlugin("easyar-wechat-miniprogram") as easyar.EasyARWechatMiniprogramPlugin;
const easyarPlugin = requirePlugin("easyar-wechat-miniprogram") as any;
//Chame isMegaTrackerSupported para verificar se o dispositivo atual é compatível; se não for, exiba um alerta
if (!easyarPlugin.isMegaTrackerSupported()) {
    const message = `O dispositivo atual não suporta VK v1 e v2. Consulte a documentação oficial do WeChat: https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/visionkit/plane.html`;
    wx.showModal({
        title: "Dispositivo não suportado",
        content: message,
        showCancel: false,
    });
    console.error(message);
    return;
}

Neste exemplo, primeiro obtemos easyarPlugin, o objeto de interface exposto pelo plug-in, através da interface requirePlugin(string path) fornecida pelo WeChat. Em seguida, chamamos seu método isMegaTrackerSupported para verificar a disponibilidade no ambiente de execução atual. Se não estiver disponível, exibimos um alerta.

Introduzir tipos

Recomenda-se usar Typescript para desenvolvimento.

Caminho no projeto de exemplo: /typings/types/easyar/lib.easyar.d.ts.

Copie para o mesmo diretório do projeto e referencie em /typings/types/index.d.ts usando diretivas de três barras:

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

Quando precisar usar objetos de tipo, você pode obter o sistema de tipos IMegaSystem do plug-in EasyAR Mega para miniprogramas WeChat através de getMegaSystem.

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

Em seguida, você pode usar os tipos expostos em IMegaSystem para comparação de tipos. Por exemplo, pode comparar state com mega.SessionState.Running para verificar se a sessão foi inicializada com sucesso:

const newState: easyar.SessionState = event.detail.value;
if (newState === mega.SessionState.Running) {
    console.log("Sessão EasyAR inicializada com sucesso. Iniciando execução.");
}

Configuração da cena xr-frame (WXML)

No arquivo WXML da página, o componente xr-easyar-mega deve ser um nó filho de xr-scene e vincular corretamente os id da câmera e do rastreador. Se id não for preenchido, o componente usará o primeiro componente xr-camera e xr-ar-tracker encontrado na cena.

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

planeMode de ar-system deve ser definido como 1

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

No WXML, vincule os eventos distribuídos pelo proxy do Element xr-frame. O mecanismo de distribuição de eventos do xr-frame pode ser consultado em Mecanismo de eventos do xr-frame

Os eventos distribuídos pelo plug-in são:

Nome do evento Tipo de parâmetro Descrição
SessionStateChange SessionState Disparado imediatamente quando o estado da sessão muda. O parâmetro é o novo estado da sessão, usado para processar callbacks de início e sucesso da inicialização da sessão.
MegaLocalizationResult MegaLocalizationResult Disparado após a conclusão da atualização do quadro de renderização que recebeu o resultado de localização do Mega. Quando o evento é disparado, todas as alterações de Transform controladas pelo EasyAR nesse quadro de renderização foram concluídas.
PostSessionUpdate Sem parâmetros Disparado imediatamente após a sessão ser atualizada nesse quadro de renderização. Neste momento, todas as alterações de Transform controladas pelo EasyAR nesse quadro foram concluídas.

Sessão AR

A criação, inicialização e destruição da sessão podem ser encontradas em Controle de fluxo da sessão AR

Use o callback do evento sessionStateChange para confirmar se a inicialização foi bem-sucedida. Quando o estado muda para Running, significa que o ARSession está pronto.

No WXML, registre a função onSessionStateChange() do componente xr-frame como callback do evento sessionStateChange através de bind:sessionStateChange="onSessionStateChange":

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

Na função de callback onSessionStateChange() do componente xr-frame, compare o estado da sessão com as várias enumerações de SessionState para determinar o estado atual da sessão.

onSessionStateChange(event) {
    const newState: easyar.SessionState = event.detail.value;
    console.log(`O estado da sessão EasyAR mudou para: ${mega.SessionState[newState]}`);
    let displayInfoStr: string = "";
    if (newState === mega.SessionState.None) {
        displayInfoStr = "A sessão EasyAR está inativa.";
    } else if (newState === mega.SessionState.Initializing) {
        displayInfoStr = "A sessão EasyAR está sendo inicializada...";
    } else if (newState === mega.SessionState.Running) {
        displayInfoStr = "Sessão EasyAR inicializada com sucesso. Iniciando execução.";
    }
    this.triggerEvent("sessionDisplayInfoEvent", displayInfoStr);
}

No código acima, após a inicialização bem-sucedida, o console deve exibir "Sessão EasyAR inicializada com sucesso. Iniciando execução."

Tópicos relacionados