WeChat Mini Program Adapter

Overview

The WeChat Mini Program Adapter is a dedicated adapter provided by CloudBase for WeChat Mini Programs. Through this adapter, developers can conveniently invoke cloud functions, access databases, utilize file storage, and other features within the mini program.

Installation

npm install @cloudbase/adapter-wx_mp

Quick Start

Basic Usage

import cloudbase from '@cloudbase/js-sdk';
import adapter from '@cloudbase/adapter-wx_mp';

// Use the WeChat Mini Program Adapter
cloudbase.useAdapters(adapter);
const app = cloudbase.init({
    env: 'your-env-id', // Replace with your environment ID

    // Other configuration items
    }
});

export default app;

Advanced Configuration

If you need to use the CAPTCHA functionality or a custom event bus, you can pass configuration parameters:

import cloudbase from '@cloudbase/js-sdk';
import adapter from '@cloudbase/adapter-wx_mp';

// Custom event bus (Optional)
const EventBus = {
    $emit: (event, data) => {
        // Handle event sending logic
    },
    $on: (event, callback) => {
        // Handle event listening logic
    },
    $once: (event, callback) => {
        // Handle one-time event listening logic
    },
    $off: (event, callback) => {
        // Handle event unsubscription logic
    }
};
// cloudbase.useAdapters(adapter, {EventBus: uni});
cloudbase.useAdapters(adapter, { EventBus });
const app = cloudbase.init({
    env: 'your-env-id', // Replace with your environment ID

    // Other configuration items
    }
});

export default app;

Important

• adapter must be called before cloudbase.init().
• If you need to use the CAPTCHA functionality, it is recommended to pass a custom event bus object

Configuration Parameters Description

options is an optional configuration object. After being passed, it can be received and used within the adapter's genAdapter. For detailed instructions, please refer to the Cross-Platform Development Guide.

Captcha Handling

CAPTCHA Mechanism Description

In certain scenarios (such as during login), CloudBase may require CAPTCHA verification. The WeChat Mini Program Adapter handles CAPTCHA interactions through an event bus mechanism. When initializing the adapter, you can pass in an event bus object to handle CAPTCHA-related events.

Adapter CAPTCHA Handling Logic

The following describes the CAPTCHA handling logic inside the adapter:

function genAdapter(options) {
  const adapter: SDKAdapterInterface = {
    // Other adapter configurations...

    captchaOptions: {
      // When it is detected that a captcha is required, this function is automatically triggered.
      // _url is a string containing parameters such as the captcha image, token, state, etc.
      openURIWithCallback: (_url: string) => {
        // Use the passed-in EventBus object inside the adapter
        const EventBus = options.EventBus;

        // Parse the captcha parameters in the URL
        const { captchaData, state, token } = cloudbase.parseCaptcha(_url)

        return new Promise((resolve) => {
          console.log('Waiting for captcha input...')

          // Send captcha data to the frontend
          EventBus.$emit('CAPTCHA_DATA_CHANGE', { 
            state,      // Captcha state identifier
            token,      // captcha token  
            captchaData // Base64-encoded captcha image
          })

          // Listen for the captcha verification result
          EventBus.$once('RESOLVE_CAPTCHA_DATA', (res: { 
            captcha_token: string
            expires_in: number 
          }) => {
            resolve(res)
          })
        })
      }
    }
  }
  
  return adapter
}

Frontend Captcha Handling

In the frontend page of the mini program, you can listen for changes in captcha data through the event bus and process the user-entered captcha. Here is an example:

// Listen for captcha events in the page
EventBus.$on('CAPTCHA_DATA_CHANGE', ({ state, token, captchaData }) => {
  console.log("Received captcha data", { state, token, captchaData });

  // Update the local captcha state
  captchaState = { state, token, captchaData };

  // Display the captcha image in the page...

});

  //...

  // Send verification result
  EventBus.$emit('RESOLVE_CAPTCHA_DATA', result);

Complete Sample

For pop-up implementation, please refer to the uniapp template in awesome-cloudbase-examples.