Configuration objects and functions for customizing the QQ mini-program build process, including compiler settings, file extensions, and webpack copy operations.
Main configuration object for QQ mini-program build settings and options.
/**
* Build configuration object exported from lib/uni.config.js
*/
interface BuildConfig {
/** Build options and settings */
options: BuildOptions;
/** Function to generate webpack copy options */
copyWebpackOptions: (
platformOptions: PlatformOptions,
vueOptions: VueOptions
) => CopyOption[];
}
interface BuildOptions {
/** CSS custom properties for QQ mini-program */
cssVars: CSSVariables;
/** File extension mappings */
extnames: FileExtensions;
/** Filter tag name for scripts */
filterTag: string;
/** Project configuration file name */
project: string;
/** Whether subpackages are supported */
subPackages: boolean;
}
interface CSSVariables {
/** Status bar height variable */
'--status-bar-height': string;
/** Window top position variable */
'--window-top': string;
/** Window bottom position variable */
'--window-bottom': string;
/** Window left position variable */
'--window-left': string;
/** Window right position variable */
'--window-right': string;
}
interface FileExtensions {
/** Style file extension */
style: string;
/** Template file extension */
template: string;
/** Filter/script file extension */
filter: string;
}
interface CopyOption {
/** Source path or pattern */
from: string;
/** Destination path */
to: string;
/** Files to ignore during copy */
ignore?: string[];
}Default Configuration Values:
// Default build configuration
const defaultConfig = {
options: {
cssVars: {
'--status-bar-height': '25px',
'--window-top': '0px',
'--window-bottom': '0px',
'--window-left': '0px',
'--window-right': '0px'
},
extnames: {
style: '.qss', // QQ Style Sheets
template: '.qml', // QQ Markup Language
filter: '.wxs' // WeChat Script (compatible)
},
filterTag: 'wxs',
project: 'project.config.json',
subPackages: true
}
};Function that generates webpack copy configurations for QQ mini-program assets and components.
/**
* Generate webpack copy options for QQ mini-program build
* @param platformOptions - Platform-specific build options
* @param vueOptions - Vue.js build options
* @returns Array of copy configurations for webpack
*/
function copyWebpackOptions(
platformOptions: PlatformOptions,
vueOptions: VueOptions
): CopyOption[];
interface PlatformOptions {
/** Workers configuration */
workers?: string;
/** Other platform-specific options */
[key: string]: any;
}
interface VueOptions {
/** Vue.js build configuration */
[key: string]: any;
}Usage Examples:
// lib/uni.config.js usage
const config = require('@dcloudio/uni-mp-qq/lib/uni.config.js');
// Access build options
console.log('QQ style extension:', config.options.extnames.style); // '.qss'
console.log('QQ template extension:', config.options.extnames.template); // '.qml'
console.log('Subpackage support:', config.options.subPackages); // true
// Generate copy options for webpack
const copyOptions = config.copyWebpackOptions(
{ workers: 'workers' },
{ /* Vue options */ }
);
console.log('Copy configurations:', copyOptions);
// Output includes wxcomponents, custom-tab-bar, workers, etc.Compiler-specific settings for QQ mini-program directive processing.
/**
* Compiler configuration object exported from lib/uni.compiler.js
*/
interface CompilerConfig {
/** QQ-specific directive prefix */
directive: string;
/** Inherited compiler options from WeChat mini-program */
[key: string]: any;
}Default Compiler Configuration:
// lib/uni.compiler.js content
const compiler = require('@dcloudio/uni-mp-weixin/lib/uni.compiler.js');
module.exports = Object.assign({}, compiler, {
directive: 'qq:' // QQ-specific directive prefix
});Usage Examples:
// Accessing compiler configuration
const compilerConfig = require('@dcloudio/uni-mp-qq/lib/uni.compiler.js');
console.log('QQ directive prefix:', compilerConfig.directive); // 'qq:'
// Template usage with QQ directives
// <view qq:if="{{condition}}">Content</view>
// <button qq:for="{{items}}" qq:key="id">{{item.name}}</button>QQ mini-program uses specific file extensions that are configured in the build process:
// Build process handles these extensions
const extensions = {
style: '.qss', // QQ Style Sheets - equivalent to CSS
template: '.qml', // QQ Markup Language - equivalent to WXML
filter: '.wxs' // WeChat Script - JavaScript for templates
};
// Example file structure
/*
pages/
├── home/
│ ├── home.qml // Template file
│ ├── home.qss // Style file
│ ├── home.js // Logic file
│ └── home.json // Configuration file
└── components/
└── custom-button/
├── custom-button.qml
├── custom-button.qss
└── custom-button.js
*/The build process automatically copies necessary assets and components:
// Assets copied by default
const defaultCopyItems = [
'custom-tab-bar', // Custom tab bar implementation
// 'sitemap.json', // Commented out - SEO sitemap
// 'ext.json', // Commented out - Extension config
];
// Workers directory (if configured)
if (platformOptions.workers) {
copyItems.push(platformOptions.workers);
}
// Native components directory
if (fs.existsSync('wxcomponents')) {
copyItems.push({
from: 'wxcomponents',
to: 'wxcomponents',
ignore: ['**/*.vue', '**/*.css'] // Exclude auto-generated files
});
}
// uni_modules components
global.uniModules.forEach(module => {
const componentPath = `uni_modules/${module}/wxcomponents`;
if (fs.existsSync(componentPath)) {
copyItems.push({
from: componentPath,
to: `uni_modules/${module}/wxcomponents`,
ignore: ['**/*.vue', '**/*.css']
});
}
});Pre-defined CSS custom properties for QQ mini-program layout:
// CSS variables available in QQ mini-program styles
const cssVars = {
'--status-bar-height': '25px', // Default status bar height
'--window-top': '0px', // Window top offset
'--window-bottom': '0px', // Window bottom offset
'--window-left': '0px', // Window left offset
'--window-right': '0px' // Window right offset
};
// Usage in .qss files
/*
.header {
height: var(--status-bar-height);
padding-top: var(--window-top);
}
.container {
margin-left: var(--window-left);
margin-right: var(--window-right);
}
*/Extend the default copy behavior for specific project needs:
// Custom webpack.config.js integration
const qqConfig = require('@dcloudio/uni-mp-qq/lib/uni.config.js');
module.exports = {
// ... other webpack config
plugins: [
new CopyWebpackPlugin([
...qqConfig.copyWebpackOptions(platformOptions, vueOptions),
// Add custom copy operations
{
from: 'src/assets/images',
to: 'images'
},
{
from: 'src/static',
to: 'static',
ignore: ['*.md', '*.txt']
}
])
]
};The build process generates a project.config.json file for QQ mini-program development tools:
// Generated project.config.json structure
{
"description": "Project configuration for QQ mini-program",
"packOptions": {
"ignore": []
},
"setting": {
"urlCheck": false,
"es6": true,
"enhance": false,
"postcss": true,
"preloadBackgroundData": false,
"minified": true,
"newFeature": false,
"coverView": true,
"nodeModules": false,
"autoAudits": false,
"showShadowRootInWxmlPanel": true,
"scopeDataCheck": false,
"uglifyFileName": false,
"checkInvalidKey": true,
"checkSiteMap": true,
"uploadWithSourceMap": true,
"compileHotReLoad": false,
"useMultiFrameRuntime": true,
"useApiHook": true,
"babelSetting": {
"ignore": [],
"disablePlugins": [],
"outputPath": ""
},
"enableEngineNative": false,
"bundle": false,
"useIsolateContext": true,
"useCompilerModule": true,
"userConfirmedUseCompilerModuleSwitch": false
},
"compileType": "miniprogram",
"libVersion": "2.0.0",
"appid": "",
"projectname": "",
"debugOptions": {
"hidedInDevtools": []
},
"scripts": {},
"isGameTourist": false,
"simulatorType": "wechat",
"simulatorPluginLibVersion": {},
"condition": {
"search": {
"current": -1,
"list": []
},
"conversation": {
"current": -1,
"list": []
},
"game": {
"current": -1,
"list": []
},
"plugin": {
"current": -1,
"list": []
},
"gamePlugin": {
"current": -1,
"list": []
},
"miniprogram": {
"current": -1,
"list": []
}
}
}The build configuration enables subpackage functionality for code splitting:
// app.json subpackage configuration
{
"pages": [
"pages/home/home",
"pages/profile/profile"
],
"subPackages": [
{
"root": "subpackages/mall",
"name": "mall",
"pages": [
"pages/product/product",
"pages/cart/cart"
]
},
{
"root": "subpackages/user",
"name": "user",
"pages": [
"pages/settings/settings",
"pages/history/history"
]
}
],
"preloadRule": {
"pages/home/home": {
"network": "all",
"packages": ["mall"]
}
}
}qq: for QQ-specific template directivesproject.config.json for QQ developer toolswxcomponents