or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

app-component.mdbiometric-auth.mdbluetooth.mddevice-system.mdevents.mdindex.mdlocation-maps.mdmedia-camera.mdnative-integration.mdnavigation.mdnetwork.mdstorage-filesystem.mdui.mdutilities.md
tile.json

app-component.mddocs/

Application & Component Management

Core functionality for creating and managing uni-app applications, pages, and components with Vue.js integration.

Capabilities

Application Creation

Creates a uni-app application instance with lifecycle management.

/**
 * Creates a uni-app application instance
 * @param options - Application configuration options
 * @returns Application instance
 */
function createApp(options: AppOptions): App;

interface AppOptions {
  onLaunch?: (options: LaunchOptions) => void;
  onShow?: (options: ShowOptions) => void;
  onHide?: () => void;
  onError?: (error: string) => void;
  onPageNotFound?: (options: PageNotFoundOptions) => void;
  onThemeChange?: (options: ThemeChangeOptions) => void;
  onUnhandledRejection?: (options: UnhandledRejectionOptions) => void;
  globalData?: any;
  [key: string]: any;
}

interface LaunchOptions {
  path: string;
  query: object;
  scene: number;
  shareTicket?: string;
  referrerInfo?: ReferrerInfo;
}

Usage Example:

import { createApp } from "@dcloudio/uni-app-plus";

const app = createApp({
  onLaunch(options) {
    console.log('App launched with options:', options);
    // Initialize app-level data
    this.globalData = {
      userInfo: null,
      version: '1.0.0'
    };
  },
  onShow(options) {
    console.log('App shown');
  },
  onHide() {
    console.log('App hidden');
  },
  onError(error) {
    console.error('App error:', error);
  }
});

Page Creation

Creates page instances for uni-app with lifecycle hooks and navigation support.

/**
 * Creates a page instance for uni-app
 * @param options - Page configuration options
 * @returns Page instance
 */
function createPage(options: PageOptions): Page;

interface PageOptions {
  data?: object | (() => object);
  onLoad?: (query: object) => void;
  onShow?: () => void;
  onReady?: () => void;
  onHide?: () => void;
  onUnload?: () => void;
  onPullDownRefresh?: () => void;
  onReachBottom?: () => void;
  onShareAppMessage?: (options: ShareAppMessageOptions) => ShareAppMessageResult;
  onPageScroll?: (options: PageScrollOptions) => void;
  onResize?: (options: ResizeOptions) => void;
  onTabItemTap?: (options: TabItemTapOptions) => void;
  onBackPress?: (options: BackPressOptions) => boolean | void;
  onNavigationBarButtonTap?: (options: NavigationBarButtonTapOptions) => void;
  methods?: object;
  [key: string]: any;
}

Usage Example:

import { createPage } from "@dcloudio/uni-app-plus";

const indexPage = createPage({
  data() {
    return {
      title: 'Hello World',
      userList: []
    };
  },
  onLoad(query) {
    console.log('Page loaded with query:', query);
    this.loadUserData();
  },
  onShow() {
    console.log('Page shown');
  },
  onPullDownRefresh() {
    this.refreshData();
  },
  methods: {
    loadUserData() {
      // Load user data
    },
    refreshData() {
      // Refresh page data
      uni.stopPullDownRefresh();
    }
  }
});

Component Creation

Creates Vue components optimized for uni-app with platform-specific enhancements.

/**
 * Creates a component instance for uni-app
 * @param options - Component configuration options
 * @returns Component instance
 */
function createComponent(options: ComponentOptions): Component;

interface ComponentOptions {
  name?: string;
  props?: PropsDefinition;
  data?: object | (() => object);
  computed?: object;
  methods?: object;
  watch?: object;
  created?: () => void;
  mounted?: () => void;
  destroyed?: () => void;
  onReady?: () => void;
  onPageShow?: () => void;
  onPageHide?: () => void;
  [key: string]: any;
}

Usage Example:

import { createComponent } from "@dcloudio/uni-app-plus";

const customButton = createComponent({
  name: 'custom-button',
  props: {
    title: {
      type: String,
      default: 'Button'
    },
    type: {
      type: String,
      default: 'default'
    }
  },
  data() {
    return {
      pressed: false
    };
  },
  methods: {
    handleClick() {
      this.$emit('click', {
        title: this.title,
        timestamp: Date.now()
      });
    }
  }
});

Subpackage Application

Creates a subpackage application instance for app optimization.

/**
 * Creates a subpackage application instance
 * @param vm - Vue instance
 * @returns Vue instance with subpackage configuration
 */
function createSubpackageApp(vm: VueInstance): VueInstance;

Usage Example:

import { createSubpackageApp } from "@dcloudio/uni-app-plus";
import Vue from 'vue';

const subApp = new Vue({
  // Subpackage app configuration
});

createSubpackageApp(subApp);

Plugin Creation

Creates plugin instances for extending uni-app functionality.

/**
 * Creates a plugin instance
 * @param vm - Vue instance
 * @returns Vue instance configured as plugin
 */
function createPlugin(vm: VueInstance): VueInstance;

Types

Additional Types

interface ReferrerInfo {
  appId: string;
  extraData?: object;
}

interface ShareAppMessageOptions {
  from: 'button' | 'menu';
  target?: object;
  webViewUrl?: string;
}

interface ShareAppMessageResult {
  title: string;
  path: string;
  imageUrl?: string;
}

interface PageScrollOptions {
  scrollTop: number;
}

interface BackPressOptions {
  from: 'navigateBack' | 'backbutton';
}