CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-dcloudio--uni-mp-qq

QQ mini-program compiler and runtime adapter for the uni-app framework that enables developers to write cross-platform applications using Vue.js syntax

—

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

build-configuration.mddocs/

Build Configuration

Configuration objects and functions for customizing the QQ mini-program build process, including compiler settings, file extensions, and webpack copy operations.

Capabilities

Build Configuration Object

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
  }
};

Webpack Copy Options

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 Configuration

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>

Build Process Integration

File Extension Handling

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
*/

Asset Copy Configuration

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']
    });
  }
});

CSS Variables Configuration

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);
}
*/

Advanced Build Configuration

Custom Copy Operations

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']
      }
    ])
  ]
};

Project Configuration

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": []
    }
  }
}

Subpackage Support

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"]
    }
  }
}

Build Configuration Features

QQ Mini-Program Specific Settings

  • File Extensions: QML templates, QSS styles, WXS scripts
  • Directive Prefix: qq: for QQ-specific template directives
  • CSS Variables: Pre-defined layout variables for responsive design
  • Asset Management: Automatic copying of components and resources

Development Tool Integration

  • Project Config: Generates project.config.json for QQ developer tools
  • Subpackage Support: Enables code splitting and lazy loading
  • Component Integration: Native component support via wxcomponents
  • uni_modules: Modular ecosystem component handling

Build Performance

  • Selective Copying: Ignores unnecessary files during build
  • Asset Optimization: Handles different asset types appropriately
  • Component Discovery: Automatic detection of native components
  • Module Integration: Seamless uni_modules ecosystem support

Install with Tessl CLI

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

docs

application-lifecycle.md

build-configuration.md

component-system.md

event-channels.md

index.md

unified-api.md

utilities.md

tile.json