or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

application-lifecycle.mdbuild-configuration.mdcomponent-system.mdevent-channels.mdindex.mdunified-api.mdutilities.md
tile.json

index.mddocs/

@dcloudio/uni-mp-qq

@dcloudio/uni-mp-qq is a QQ mini-program compiler and runtime adapter for the uni-app framework that enables developers to write cross-platform applications using Vue.js syntax. It provides seamless integration between Vue.js development patterns and QQ mini-program platform-specific APIs, handling compilation, runtime adaptation, and API proxying to ensure uni-app applications run correctly on QQ mini-programs.

Package Information

  • Package Name: @dcloudio/uni-mp-qq
  • Package Type: npm
  • Language: JavaScript/TypeScript
  • Installation: Part of uni-app framework - installed via npm install @dcloudio/uni-mp-qq

Core Imports

// Default export - unified API object
import uni from "@dcloudio/uni-mp-qq";

// Named exports - application/component creation functions
import { 
  createApp, 
  createComponent, 
  createPage, 
  createSubpackageApp, 
  createPlugin 
} from "@dcloudio/uni-mp-qq";

CommonJS:

const uni = require("@dcloudio/uni-mp-qq");
const { createApp, createComponent, createPage } = require("@dcloudio/uni-mp-qq");

Basic Usage

import { createApp, createPage, createComponent } from "@dcloudio/uni-mp-qq";

// Create uni-app application
const app = createApp({
  onLaunch() {
    console.log('App launched');
  },
  globalData: {
    userInfo: null
  }
});

// Create QQ mini-program page from Vue options
const homePage = createPage({
  data() {
    return {
      title: 'Hello QQ Mini-Program'
    };
  },
  onLoad() {
    console.log('Page loaded');
  },
  methods: {
    handleTap() {
      uni.showToast({
        title: 'Tapped!',
        icon: 'success'
      });
    }
  }
});

// Create reusable component
const customButton = createComponent({
  props: {
    text: String,
    type: {
      type: String,
      default: 'default'
    }
  },
  methods: {
    onClick() {
      this.$emit('click');
    }
  }
});

Architecture

@dcloudio/uni-mp-qq is built around several key architectural components:

  • Runtime Adapter: Translates Vue.js component lifecycle and patterns to QQ mini-program equivalents
  • API Proxy System: Provides unified uni API that wraps QQ mini-program native APIs with consistent interface
  • Component System: Converts Vue components to QQ mini-program components with proper data binding and event handling
  • Build Integration: Compiler extensions and configuration for transforming Vue.js syntax to QQ mini-program compatible code
  • Protocol Layer: Handles API argument processing, return value transformation, and platform-specific adaptations

Capabilities

Application Lifecycle Management

Core functions for creating and managing uni-app applications within QQ mini-program environment.

function createApp(options: AppOptions): void;
function createSubpackageApp(vm: VueInstance): VueInstance;
function createPlugin(vm: VueInstance): VueInstance;

interface AppOptions {
  onLaunch?: (options: LaunchOptions) => void;
  onShow?: (options: ShowOptions) => void;
  onHide?: () => void;
  onError?: (error: string) => void;
  globalData?: Record<string, any>;
  [key: string]: any;
}

Application Lifecycle

Component System

Functions for creating QQ mini-program pages and components from Vue.js options with full lifecycle support.

function createPage(options: PageOptions): void;
function createComponent(options: ComponentOptions): void;

interface PageOptions {
  data?: () => Record<string, any>;
  onLoad?: (query: Record<string, string>) => void;
  onShow?: () => void;
  onReady?: () => void;
  onHide?: () => void;
  onUnload?: () => void;
  methods?: Record<string, Function>;
  [key: string]: any;
}

interface ComponentOptions {
  props?: Record<string, any>;
  data?: () => Record<string, any>;
  methods?: Record<string, Function>;
  created?: () => void;
  mounted?: () => void;
  [key: string]: any;
}

Component System

Unified API Access

The main uni object providing unified access to QQ mini-program APIs with consistent interface across platforms.

declare const uni: UniInstance;

interface UniInstance {
  // Navigation APIs
  navigateTo(options: NavigateToOptions): Promise<any>;
  redirectTo(options: RedirectToOptions): Promise<any>;
  switchTab(options: SwitchTabOptions): Promise<any>;
  navigateBack(options?: NavigateBackOptions): Promise<any>;
  
