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

vue-integration.mddocs/

Vue Integration

Utilities for seamlessly integrating Vue.js components with Baidu Mini Program runtime. This module handles the complex mapping between Vue.js and Baidu Mini Program architectures, including data binding, event systems, lifecycle management, and component relationships.

Capabilities

Component Instance Initialization

Core functions for setting up Vue.js components in the Baidu Mini Program environment.

/**
 * Initialize Vue component instance for mini program environment
 * @param instance - Vue component instance
 * @param options - Component initialization options
 */
function initComponentInstance(instance: VueInstance, options: ComponentOptions): void;

/**
 * Initialize base Vue instance with mini program integration
 * @param instance - Vue instance
 * @param options - Base initialization options
 */
function initBaseInstance(instance: VueInstance, options: BaseInstanceOptions): void;

interface ComponentOptions {
  /** Component data */
  data?: any;
  /** Component props */
  props?: any;
  /** Component methods */
  methods?: Record<string, Function>;
  /** Computed properties */
  computed?: Record<string, any>;
  /** Watchers */
  watch?: Record<string, any>;
  /** Mini program instance */
  mpInstance?: any;
  /** Context information */
  ctx?: any;
}

interface BaseInstanceOptions {
  /** Instance type */
  type: 'app' | 'page' | 'component';
  /** Mini program instance */
  mpInstance: any;
  /** Instance data */
  data?: any;
  /** Mocks and proxies */
  mocks?: Record<string, any>;
}

Lifecycle Hook Management

Functions for managing Vue.js lifecycle hooks and mapping them to Baidu Mini Program lifecycle events.

/**
 * Find and extract Vue lifecycle hooks from component options
 * @param vueOptions - Vue component options
 * @param hooks - Optional specific hooks to find
 * @returns Object containing found hooks
 */
function findHooks(vueOptions: VueOptions, hooks?: string[]): HookMap;

/**
 * Initialize mini program hooks with Vue lifecycle hooks
 * @param mpOptions - Mini program options object
 * @param hooks - Vue hooks to integrate
 * @param excludes - Hooks to exclude from integration
 */
function initHooks(mpOptions: any, hooks: HookMap, excludes?: string[]): void;

interface VueOptions {
  /** Vue lifecycle hooks */
  created?(): void;
  mounted?(): void;
  updated?(): void;
  destroyed?(): void;
  /** Vue component methods */
  methods?: Record<string, Function>;
  /** Other Vue options */
  [key: string]: any;
}

interface HookMap {
  [hookName: string]: Function | Function[];
}

Usage Example:

import { findHooks, initHooks } from "@dcloudio/uni-mp-baidu";

// Vue component with lifecycle hooks
const vueComponent = {
  created() { console.log('Vue created'); },
  mounted() { console.log('Vue mounted'); },
  destroyed() { console.log('Vue destroyed'); },
  methods: {
    handleClick() { console.log('Clicked'); }
  }
};

// Extract hooks
const hooks = findHooks(vueComponent);
// Result: { created: [Function], mounted: [Function], destroyed: [Function] }

// Initialize in mini program component
const mpComponent = {};
initHooks(mpComponent, hooks);
// mpComponent now has attached, ready, detached hooks mapped from Vue

Component Parsing

Functions for converting Vue.js component structures to Baidu Mini Program format.

/**
 * Parse Vue app instance to mini program app format
 * @param instance - Vue app instance
 * @param parseAppOptions - Parsing configuration options
 * @returns Mini program app configuration
 */
function parseApp(instance: VueInstance, parseAppOptions: ParseAppOptions): MiniProgramApp;

/**
 * Parse Vue component to mini program component format
 * @param vueOptions - Vue component options
 * @param parseOptions - Parsing configuration
 * @returns Mini program component configuration
 */
function parseComponent(vueOptions: VueOptions, parseOptions: ParseOptions): MiniProgramComponent;

