Compiler integration and build system that transforms uni-app code into Toutiao mini-program compatible format, including Vite plugin configuration, template processing, and platform-specific transformations.
Main compiler plugin that integrates uni-app with Vite for Toutiao mini-program compilation.
/**
* Vite plugin for Toutiao mini-program compilation
* @param options - Plugin configuration options
* @returns Vite plugin instance configured for Toutiao platform
*/
function uniMiniProgramToutiaoPlugin(options?: PluginOptions): Plugin;
interface PluginOptions {
/** Asset inlining size limit in bytes */
assetsInlineLimit?: number;
/** Vue compilation options */
vueOptions?: VueOptions;
/** Additional platform-specific options */
[key: string]: any;
}
interface VueOptions {
/** Vue template compilation options */
template?: TemplateOptions;
/** Vue script compilation options */
script?: ScriptOptions;
/** Vue style compilation options */
style?: StyleOptions;
}
interface TemplateOptions {
/** Custom template transformations */
transforms?: Transform[];
/** Template compilation mode */
mode?: 'function' | 'module';
}
interface ScriptOptions {
/** Script language */
lang?: 'js' | 'ts';
/** Additional script options */
[key: string]: any;
}
interface StyleOptions {
/** Style language */
lang?: 'css' | 'scss' | 'less';
/** Style scoping */
scoped?: boolean;
}Usage Example:
import { defineConfig } from 'vite';
import { uniMiniProgramToutiaoPlugin } from '@dcloudio/uni-mp-toutiao/compiler';
export default defineConfig({
plugins: [
uniMiniProgramToutiaoPlugin({
assetsInlineLimit: 4096,
vueOptions: {
template: {
transforms: [], // Custom transformations
}
}
})
]
});Toutiao-specific template file processing and transformations.
interface TemplateProcessing {
/** Template file extensions */
extensions: {
template: '.ttml';
style: '.ttss';
script: '.sjs';
};
/** Directive prefix for Toutiao platform */
directivePrefix: 'tt:';
/** Custom element support */
customElements: string[];
}Supported File Extensions:
.ttml (Toutiao Template Markup Language).ttss (Toutiao Template Style Sheets).sjs (Simple JavaScript for filters and computations)Directive Examples:
<!-- Conditional rendering -->
<view tt:if="{{show}}">Visible content</view>
<!-- List rendering -->
<view tt:for="{{items}}" tt:key="id">
{{item.name}}
</view>
<!-- Event binding -->
<button bindtap="handleClick">Click me</button>Specific transformations for compatibility with Toutiao platform requirements.
interface ComponentTransforms {
/** Swiper component transformation */
transformSwiper: (node: ASTNode) => ASTNode;
}
interface ASTNode {
type: string;
props?: Record<string, any>;
children?: ASTNode[];
}Swiper Transform Example:
The transformSwiper function previously converted disable-touch property to touchable property for ByteDance API compatibility. However, this transformation is no longer needed as the Toutiao swiper component no longer supports the touchable parameter.
<!-- Legacy transformation (no longer applied) -->
<!-- Input: <swiper disable-touch="{{true}}"></swiper> -->
<!-- Output: <swiper touchable="{{false}}"></swiper> -->
<!-- Current behavior: disable-touch is preserved as-is -->
<swiper disable-touch="{{true}}"></swiper>Note: As per Toutiao platform documentation, the transformation logic is retained for backward compatibility but is no longer actively applied.
Extended set of custom elements including ByteDance-specific components.
interface CustomElements {
/** Complete list of Toutiao-specific custom elements */
elements: [
'draw-ad',
'aweme-data',
'consume-card',
'pay-button',
'rate-button',
'member-button',
'confirm-receipt-button',
'live-preview',
'aweme-live-book',
'aweme-user-card',
'rtc-room',
'clue-order-form',
'shop-follow-card',
'match-media'
];
}
// Categorized by functionality
interface CustomElementCategories {
/** Advertising components */
advertising: ['draw-ad', 'aweme-data'];
/** E-commerce components */
ecommerce: [
'consume-card',
'pay-button',
'rate-button',
'member-button',
'confirm-receipt-button',
'shop-follow-card'
];
/** Live streaming and social components */
social: [
'live-preview',
'aweme-live-book',
'aweme-user-card',
'rtc-room'
];
/** Form components */
forms: ['clue-order-form'];
/** Media components */
media: ['match-media'];
}Usage Example:
<!-- E-commerce components -->
<pay-button product-id="123" bind:success="onPaymentSuccess"></pay-button>
<rate-button order-id="456" bind:rated="onRated"></rate-button>
<!-- Live streaming components -->
<live-preview stream-id="789" bind:play="onPlay"></live-preview>
<aweme-user-card user-id="abc" bind:follow="onFollow"></aweme-user-card>
<!-- Advertising -->
<draw-ad ad-id="def" bind:loaded="onAdLoaded"></draw-ad>Configuration for Toutiao-specific component behavior.
interface ComponentFeatures {
/** Slot configuration */
slot: {
fallbackContent: true;
dynamicSlotNames: true;
};
/** Class binding configuration */
class: {
array: false; // Only object-style class binding
};
/** Component directory */
componentDir: 'ttcomponents/';
/** Custom v-show handling */
customHiddenBind: true;
}Class Binding Example:
<!-- Supported: Object-style class binding -->
<view class="{{classObject}}"></view>
<!-- Not supported: Array-style class binding -->
<!-- <view class="{{[class1, class2]}}"></view> -->Platform-specific build configuration and constants.
interface BuildConfiguration {
/** Platform detection constants */
constants: {
__PLATFORM__: 'mp-toutiao';
__GLOBAL__: 'tt';
};
/** Platform title */
platformTitle: '字节跳动小程序';
/** Asset inlining limit */
assetsInlineLimit: number;
/** Component directory for mini-program components */
componentDir: 'ttcomponents/';
}Information about built distribution files and their purposes.
interface DistributionFiles {
/** API runtime module */
'dist/uni.api.esm.js': {
size: '41KB';
purpose: 'API runtime functionality';
};
/** Compiler module */
'dist/uni.compiler.js': {
size: '3.6KB';
purpose: 'Compilation functionality';
};
/** Mini-program runtime module */
'dist/uni.mp.esm.js': {
size: '36KB';
purpose: 'Mini-program runtime';
};
/** Extended UTS support */
'dist-x/': {
purpose: 'uni-app TypeScript extended builds';
};
}Support for external components and plugins.
<!-- External mini-program components -->
<ttcomponent-external bind:event="handler"></ttcomponent-external>
<!-- External plugins -->
<ext-component plugin="ext://industry/pay-button"></ext-component>Build system includes comprehensive testing support:
interface TestingFeatures {
/** Component testing */
componentTesting: {
/** v-show directive transformation testing */
vShowTransform: boolean;
/** Native component pass-through testing */
nativeComponents: boolean;
};
/** Mini-program component testing */
miniProgramTesting: {
/** External component integration */
externalComponents: boolean;
/** Plugin support testing */
pluginSupport: boolean;
/** Built-in components compilation */
builtinComponents: boolean;
};
}Extended TypeScript support for enhanced development experience:
interface UTSSupport {
/** Extended build output */
distX: string; // 'dist-x/' directory
/** Enhanced type safety */
typeChecking: boolean;
/** Advanced transformations */
advancedTransforms: boolean;
}Build-time constants available during compilation:
declare const __PLATFORM__: 'mp-toutiao';
declare const __GLOBAL__: 'tt';
// Usage in code
if (__PLATFORM__ === 'mp-toutiao') {
// Toutiao-specific code
tt.showToast({ title: 'Toutiao Platform' });
}For projects using Webpack instead of Vite:
const { uniMiniProgramToutiaoPlugin } = require('@dcloudio/uni-mp-toutiao/compiler');
module.exports = {
plugins: [
uniMiniProgramToutiaoPlugin({
assetsInlineLimit: 4096
})
],
resolve: {
extensions: ['.js', '.ts', '.vue', '.ttml', '.ttss']
}
};