  // UI APIs  
  showToast(options: ShowToastOptions): Promise<any>;
  showModal(options: ShowModalOptions): Promise<any>;
  showActionSheet(options: ShowActionSheetOptions): Promise<any>;
  
  // System APIs
  getSystemInfo(): Promise<SystemInfo>;
  getSystemInfoSync(): SystemInfo;
  
  // Storage APIs
  setStorage(options: SetStorageOptions): Promise<any>;
  getStorage(options: GetStorageOptions): Promise<any>;
  removeStorage(options: RemoveStorageOptions): Promise<any>;
  
  // Network APIs
  request(options: RequestOptions): Promise<RequestResult>;
  uploadFile(options: UploadFileOptions): Promise<UploadFileResult>;
  downloadFile(options: DownloadFileOptions): Promise<DownloadFileResult>;
  
  // Event system
  $on(event: string, callback: Function): void;
  $off(event: string, callback?: Function): void;
  $emit(event: string, ...args: any[]): void;
  $once(event: string, callback: Function): void;
  
  // Utility functions
  upx2px(upx: number): number;
  
  // Provider services
  getProvider(options: GetProviderOptions): Promise<ProviderResult>;
  
  // Media queries
  createMediaQueryObserver(): MediaQueryObserver;
  
  // All other QQ mini-program APIs proxied through
  [key: string]: any;
}

Unified API Access

Utility Functions

Essential utility functions for unit conversion, API interception, and event management.

function upx2px(upx: number, newDeviceWidth?: number): number;
function addInterceptor(method: string | object, option?: InterceptorOptions): void;
function removeInterceptor(method: string | object, option?: InterceptorOptions): void;

interface InterceptorOptions {
  invoke?: (args: any) => any;
  success?: (res: any) => any;
  fail?: (res: any) => any;
  complete?: (res: any) => any;
  returnValue?: (res: any) => any;
}

declare const interceptors: {
  promiseInterceptor: {
    returnValue(res: any): any;
  };
};

Utility Functions

Build Configuration

Configuration objects and functions for customizing the QQ mini-program build process.

// From lib/uni.config.js
interface BuildConfig {
  options: {
    cssVars: Record<string, string>;
    extnames: {
      style: string;
      template: string;
      filter: string;
    };
    filterTag: string;
    project: string;
    subPackages: boolean;
  };
  copyWebpackOptions(platformOptions: any, vueOptions: any): CopyOption[];
}

// From lib/uni.compiler.js  
interface CompilerConfig {
  directive: string;
  [key: string]: any;
}

Build Configuration

Event Channel System

Advanced event communication system for inter-page and inter-component messaging.

class EventChannel {
  constructor(id: number, events?: Record<string, Function>);
  emit(eventName: string, ...args: any[]): void;
  on(eventName: string, fn: Function): void;
  once(eventName: string, fn: Function): void;
  off(eventName: string, fn?: Function): void;
}

function initEventChannel(events?: Record<string, Function>, cache?: boolean): EventChannel;
function getEventChannel(id?: number): EventChannel;

Event Channel System

QQ Mini-Program Specific Features

Platform Services

The QQ mini-program platform provides several exclusive services accessible through the uni API:

  • OAuth: QQ login integration via qq provider

    • Direct access to QQ user authentication
    • Seamless login experience with existing QQ accounts
    • Integration with QQ's social graph

  • Share: QQ sharing capabilities via qq provider

    • Native sharing to QQ conversations and QZone
    • Rich media sharing with custom images and descriptions
    • Group sharing with share tickets for viral features

  • Payment: QQ Pay integration via qqpay provider

    • Direct integration with QQ's payment system
    • Support for in-app purchases and transactions
    • Secure payment processing with QQ credentials

  • Push: QQ push notifications via qq provider

    • Real-time push notification delivery
    • Template message support for user engagement
    • Subscription management for targeted messaging

File Extensions and Build System

