跳到主要内容

微信小程序适配器

概览​

微信小程序适配器是云开发为微信小程序提供的专用适配器。通过该适配器，开发者可以方便地在小程序中调用云函数、访问数据库、使用文件存储等功能。

安装​

npm install @cloudbase/adapter-wx_mp

快速开始​

基础使用​

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

// 使用微信小程序适配器
cloudbase.useAdapters(adapter);
const app = cloudbase.init({
    env: 'your-env-id', // 替换为您的环境ID

    // 其他配置项
    }
});

export default app;

高级配置​

如果需要使用验证码功能或自定义事件总线，可以传入配置参数：

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

// 自定义事件总线（可选）
const EventBus = {
    $emit: (event, data) => {
        // 处理事件发送逻辑
    },
    $on: (event, callback) => {
        // 处理事件监听逻辑
    },
    $once: (event, callback) => {
        // 处理一次性事件监听逻辑
    },
    $off: (event, callback) => {
        // 处理事件取消监听逻辑
    }
};
// cloudbase.useAdapters(adapter, {EventBus: uni});
cloudbase.useAdapters(adapter, { EventBus });
const app = cloudbase.init({
    env: 'your-env-id', // 替换为您的环境ID

    // 其他配置项
    }
});

export default app;
重要提示
  • adapter 必须在 cloudbase.init() 之前调用
  • 如果需要使用验证码功能，建议传入自定义的事件总线对象

配置参数说明​

options 是一个可选的配置对象，传入后可以在适配器内部的 genAdapter 中接收和使用。详细说明请参考 跨端开发指南。

验证码处理​

验证码机制说明​

在某些场景下（如登录时），云开发可能需要验证码验证。微信小程序适配器通过事件总线机制处理验证码交互。在初始化适配器时，可以传入一个事件总线对象，用于处理验证码相关事件。

适配器验证码处理逻辑​

以下是适配器内部的验证码处理逻辑：

function genAdapter(options) {
  const adapter: SDKAdapterInterface = {
    // 其他适配器配置...

    captchaOptions: {
      // 当检测到需要验证码时，自动触发此函数
      // _url 为包含验证码图片、token、state等参数的字符串
      openURIWithCallback: (_url: string) => {
        // 在适配器内部使用传入的 EventBus 对象
        const EventBus = options.EventBus;

        // 解析URL中的验证码参数
        const { captchaData, state, token } = cloudbase.parseCaptcha(_url)

        return new Promise((resolve) => {
          console.log('等待验证码输入...')

          // 发送验证码数据到前端
          EventBus.$emit('CAPTCHA_DATA_CHANGE', { 
            state,      // 验证码状态标识
            token,      // 验证码token  
            captchaData // Base64编码的验证码图片
          })

          // 监听验证码验证结果
          EventBus.$once('RESOLVE_CAPTCHA_DATA', (res: { 
            captcha_token: string
            expires_in: number 
          }) => {
            resolve(res)
          })
        })
      }
    }
  }
  
  return adapter
}

前端处理验证码​

在小程序前端页面中，可以通过事件总线监听验证码数据变化，并处理用户输入的验证码。以下是一个示例：

// 在页面中监听验证码事件
EventBus.$on('CAPTCHA_DATA_CHANGE', ({ state, token, captchaData }) => {
  console.log("收到验证码数据", { state, token, captchaData });

  // 更新本地验证码状态
  captchaState = { state, token, captchaData };

  // 在页面中显示验证码图片...

});

  //...

  // 发送验证结果
  EventBus.$emit('RESOLVE_CAPTCHA_DATA', result);

完整示例​

弹窗实现可以参考awesome-cloudbase-examples 的 uniapp 模版.