/**
 * Parse Vue page component to mini program page format
 * @param vueOptions - Vue page component options
 * @param parseOptions - Parsing configuration
 * @returns Mini program page configuration
 */
function parsePage(vueOptions: VueOptions, parseOptions: ParseOptions): MiniProgramPage;

interface ParseAppOptions {
  /** App type identifier */
  type: 'app';
  /** Additional app configuration */
  [key: string]: any;
}

interface ParseOptions {
  /** Component/page type */
  type: 'component' | 'page';
  /** Component properties */
  props?: any;
  /** Additional parsing options */
  [key: string]: any;
}

Event Handling

Core event handling system that bridges Vue.js and Baidu Mini Program event models.

/**
 * Handle mini program events and convert them for Vue components
 * @param event - Mini program event object
 * @returns Processed event suitable for Vue handlers
 */
function handleEvent(event: MiniProgramEvent): VueEvent;

/**
 * Handle component parent-child relationships and event communication
 * @param event - Link event from mini program
 */
function handleLink(event: LinkEvent): void;

interface MiniProgramEvent {
  /** Event type */
  type: string;
  /** Event target */
  target: EventTarget;
  /** Current target */
  currentTarget: EventTarget;
  /** Event timestamp */
  timeStamp: number;
  /** Event detail data */
  detail: any;
  /** Touch events data */
  touches?: Touch[];
  /** All touches data */
  changedTouches?: Touch[];
  /** Additional event data */
  [key: string]: any;
}

interface VueEvent {
  /** Normalized event type */
  type: string;
  /** Event target */
  target: any;
  /** Current target */
  currentTarget: any;
  /** Event detail */
  detail: any;
  /** Prevent default function */
  preventDefault(): void;
  /** Stop propagation function */
  stopPropagation(): void;
  /** Additional Vue event properties */
  [key: string]: any;
}

interface EventTarget {
  /** Element ID */
  id: string;
  /** Element dataset */
  dataset: Record<string, any>;
  /** Element tag name */
  tagName?: string;
  /** Additional properties */
  [key: string]: any;
}

interface LinkEvent {
  /** Link type */
  type: 'parent' | 'child';
  /** Target component */
  target: any;
  /** Detail information */
  detail: any;
}

Usage Example:

import { handleEvent } from "@dcloudio/uni-mp-baidu";

// In mini program component
Component({
  methods: {
    onTap(event) {
      // Convert mini program event to Vue-compatible event
      const vueEvent = handleEvent(event);
      
      // Now can be handled by Vue methods
      this.handleVueEvent(vueEvent);
    }
  }
});

Data Model Management

Functions for managing data binding and model synchronization between Vue.js and Baidu Mini Program.

/**
 * Set model data with v-model support and two-way binding
 * @param target - Target object to set data on
 * @param key - Property key to set
 * @param value - Value to set
 * @param modifiers - v-model modifiers (trim, number, lazy)
 */
function setModel(target: any, key: string, value: any, modifiers: ModelModifiers): void;

/**
 * Set synchronized data between parent and child components
 * @param target - Target component instance
 * @param key - Data key to synchronize
 * @param value - New value
 */
function setSync(target: any, key: string, value: any): void;

/**
 * Enhanced map function for arrays and objects with Vue reactivity
 * @param val - Value to map over (array or object)
 * @param iteratee - Iterator function
 * @returns Mapped result
 */
function map(val: any, iteratee: (item: any, key: string | number) => any): any;

interface ModelModifiers {
  /** Trim whitespace */
  trim?: boolean;
  /** Convert to number */
  number?: boolean;
  /** Lazy update (on change instead of input) */
  lazy?: boolean;
}

Usage Examples:

import { setModel, setSync, map } from "@dcloudio/uni-mp-baidu";

// v-model with modifiers
setModel(this, 'inputValue', event.detail.value, { 
  trim: true, 
  number: true 
});

// Sync data between parent and child
setSync(this, 'selectedIndex', newIndex);

