or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

app-component-creation.mdautomation.mdbuild-configuration.mdindex.mdnavigation-apis.mdnetwork-apis.mdruntime-api.mdsystem-apis.mdvue-integration.md
tile.json

index.mddocs/

uni-app Baidu Mini Program Support

This package provides complete Baidu Mini Program runtime and compiler support for the uni-app cross-platform development framework. It enables Vue.js applications to be compiled and run on the Baidu Smart Mini Program platform while maintaining uni-app's unified development experience and API compatibility.

Package Information

  • Package Name: @dcloudio/uni-mp-baidu
  • Package Type: npm
  • Language: JavaScript/TypeScript
  • Installation: npm install @dcloudio/uni-mp-baidu

Core Imports

// Main uni API (default export)
import uni from "@dcloudio/uni-mp-baidu";

// Or import specific functions
import { createApp, createPage, createComponent } from "@dcloudio/uni-mp-baidu";

For CommonJS:

// Main uni API
const uni = require("@dcloudio/uni-mp-baidu");

// Or destructure specific functions
const { createApp, createPage, createComponent } = require("@dcloudio/uni-mp-baidu");

Basic Usage

import uni, { createApp, createPage } from "@dcloudio/uni-mp-baidu";

// Create a Baidu Mini Program app from Vue app
const app = createApp({
  onLaunch() {
    console.log('App launched');
  }
});

// Create a page from Vue component options
const page = createPage({
  data() {
    return { message: 'Hello Baidu Mini Program' };
  },
  onLoad() {
    console.log('Page loaded');
  }
});

Architecture

The package is structured around several key components:

  • Runtime API: Core uni-app API implementation with Baidu-specific adaptations
  • Component System: Vue.js component to Baidu mini program component conversion
  • Event System: Event handling bridge between Vue.js and Baidu mini program events
  • API Translation: Automatic translation between uni-app APIs and native Baidu swan APIs
  • Build Integration: Webpack configuration and compilation support
  • Automation Support: Built-in testing and debugging capabilities

Capabilities

Runtime API

Core uni-app API implementation providing access to all platform capabilities through a unified interface. The main uni object provides cross-platform APIs with Baidu-specific adaptations.

// Main uni object (default export)
export default uni: {
  // Unit conversion
  upx2px(number: number, newDeviceWidth?: number): number;
  
  // Interceptor system
  addInterceptor(method: string, interceptor: Interceptor): void;
  removeInterceptor(method: string, interceptor?: Interceptor): void;
  
  // Event system
  $on(event: string, handler: Function): void;
  $off(event: string, handler?: Function): void;
  $once(event: string, handler: Function): void;
  $emit(event: string, ...args: any[]): void;
  
  // Provider and payment APIs
  getProvider(options: ProviderOptions): Promise<ProviderResult>;
  requestPayment(params: PaymentParams): Promise<any>;
  
  // Media query observer
  createMediaQueryObserver(): MediaQueryObserver;
  
  // Navigation APIs
  navigateTo(options: NavigateToOptions): Promise<any>;
  redirectTo(options: RedirectToOptions): Promise<any>;
  navigateBack(options?: NavigateBackOptions): Promise<any>;
  navigateToMiniProgram(options: NavigateToMiniProgramOptions): Promise<any>;
  navigateBackMiniProgram(options?: NavigateBackMiniProgramOptions): Promise<any>;
  
  // System APIs
  getSystemInfo(options?: SystemInfoOptions): Promise<SystemInfo>;
  getSystemInfoSync(): SystemInfo;
  getAccountInfoSync(): AccountInfo;
  
  // Network APIs
  request(options: RequestOptions): Promise<RequestResult>;
  connectSocket(options: ConnectSocketOptions): SocketTask;
  
  // Media APIs
  previewImage(options: PreviewImageOptions): Promise<any>;
  createCanvasContext(canvasId: string, component?: any): CanvasContext;
  getRecorderManager(): RecorderManager;
  getBackgroundAudioManager(): BackgroundAudioManager;
  
  // Scanner API
  scanCode(options?: ScanCodeOptions): Promise<ScanCodeResult>;
  
  // Share API
  showShareMenu(options?: ShowShareMenuOptions): Promise<any>;
};

Runtime API

Application and Component Creation

Functions for converting Vue.js applications and components into Baidu Mini Program format with full lifecycle support.

