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

application-lifecycle.mddocs/

Application Lifecycle Management

Core functions for creating and managing uni-app applications within the QQ mini-program environment, including main applications, subpackages, and plugins.

Capabilities

Create Application

Creates and initializes a uni-app application instance for the QQ mini-program platform.

/**
 * Creates a uni-app application instance with QQ mini-program lifecycle integration
 * @param options - Application configuration options including lifecycle hooks and global data
 */
function createApp(options: AppOptions): void;

interface AppOptions {
  /** Called when the application launches */
  onLaunch?: (options: LaunchOptions) => void;
  /** Called when the application becomes visible */
  onShow?: (options: ShowOptions) => void;
  /** Called when the application becomes hidden */
  onHide?: () => void;
  /** Called when an unhandled error occurs */
  onError?: (error: string) => void;
  /** Called when a page is not found */
  onPageNotFound?: (options: PageNotFoundOptions) => void;
  /** Called when system theme changes */
  onThemeChange?: (options: ThemeChangeOptions) => void;
  /** Called when there's an unhandled promise rejection */
  onUnhandledRejection?: (options: UnhandledRejectionOptions) => void;
  /** Global data accessible across all pages and components */
  globalData?: Record<string, any>;
  /** Custom methods and properties */
  [key: string]: any;
}

interface LaunchOptions {
  /** Launch path */
  path: string;
  /** Launch query parameters */
  query: Record<string, string>;
  /** Launch scene */
  scene: number;
  /** Share ticket for group sharing */
  shareTicket?: string;
  /** Referrer information */
  referrerInfo?: {
    appId: string;
    extraData: Record<string, any>;
  };
}

interface ShowOptions {
  /** Show path */
  path: string;
  /** Show query parameters */
  query: Record<string, string>;
  /** Show scene */
  scene: number;
  /** Share ticket for group sharing */
  shareTicket?: string;
  /** Referrer information */
  referrerInfo?: {
    appId: string;
    extraData: Record<string, any>;
  };
}

Usage Example:

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

createApp({
  onLaunch(options) {
    console.log('App launched with options:', options);
    // Initialize app-level data
    this.globalData.userInfo = null;
    this.globalData.systemInfo = null;
  },
  
  onShow(options) {
    console.log('App became visible');
    // Handle app becoming visible
  },
  
  onHide() {
    console.log('App became hidden');
    // Handle app going to background
  },
  
  onError(error) {
    console.error('App error:', error);
    // Handle global errors
  },
  
  globalData: {
    userInfo: null,
    systemInfo: null,
    appVersion: '1.0.0'
  },
  
  // Custom app methods
  checkLogin() {
    return !!this.globalData.userInfo;
  }
});

Create Subpackage Application

Creates a subpackage application instance with global data merging capabilities.

/**
 * Creates a subpackage application instance with global data inheritance
 * @param vm - Vue instance for the subpackage application
 * @returns The Vue instance for chaining
 */
function createSubpackageApp(vm: VueInstance): VueInstance;

Usage Example:

import { createSubpackageApp } from "@dcloudio/uni-mp-qq";

// Subpackage app inherits from main app's global data
const subpackageApp = createSubpackageApp({
  onLaunch(options) {
    console.log('Subpackage launched');
    // Access inherited global data
    console.log('Main app data:', getApp().globalData);
  },
  
  onShow(options) {
    console.log('Subpackage visible');
  },
  
  // Additional subpackage-specific global data
  globalData: {
    subpackageVersion: '1.0.0',
    subpackageFeatures: ['feature1', 'feature2']
  }
});

Create Plugin

Creates a plugin instance with application lifecycle hook integration.

/**
 * Creates a plugin instance with app lifecycle hooks
 * @param vm - Vue instance for the plugin
 * @returns The Vue instance for chaining
 */
function createPlugin(vm: VueInstance): VueInstance;

Usage Example:

import { createPlugin } from "@dcloudio/uni-mp-qq";

const myPlugin = createPlugin({
  onLaunch(options) {
    console.log('Plugin initialized');
    // Plugin initialization logic
  },
  
  onShow(options) {
    console.log('App visible, plugin active');
    // Handle app visibility for plugin
  },
  
  onHide() {
    console.log('App hidden, plugin inactive');
    // Handle app hiding for plugin
  },
  
  // Plugin-specific methods
  initializePluginFeatures() {
    // Plugin feature initialization
  }
});

Lifecycle Event Details

Launch Options Properties

interface PageNotFoundOptions {
  /** The path that was not found */
  path: string;
  /** Query parameters from the invalid path */
  query: Record<string, string>;
  /** Whether this is the initial page */
  isEntryPage: boolean;
}

interface ThemeChangeOptions {
  /** New theme: 'light' or 'dark' */
  theme: 'light' | 'dark';
}

interface UnhandledRejectionOptions {
  /** The rejected promise */
  promise: Promise<any>;
  /** The rejection reason */
  reason: any;
}

Global Data Access

Global data can be accessed from any page or component:

// Access from page/component
const app = getApp();
console.log(app.globalData.userInfo);

// Modify global data
app.globalData.userInfo = { name: 'John', id: 123 };

// Access custom app methods
if (app.checkLogin()) {
  // User is logged in
}

Application Architecture Notes

  • Applications are created once and manage the entire mini-program lifecycle
  • Subpackages inherit global data but can extend with package-specific data
  • Plugins integrate with main application lifecycle for consistent behavior
  • All application types support Vue.js patterns adapted for QQ mini-program environment
  • Global data provides shared state management across the entire application

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