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.
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
]
});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-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;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;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 componentscontact-button - Contact interaction buttoncashier - Payment cashier componentlottie - Lottie animation playermatch-media - Media query componentComplete 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'The compiler integration works through the following process:
The compiler handles several key adaptations for Alipay Mini Program:
.axml format.acss with Alipay-specific features