function createApp(instance: VueAppInstance): BaiduMiniProgramApp;
function createPage(vuePageOptions: VuePageOptions): BaiduMiniProgramPage;
function createComponent(vueOptions: VueComponentOptions): BaiduMiniProgramComponent;
function createSubpackageApp(instance: VueAppInstance): BaiduMiniProgramSubpackageApp;
function createPlugin(instance: VueAppInstance): BaiduMiniProgramPlugin;

App and Component Creation

Navigation APIs

Page navigation and routing functionality for navigating between pages and mini-programs with platform-specific adaptations for Baidu Smart Programs.

function navigateTo(options: NavigateToOptions): Promise<any>;
function redirectTo(options: RedirectToOptions): Promise<any>;
function navigateBack(options?: NavigateBackOptions): Promise<any>;
function navigateToMiniProgram(options: NavigateToMiniProgramOptions): Promise<any>;
function navigateBackMiniProgram(options?: NavigateBackMiniProgramOptions): Promise<any>;

Navigation APIs

System APIs

Device and system information APIs providing access to device capabilities, account information, and system configuration.

function getSystemInfo(options?: SystemInfoOptions): Promise<SystemInfo>;
function getSystemInfoSync(): SystemInfo;
function getAccountInfoSync(): AccountInfo;

System APIs

Network APIs

Network communication APIs for HTTP requests and WebSocket connections with Baidu-specific protocol adaptations.

function request(options: RequestOptions): Promise<RequestResult>;
function connectSocket(options: ConnectSocketOptions): SocketTask;

Network APIs

Vue Integration

Utilities for seamlessly integrating Vue.js components with Baidu Mini Program runtime, handling data binding, event systems, and lifecycle management.

function initComponentInstance(instance: VueInstance, options: ComponentOptions): void;
function handleEvent(event: BaiduMiniProgramEvent): void;
function setModel(target: any, key: string, value: any, modifiers: ModelModifiers): void;

Vue Integration

Build and Compilation

Configuration and compilation utilities for transforming Vue.js applications into Baidu Mini Program format during the build process.

const options: {
  cssVars: CSSVariables;
  extnames: FileExtensions;
  filterTag: string;
  project: string;
  subPackages: boolean;
};

function copyWebpackOptions(platformOptions: any, vueOptions: any): WebpackCopyOptions;

Build Configuration

Automation and Testing

Built-in automation capabilities for testing and debugging Baidu Mini Program applications with DevTools integration. Available globally via the swan object in the Baidu Mini Program runtime environment.

// Available globally as swan.$$initRuntimeAutomator
function $$initRuntimeAutomator(options?: AutomatorOptions): void;

interface AutomatorAPI {
  getData(): any;
  setData(data: any): void;
  callMethod(method: string, args: any[]): any;
}

Automation

Types

interface VueAppInstance {
  onLaunch?(): void;
  onShow?(options: any): void;
  onHide?(): void;
  onError?(error: string): void;
  onPageNotFound?(options: any): void;
  onUnhandledRejection?(options: any): void;
  onThemeChange?(options: any): void;
  globalData?: any;
}

interface VuePageOptions {
  data?(): any;
  onLoad?(options: any): void;
  onShow?(): void;
  onReady?(): void;
  onHide?(): void;
  onUnload?(): void;
  onPullDownRefresh?(): void;
  onReachBottom?(): void;
  onShareAppMessage?(options: any): any;
  onPageScroll?(options: any): void;
  onResize?(options: any): void;
  onTabItemTap?(options: any): void;
  [key: string]: any;
}

interface VueComponentOptions {
  props?: any;
  data?(): any;
  computed?: any;
  methods?: any;
  watch?: any;
  created?(): void;
  mounted?(): void;
  updated?(): void;
  destroyed?(): void;
  [key: string]: any;
}

interface PaymentParams {
  orderInfo: string;
  success?(result: any): void;
  fail?(error: any): void;
  complete?(): void;
}

interface MediaQueryObserver {
  observe(options: MediaQueryOptions, callback: (result: MediaQueryResult) => void): void;
  disconnect(): void;
}

interface MediaQueryOptions {
  minWidth?: number;
  maxWidth?: number;
  width?: number;
  minHeight?: number;
  maxHeight?: number;
  height?: number;
  orientation?: 'landscape' | 'portrait';
}

interface MediaQueryResult {
  matches: boolean;
}

interface NavigateToOptions {
  url: string;
  success?(result: any): void;
  fail?(error: any): void;
  complete?(): void;
  events?: any;
}

interface RedirectToOptions {
  url: string;
  success?(result: any): void;
  fail?(error: any): void;
  complete?(): void;
}

interface NavigateBackOptions {
  delta?: number;
  success?(result: any): void;
  fail?(error: any): void;
  complete?(): void;
}

