CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-dcloudio--uni-mp-alipay

Alipay Mini Program adapter for uni-app cross-platform framework

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

compiler.mddocs/

Compiler Integration

Vite plugins and Vue compiler configuration for building uni-app applications targeting Alipay Mini Program platform. This module provides the build-time transformations and configurations necessary to compile Vue.js components into Alipay-compatible mini program code.

Capabilities

Main Plugin Export

The primary export is an array of Vite plugins that configure the build process for Alipay Mini Program.

/**
 * Array of Vite plugins for Alipay Mini Program compilation
 * Includes the main Alipay plugin plus base mini program plugins
 */
declare const uniMpAlipayPlugin: Plugin[];

Usage Example:

import uniMpAlipayPlugin from '@dcloudio/uni-mp-alipay';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    ...uniMpAlipayPlugin
  ]
});

Compiler Configuration

Core compiler options that define how Vue templates and components are transformed for Alipay Mini Program.

/**
 * Mini program compiler configuration for Alipay platform
 */
interface MiniProgramCompilerOptions {
  /** Event handling configuration */
  event: EventOptions;
  /** CSS class binding configuration */
  class: { array: boolean };
  /** Slot system configuration */
  slot: SlotOptions;
  /** Template directive prefix */
  directive: string;
  /** Component handling configuration */
  component: ComponentOptions;
  /** Template filter configuration */
  filter: FilterOptions;
}

interface SlotOptions {
  $slots: boolean;
  fallbackContent: boolean;
  dynamicSlotNames: boolean;
}

interface ComponentOptions {
  dir: string;
  getPropertySync: boolean;
}

interface FilterOptions {
  lang: string;
  setStyle: boolean;
}

Vue Compiler Options

Vue-specific compiler configuration with AST transformations.

/**
 * Vue compiler options with node transformations
 */
interface CompilerOptions {
  /** Array of Vue AST node transformation functions */
  nodeTransforms: NodeTransform[];
}

type NodeTransform = (node: RootNode | TemplateChildNode, context: TransformContext) => void;

Transform Functions

AST transformation functions that adapt Vue templates for Alipay Mini Program compatibility.

/**
 * Transforms Vue ref attributes for Alipay Mini Program compatibility
 * Converts Vue ref syntax to Alipay-compatible data attributes
 */
function transformRef(node: RootNode | TemplateChildNode, context: TransformContext): void;

/**
 * Transforms open-type components for Alipay platform
 * Handles button and other components with open-type attributes
 */
function transformOpenType(node: RootNode | TemplateChildNode, context: TransformContext): void;

Custom Elements

List of Alipay-specific custom elements and native components.

/**
 * Array of custom element names supported by Alipay Mini Program
 * Includes platform-specific components and UI elements
 */
declare const customElements: string[];

The custom elements include Alipay-specific components such as:

  • lifestyle - Lifestyle service components
  • contact-button - Contact interaction button
  • cashier - Payment cashier component
  • lottie - Lottie animation player
  • match-media - Media query component
  • And 15+ more platform-specific elements

Plugin Options

Complete configuration object for the Vite plugin system.

/**
 * Complete plugin configuration for Alipay Mini Program build
 */
interface UniMiniProgramPluginOptions {
  /** CDN configuration level */
  cdn: number;
  /** Vite-specific options */
  vite: VitePluginOptions;
  /** Global object name (always 'my' for Alipay) */
  global: string;
  /** JSON configuration mappings */
  json: JsonConfigOptions;
  /** App-level configuration */
  app: AppConfigOptions;
  /** Project configuration */
  project: ProjectConfigOptions;
  /** Template processing options */
  template: TemplateConfigOptions;
  /** Style processing options */
  style: StyleConfigOptions;
}

interface VitePluginOptions {
  /** Module injection configuration */
  inject: Record<string, [string, string]>;
  /** Module alias configuration */
  alias: Record<string, string>;
  /** File copy options */
  copyOptions: CopyOptions;
}

interface CopyOptions {
  /** Asset directories to copy */
  assets: string[];
  /** Copy targets configuration */
  targets: CopyTarget[];
}

interface JsonConfigOptions {
  /** Window options mapping from uni-app to Alipay */
  windowOptionsMap: Record<string, string>;
  /** Tab bar options mapping */
  tabBarOptionsMap: Record<string, string>;
  /** Tab bar item options mapping */
  tabBarItemOptionsMap: Record<string, string>;
}

interface AppConfigOptions {
  /** Dark mode support */
  darkmode: boolean;
  /** Subpackage support */
  subpackages: boolean;
  /** Plugin support */
  plugins: boolean;
  /** Using components flag */
  usingComponents: boolean;
  /** App JSON normalization function */
  normalize: (appJson: any) => any;
}

interface ProjectConfigOptions {
  /** Project config filename */
  filename: string;
  /** Config file candidates */
  config: string[];
  /** Default project configuration */
  source: any;
  /** Project JSON normalization function */
  normalize: (projectJson: any) => any;
}

interface TemplateConfigOptions extends MiniProgramCompilerOptions {
  /** Custom elements list */
  customElements: string[];
  /** Template file extension */
  extname: string;
  /** Vue compiler options */
  compilerOptions: CompilerOptions;
}

interface StyleConfigOptions {
  /** Style file extension */
  extname: string;
}

Usage Example:

import { options } from '@dcloudio/uni-mp-alipay/src/compiler/options';

// Access specific configuration
console.log(options.global); // 'my'
console.log(options.template.extname); // '.axml'
console.log(options.style.extname); // '.acss'

Build Process Integration

The compiler integration works through the following process:

  1. Plugin Registration: Vite loads the plugin array during build initialization
  2. Template Processing: Vue templates are transformed using the node transforms
  3. Asset Copying: Static assets and configuration files are copied to output
  4. Code Generation: JavaScript code is generated with Alipay-specific adaptations
  5. Bundle Output: Final bundles are created in CommonJS format for mini program runtime

Platform-Specific Adaptations

The compiler handles several key adaptations for Alipay Mini Program:

  • Template Syntax: Converts Vue template syntax to .axml format
  • CSS Processing: Transforms CSS to .acss with Alipay-specific features
  • Component Registration: Maps Vue components to Alipay mini program components
  • Event Handling: Adapts Vue event system to Alipay's event model
  • Ref Handling: Converts Vue refs to Alipay-compatible reference system

Install with Tessl CLI

npx tessl i tessl/npm-dcloudio--uni-mp-alipay

docs

api.md

compiler.md

index.md

runtime.md

tile.json