// Enhanced mapping with reactivity
const mappedItems = map(this.items, (item, index) => ({
  ...item,
  displayName: `${index + 1}. ${item.name}`
}));

Component Reference Management

Functions for managing Vue.js refs and component references in mini program environment.

/**
 * Initialize Vue refs for mini program components
 * @param instance - Vue instance
 * @param mpInstance - Mini program instance
 */
function initRefs(instance: VueInstance, mpInstance: any): void;

/**
 * Initialize mock properties for Vue instance in mini program context
 * @param instance - Vue instance
 * @param mpInstance - Mini program instance
 * @param mocks - Mock configuration
 */
function initMocks(instance: VueInstance, mpInstance: any, mocks: MockConfig): void;

/**
 * Initialize Vue component IDs for tracking and reference
 * @param vueIds - Vue component ID mapping
 * @param mpInstance - Mini program instance
 */
function initVueIds(vueIds: VueIdMap, mpInstance: any): void;

interface MockConfig {
  /** Mock $refs */
  $refs?: boolean;
  /** Mock $parent */
  $parent?: boolean;
  /** Mock $children */
  $children?: boolean;
  /** Custom mocks */
  [key: string]: any;
}

interface VueIdMap {
  [componentId: string]: {
    /** Component instance */
    instance: any;
    /** Component type */
    type: string;
    /** Component context */
    context: any;
  };
}

Usage Example:

import { initRefs, initMocks, initVueIds } from "@dcloudio/uni-mp-baidu";

// Initialize component with Vue features
function initVueComponent(vueInstance, mpInstance) {
  // Setup refs system
  initRefs(vueInstance, mpInstance);
  
  // Setup mocks for Vue APIs
  initMocks(vueInstance, mpInstance, {
    $refs: true,
    $parent: true,
    $children: true
  });
  
  // Setup component ID tracking
  const vueIds = {
    'child-1': { instance: childInstance, type: 'component', context: this },
    'child-2': { instance: childInstance2, type: 'component', context: this }
  };
  initVueIds(vueIds, mpInstance);
}

Advanced Integration Patterns

Component Communication

// Parent component
const parent = createComponent({
  data() {
    return { sharedData: 'Hello' };
  },
  
  methods: {
    updateChild(data) {
      // Use setSync to update child
      setSync(this.$refs.child, 'message', data);
    },
    
    onChildEvent(event) {
      console.log('Child event:', event.detail);
    }
  }
});

// Child component
const child = createComponent({
  props: ['message'],
  
  methods: {
    notifyParent() {
      // Emit event to parent
      this.$emit('child-event', { 
        timestamp: Date.now(),
        data: this.message 
      });
    }
  }
});

Reactive Data Binding

// Component with reactive data management
const reactiveComponent = createComponent({
  data() {
    return {
      items: [],
      filter: ''
    };
  },
  
  computed: {
    filteredItems() {
      // Enhanced map with reactivity
      return map(this.items, (item) => {
        if (!this.filter || item.name.includes(this.filter)) {
          return { ...item, visible: true };
        }
        return { ...item, visible: false };
      }).filter(item => item.visible);
    }
  },
  
  methods: {
    updateFilter(event) {
      // v-model with trim modifier
      setModel(this, 'filter', event.detail.value, { 
        trim: true 
      });
    }
  }
});

Lifecycle Integration

// Component with full lifecycle integration
const lifecycleComponent = createComponent({
  created() {
    console.log('Vue created - component initializing');
  },
  
  mounted() {
    console.log('Vue mounted - component ready');
    this.initializeData();
  },
  
  updated() {
    console.log('Vue updated - component re-rendered');
  },
  
  destroyed() {
    console.log('Vue destroyed - cleanup');
    this.cleanup();
  },
  
  // Mini program specific hooks are automatically mapped
  attached() {
    console.log('Mini program attached');
  },
  
  ready() {
    console.log('Mini program ready');
  }
});