QQ mini-program specific file types and build configuration:

  • Styles: .qss files (QQ Style Sheets)

    • QQ-specific CSS extensions and properties
    • Enhanced styling capabilities for QQ mini-program components
    • CSS variable support with platform-specific defaults

  • Templates: .qml files (QQ Markup Language)

    • QQ's template markup language for UI structure
    • Component binding and data flow patterns
    • Event handling and lifecycle integration

  • Scripts: .wxs files (compatible with WeChat Script format)

    • JavaScript-like scripting for template logic
    • Performance-optimized execution in template context
    • Cross-platform compatibility with WeChat mini-programs

  • Configuration: project.config.json

    • QQ mini-program project configuration
    • Build settings and compiler directives
    • Platform-specific options and features

Development Features

Advanced development capabilities specific to QQ mini-program platform:

  • Component Integration: Native QQ mini-program components via wxcomponents directory

    • Direct access to QQ mini-program native components
    • Seamless integration with Vue.js component system
    • Automatic component registration and lifecycle management

  • Custom Tab Bar: Support for custom tab bar implementation

    • onTabBarMidButtonTap event handling for enhanced navigation
    • Custom styling and behavior for tab bars
    • Integration with QQ's native navigation patterns

  • Subpackage Support: Application subpackage and plugin development patterns

    • Dynamic loading with loadSubPackage API
    • Preloading optimization with preloadPage and unPreloadPage
    • Plugin architecture with createPlugin for modular development

  • uni_modules: Integration with uni-app's modular ecosystem

    • Cross-platform module sharing and reuse
    • Automatic dependency management
    • Component and API extension system

Platform-Specific API Availability

QQ mini-program platform supports conditional API availability:

  • Device APIs: Hardware access (camera, sensors, vibration)
  • Network APIs: WebSocket, file transfer, and real-time communication
  • Media APIs: Video playback, live streaming, document viewing
  • System APIs: Memory monitoring, network status, analytics reporting

Use uni.canIUse(apiName) to check availability before calling platform-specific APIs.

Performance Optimizations

QQ mini-program specific performance features:

  • Event Channel System: Advanced inter-page communication
  • Interceptor System: API call modification and monitoring
  • Promise Integration: Automatic promise wrapping for async APIs
  • Unit Conversion: Optimized upx2px for responsive design

Types

interface LaunchOptions {
  path: string;
  query: Record<string, string>;
  scene: number;
  referrerInfo?: {
    appId: string;
    extraData: Record<string, any>;
  };
}

interface ShowOptions {
  path: string;
  query: Record<string, string>;
  scene: number;
  referrerInfo?: {
    appId: string;
    extraData: Record<string, any>;
  };
}

interface SystemInfo {
  brand: string;
  model: string;
  pixelRatio: number;
  screenWidth: number;
  screenHeight: number;
  windowWidth: number;
  windowHeight: number;
  statusBarHeight: number;
  language: string;
  version: string;
  system: string;
  platform: string;
  fontSizeSetting: number;
  SDKVersion: string;
  deviceId?: string;
  safeArea?: {
    left: number;
    right: number;
    top: number;
    bottom: number;
    width: number;
    height: number;
  };
  safeAreaInsets?: {
    top: number;
    right: number;
    bottom: number;
    left: number;
  };
}

interface NavigateToOptions {
  url: string;
  events?: Record<string, Function>;
  success?: (res: any) => void;
  fail?: (res: any) => void;
  complete?: (res: any) => void;
}

interface ShowToastOptions {
  title: string;
  icon?: 'success' | 'loading' | 'none';
  image?: string;
  duration?: number;
  mask?: boolean;
  success?: (res: any) => void;
  fail?: (res: any) => void;
  complete?: (res: any) => void;
}

interface GetProviderOptions {
  service: 'oauth' | 'share' | 'payment' | 'push';
  success?: (res: ProviderResult) => void;
  fail?: (res: any) => void;
  complete?: (res: any) => void;
}

interface ProviderResult {
  service: string;
  provider: string[];
  errMsg: string;
}

interface MediaQueryObserver {
  observe(descriptor: MediaQueryDescriptor, callback: (res: { matches: boolean }) => void): void;
  disconnect(): void;
}

interface MediaQueryDescriptor {
  minWidth?: number;
  maxWidth?: number;
  width?: number;
  minHeight?: number;
  maxHeight?: number;
  height?: number;
  orientation?: 'portrait' | 'landscape';
}