Table of Contents

Quickly run the wechat mini program mega plugin sample project

This article will introduce how to quickly run the sample project for the WeChat Mini Program Mega plugin. You will learn how to:

  • Set up and configure the development environment for the sample project.
  • Run part of the sample functionality: using mega cloud-based localization.

Before you begin

Confirm the mini program entity is an enterprise entity

Important

The Mega mini program plugin only supports enterprise entity WeChat mini programs. Mini programs with individual entity types cannot use the Mega mini program plugin.

Confirm that in the Mini Program Admin Console, under Settings > Basic Information > Entity Information, it displays as Enterprise Legal Person or Individual Business.

Since Mega functionality is provided as a mini program plugin, you must have an enterprise entity WeChat mini program as the host environment.

Even if only to run the sample project we provide, you still need to configure your own WeChat Mini Program AppID to debug and preview in the developer tools.

Download the sample project

  1. Go to the development tools download page.

  2. After confirming the EasyAR Privacy Policy, click to download.

    Download Sample

  3. After downloading, unzip the .zip package locally.

Configure the sample project

  1. Log in to the WeChat DevTools.

  2. Import the sample project using WeChat DevTools.

    • After opening the DevTools, click the import button and select the locally decompressed directory.

    Import to DevTools

    Select local directory

    • Ensure the AppID matches the AppID filled in when applying for the Mega license, with Development Mode set to Mini Program, then click Create.
    Note

    AppID inconsistency will cause license verification failure.

    DevTools import options

  3. Configure Mega license and cloud service

    Open the file miniprogram/components/sample-data/easyar-settings.ts and fill in the corresponding fields based on the license and service information obtained during preparation:

    • Mega license
    /** Your mini program Mega license */
    export const EasyARLicenseKey: string = "";
    
    How to obtain a Mega WeChat Mini Program license

    Select Mega WeChat Mini Program in the EasyAR Developer Center.

    License list

    The list should contain the Mega WeChat Mini Program license you intend to use. (If no valid license exists, verify whether your account is the same as the one used to create the Mega localization library)

    Click the Mini Program Name to obtain its Mega license (click the copy icon on the right, then paste it into the easyar-settings.ts file as the value for EasyARLicenseKey). Confirm that the associated AppID exactly matches your WeChat Mini Program AppID.

    License details


    • Cloud service API key and secret
    /** Your cloud service API key and secret */
    export const EasyARAPIKey: string = "";
    export const EasyARAPISecret: string = "";
    
    How to obtain cloud service API key and secret

    Select Cloud Service API KEY in the EasyAR Developer Center.

    If you have previously created cloud service API keys and secrets, click the copy icon next to each one and paste them into the easyar-settings.ts file as values for EasyARAPIKey and EasyARAPISecret.

    Cloud service API KEY

    If you haven't created cloud service API keys and secrets before, create them as follows:

    In the EasyAR Developer Center, select Cloud Service API KEY > Create API KEY.

    Create API KEY

    Create API KEY details

    Enter an application name, select the required cloud services: Mega Block and/or Mega Landmark, then click OK.


    • Cloud service server address and AppID:
    /** Your Mega cloud localization library's server address and AppID */
    export const MegaTrackerServerAddress: string = "";
    export const MegaTrackerAppID: string = "";
    
    How to obtain server address and AppID for the Mega cloud localization library

    In the EasyAR Developer Center, select Block Cloud Localization, then choose your Mega Cloud Localization Service Group.

    Select cloud localization service group

    Select your Mega cloud localization library:

    Select cloud localization library

    Obtain cloud localization information

    Click Keys, then obtain the AppID and Server Address for the cloud localization library below (click the copy icon on the right and paste them into the easyar-settings.ts file as values for MegaTrackerAppID and MegaTrackerServerAddress).

Run the sample on a physical device

  1. Click the real-device preview button on the top bar of the Mini Program development tool to load it onto the development phone by scanning the QR code.

    Caution

    Do not directly simulate the xr-frame component with AR functionality in the development tool. Simulation run

    QR code loading

    Note

    When you run the sample project in the WeChat Developer Tools for the first time, if the plugin permission has not been obtained, the tool will usually pop up a prompt indicating that the plugin is not authorized. You can authorize it automatically through the WeChat Developer Tools or refer to the Plugin access process

  2. Click EasyAR Mega Samples to enter the AR scene of the sample project.

    Sample entry

    Note

    If you cannot enter the AR scene of the sample project, it may be because the current device does not support WeChat's VisionKit visual algorithm component. For details, refer to Device restrictions.

  3. The prompt EasyAR Session is initializing on the screen indicates that WeChat's plane detection is initializing.

    Tip

    Ensure testing in a well-lit environment, avoiding large areas of pure-color walls or floors.

    Swing the phone steadily left and right over the ground or other planes to speed up this process.

    Initialization

  4. After initialization is complete, hold the phone upright so that the camera captures a normal real-world view. When positioning is successful, the word Found appears in the debug information, and the status indicator in the lower right corner changes from white to green.

    Positioning

Next steps