WeChat Mini Program Adapter

Note

Currently, the JS SDK has integrated the WeChat Mini Program adapter by default, and no additional installation is required. If you need to expand the adapter, follow the steps below to install and use it.

Overview

The WeChat Mini Program adapter is a dedicated adapter provided by cloud development for WeChat mini programs. With this adapter, developers can easily call cloud functions, access the database, and use file storage and other features in mini programs.

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 require the use of Captcha functionality or custom event bus, configuration parameters can be passed in:

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

// Custom event bus (selectable)
const EventBus = {
    $emit: (event, data) => {
// Event handling send logic
    },
    $on: (event, callback) => {
// Event handling listen logic
    },
    $once: (event, callback) => {
// Handle one-time event monitoring logic
    },
    $off: (event, callback) => {
// Handle event cancel listening 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 Notice

• adapter must be called before cloudbase.init() -If you require the use of Captcha functionality, it is advisable to input custom event bus objects.

Configuration Parameter Description

options is an optional configuration object that can be received and used in the internal genAdapter of the adapter after input. For details, see Cross-Platform Development Guide.

Captcha Handling

Captcha Mechanism Description

In some scenarios (such as when logging in), cloud development may need verification code verification. The WeChat mini program adapter uses the EventBridge Mechanism to handle verification code interaction. During adapter initialization, an event bus object can be passed in for processing verification code related events.

Adapter Captcha Processing Logic

The following is the internal verification code processing logic:

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

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

    captchaOptions: {
If Captcha verification is detected, this function will auto-trigger
// _url is a string containing parameters such as Captcha image, token and state
      openURIWithCallback: (_url: string) => {
// Use the passed in EventBus object inside the adapter
        const EventBus = options.EventBus;

// Parse the Captcha parameter 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 status identifier
token,      // Captcha token
captchaData // Base64-encoded Captcha image
          })

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

  return adapter
}

Frontend handles Captcha

On the mini program frontend page, you can listen to Captcha data changes through EventBridge and process user input. The following is an example:

Listen to the Captcha event on the page
EventBus.$on("CAPTCHA_DATA_CHANGE", ({ state, token, captchaData }) => {
console.log("Received verification code data", { state, token, captchaData });

// Refresh the local Captcha status
  captchaState = { state, token, captchaData };

Display the Captcha image on the page
});

//...

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

Complete Example

For popup implementation, see the uniapp template in awesome-cloudbase-examples.