interface NavigateToMiniProgramOptions {
  appId: string;
  path?: string;
  extraData?: any;
  envVersion?: 'develop' | 'trial' | 'release';
  success?(result: any): void;
  fail?(error: any): void;
  complete?(): void;
}

interface NavigateBackMiniProgramOptions {
  extraData?: any;
  success?(result: any): void;
  fail?(error: any): void;
  complete?(): void;
}

interface SystemInfoOptions {
  success?(result: SystemInfo): void;
  fail?(error: any): void;
  complete?(): void;
}

interface SystemInfo {
  brand: string;
  model: string;
  pixelRatio: number;
  screenWidth: number;
  screenHeight: number;
  windowWidth: number;
  windowHeight: number;
  statusBarHeight: number;
  language: string;
  version: string;
  system: string;
  platform: string;
  fontSizeSetting: number;
  SDKVersion: string;
  safeArea: SafeArea;
  safeAreaInsets: SafeAreaInsets;
  [key: string]: any;
}

interface SafeArea {
  left: number;
  right: number;
  top: number;
  bottom: number;
  width: number;
  height: number;
}

interface SafeAreaInsets {
  top: number;
  left: number;
  right: number;
  bottom: number;
}

interface AccountInfo {
  miniProgram: {
    appId: string;
  };
  plugin?: {
    appId: string;
    version: string;
  };
}

interface RequestOptions {
  url: string;
  data?: any;
  header?: any;
  method?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'CONNECT' | 'HEAD' | 'OPTIONS' | 'TRACE';
  timeout?: number;
  dataType?: 'json' | 'text' | 'base64';
  responseType?: 'text' | 'arraybuffer';
  success?(result: RequestResult): void;
  fail?(error: any): void;
  complete?(): void;
}

interface RequestResult {
  data: any;
  statusCode: number;
  header: any;
  cookies?: string[];
}

interface ConnectSocketOptions {
  url: string;
  header?: any;
  protocols?: string[];
  success?(result: any): void;
  fail?(error: any): void;
  complete?(): void;
}

interface SocketTask {
  send(options: any): void;
  close(options?: any): void;
  onOpen(callback: (result: any) => void): void;
  onClose(callback: (result: any) => void): void;
  onError(callback: (error: any) => void): void;
  onMessage(callback: (result: any) => void): void;
}

interface PreviewImageOptions {
  urls: string[];
  current?: string;
  success?(result: any): void;
  fail?(error: any): void;
  complete?(): void;
}

interface CanvasContext {
  measureText(text: string, callback?: (result: { width: number }) => void): { width: number } | void;
  [key: string]: any;
}

interface RecorderManager {
  start(options?: any): void;
  pause(): void;
  resume(): void;
  stop(): void;
  onStart(callback: () => void): void;
  onPause(callback: () => void): void;
  onStop(callback: (result: any) => void): void;
  onFrameRecorded?: (callback: (result: any) => void) => void;
  onError(callback: (error: any) => void): void;
}

interface BackgroundAudioManager {
  duration: number;
  currentTime: number;
  paused: boolean;
  src: string;
  startTime: number;
  title: string;
  epname: string;
  singer: string;
  coverImgUrl: string;
  webUrl: string;
  protocol: string;
  play(): void;
  pause(): void;
  stop(): void;
  seek(position: number): void;
  onCanplay(callback: () => void): void;
  onPlay(callback: () => void): void;
  onPause(callback: () => void): void;
  onStop(callback: () => void): void;
  onEnded(callback: () => void): void;
  onTimeUpdate(callback: () => void): void;
  onPrev?: (callback: () => void) => void;
  onNext?: (callback: () => void) => void;
  onError(callback: (error: any) => void): void;
}

interface ScanCodeOptions {
  success?(result: ScanCodeResult): void;
  fail?(error: any): void;
  complete?(): void;
}

interface ScanCodeResult {
  result: string;
  scanType: string;
  charSet: string;
  path: string;
}

interface ShowShareMenuOptions {
  withShareTicket?: boolean;
  success?(result: any): void;
  fail?(error: any): void;
  complete?(): void;
}

interface ProviderOptions {
  service: 'oauth' | 'share' | 'payment' | 'push';
  success?(result: ProviderResult): void;
  fail?(error: any): void;
}

interface ProviderResult {
  service: string;
  provider: string[];
}

interface Interceptor {
  invoke?(options: any): any;
  success?(result: any): any;
  fail?(error: any): any;
  complete?(): void;
  returnValue?(result: any): any;
}