tessl/npm-dcloudio--uni-app-plus

A runtime library for uni-app's app-plus platform, which provides mobile app functionality for the uni-app cross-platform framework

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

User Interface APIs

Name: tessl/npm-dcloudio--uni-app-plus
Author: tessl

Comprehensive user interface components, dialogs, navigation, and visual feedback capabilities.

Capabilities

Toast Messages

Display temporary toast messages to users.

/**
 * Show toast message
 * @param options - Toast configuration options
 */
function showToast(options: ShowToastOptions): void;

/**
 * Hide toast message
 */
function hideToast(): void;

interface ShowToastOptions {
  title: string;
  icon?: 'success' | 'error' | 'fail' | 'exception' | 'loading' | 'none';
  image?: string;
  duration?: number; // Default 1500ms
  mask?: boolean;
  position?: 'top' | 'center' | 'bottom';
  success?: (result: any) => void;
  fail?: (error: any) => void;
  complete?: () => void;
}

Usage Examples:

import uni from "@dcloudio/uni-app-plus";

// Success toast
uni.showToast({
  title: 'Operation successful',
  icon: 'success',
  duration: 2000
});

// Error toast
uni.showToast({
  title: 'Something went wrong',
  icon: 'error'
});

// Custom image toast
uni.showToast({
  title: 'Custom notification',
  image: '/static/icons/notification.png',
  duration: 3000
});

// Hide toast manually
setTimeout(() => {
  uni.hideToast();
}, 1000);

Loading Dialogs

Display loading indicators during operations.

/**
 * Show loading dialog
 * @param options - Loading configuration options
 */
function showLoading(options: ShowLoadingOptions): void;

/**
 * Hide loading dialog
 */
function hideLoading(): void;

interface ShowLoadingOptions {
  title: string;
  mask?: boolean;
  success?: (result: any) => void;
  fail?: (error: any) => void;
  complete?: () => void;
}

Usage Example:

// Show loading
uni.showLoading({
  title: 'Loading...',
  mask: true
});

// Simulate async operation
setTimeout(() => {
  uni.hideLoading();
  uni.showToast({
    title: 'Load complete',
    icon: 'success'
  });
}, 3000);

Modal Dialogs

Display modal dialogs for user confirmation and input.

/**
 * Show modal dialog
 * @param options - Modal configuration options
 */
function showModal(options: ShowModalOptions): void;

interface ShowModalOptions {
  title?: string;
  content?: string;
  showCancel?: boolean;
  cancelText?: string;
  cancelColor?: string;
  confirmText?: string;
  confirmColor?: string;
  editable?: boolean;
  placeholderText?: string;
  success?: (result: ShowModalResult) => void;
  fail?: (error: any) => void;
  complete?: () => void;
}

interface ShowModalResult {
  confirm: boolean;
  cancel: boolean;
  content?: string; // When editable is true
}

Usage Examples:

// Confirmation dialog
uni.showModal({
  title: 'Confirm Delete',
  content: 'Are you sure you want to delete this item?',
  showCancel: true,
  confirmText: 'Delete',
  confirmColor: '#ff4757',
  success: (res) => {
    if (res.confirm) {
      console.log('User confirmed deletion');
      // Perform delete operation
    } else if (res.cancel) {
      console.log('User cancelled');
    }
  }
});

// Input dialog
uni.showModal({
  title: 'Enter Name',
  editable: true,
  placeholderText: 'Please enter your name',
  success: (res) => {
    if (res.confirm && res.content) {
      console.log('User entered:', res.content);
    }
  }
});

Action Sheets

Display action sheet menus for user selection.

/**
 * Show action sheet
 * @param options - Action sheet configuration options
 */
function showActionSheet(options: ShowActionSheetOptions): void;

interface ShowActionSheetOptions {
  itemList: string[];
  itemColor?: string;
  popover?: PopoverOptions;
  success?: (result: ShowActionSheetResult) => void;
  fail?: (error: any) => void;
  complete?: () => void;
}

interface ShowActionSheetResult {
  tapIndex: number;
}

interface PopoverOptions {
  top: number;
  left: number;
  width: number;
  height: number;
}

Usage Example:

uni.showActionSheet({
  itemList: ['Take Photo', 'Choose from Album', 'Cancel'],
  success: (res) => {
    switch (res.tapIndex) {
      case 0:
        console.log('Take photo selected');
        // Handle camera
        break;
      case 1:
        console.log('Choose from album selected');
        // Handle gallery
        break;
      case 2:
        console.log('Cancel selected');
        break;
    }
  }
});

Navigation Bar

Control navigation bar appearance and behavior.

/**
 * Set navigation bar title
 * @param options - Navigation bar title options
 */
function setNavigationBarTitle(options: SetNavigationBarTitleOptions): void;

/**
 * Set navigation bar color
 * @param options - Navigation bar color options
 */
function setNavigationBarColor(options: SetNavigationBarColorOptions): void;

/**
 * Show navigation bar loading
 */
function showNavigationBarLoading(): void;

/**
 * Hide navigation bar loading
 */
function hideNavigationBarLoading(): void;

interface SetNavigationBarTitleOptions {
  title: string;
  success?: (result: any) => void;
  fail?: (error: any) => void;
  complete?: () => void;
}

interface SetNavigationBarColorOptions {
  frontColor: '#ffffff' | '#000000';
  backgroundColor: string;
  animation?: NavigationBarAnimation;
  success?: (result: any) => void;
  fail?: (error: any) => void;
  complete?: () => void;
}

interface NavigationBarAnimation {
  duration?: number;
  timingFunc?: 'linear' | 'easeIn' | 'easeOut' | 'easeInOut';
}

Tab Bar Control

Manage tab bar appearance and behavior.

/**
 * Set tab bar item
 * @param options - Tab bar item options
 */
function setTabBarItem(options: SetTabBarItemOptions): void;

/**
 * Set tab bar style
 * @param options - Tab bar style options
 */
function setTabBarStyle(options: SetTabBarStyleOptions): void;

/**
 * Hide tab bar
 * @param options - Hide options
 */
function hideTabBar(options?: HideTabBarOptions): void;

/**
 * Show tab bar
 * @param options - Show options
 */
function showTabBar(options?: ShowTabBarOptions): void;

/**
 * Set tab bar badge
 * @param options - Badge options
 */
function setTabBarBadge(options: SetTabBarBadgeOptions): void;

/**
 * Remove tab bar badge
 * @param options - Remove badge options
 */
function removeTabBarBadge(options: RemoveTabBarBadgeOptions): void;

/**
 * Show tab bar red dot
 * @param options - Red dot options
 */
function showTabBarRedDot(options: ShowTabBarRedDotOptions): void;

/**
 * Hide tab bar red dot
 * @param options - Hide red dot options
 */
function hideTabBarRedDot(options: HideTabBarRedDotOptions): void;

interface SetTabBarItemOptions {
  index: number;
  text?: string;
  iconPath?: string;
  selectedIconPath?: string;
  success?: (result: any) => void;
  fail?: (error: any) => void;
  complete?: () => void;
}

interface SetTabBarBadgeOptions {
  index: number;
  text: string;
  success?: (result: any) => void;
  fail?: (error: any) => void;
  complete?: () => void;
}

Animations

Create and control animations for UI elements.

/**
 * Create animation instance
 * @param options - Animation options
 * @returns Animation instance
 */
function createAnimation(options?: CreateAnimationOptions): Animation;

interface CreateAnimationOptions {
  duration?: number;
  timingFunction?: 'linear' | 'ease' | 'ease-in' | 'ease-in-out' | 'ease-out' | 'step-start' | 'step-end';
  delay?: number;
  transformOrigin?: string;
}

interface Animation {
  opacity(value: number): Animation;
  backgroundColor(color: string): Animation;
  width(length: number | string): Animation;
  height(length: number | string): Animation;
  top(length: number | string): Animation;
  left(length: number | string): Animation;
  bottom(length: number | string): Animation;
  right(length: number | string): Animation;
  rotate(angle: number | string): Animation;
  rotateX(angle: number | string): Animation;
  rotateY(angle: number | string): Animation;
  rotateZ(angle: number | string): Animation;
  rotate3d(x: number, y: number, z: number, angle: number | string): Animation;
  scale(sx: number, sy?: number): Animation;
  scaleX(scale: number): Animation;
  scaleY(scale: number): Animation;
  scaleZ(scale: number): Animation;
  scale3d(sx: number, sy: number, sz: number): Animation;
  translate(tx: number | string, ty?: number | string): Animation;
  translateX(translation: number | string): Animation;
  translateY(translation: number | string): Animation;
  translateZ(translation: number | string): Animation;
  translate3d(tx: number | string, ty: number | string, tz: number | string): Animation;
  skew(ax: number | string, ay?: number | string): Animation;
  skewX(angle: number | string): Animation;
  skewY(angle: number | string): Animation;
  matrix(a: number, b: number, c: number, d: number, tx: number, ty: number): Animation;
  matrix3d(a1: number, b1: number, c1: number, d1: number, a2: number, b2: number, c2: number, d2: number, a3: number, b3: number, c3: number, d3: number, a4: number, b4: number, c4: number, d4: number): Animation;
  step(options?: AnimationStepOptions): Animation;
  export(): AnimationData;
}

interface AnimationStepOptions {
  duration?: number;
  timingFunction?: string;
  delay?: number;
  transformOrigin?: string;
}

interface AnimationData {
  actions: any[];
}

Usage Example:

// Create bouncing animation
const animation = uni.createAnimation({
  duration: 1000,
  timingFunction: 'ease-in-out'
});

animation
  .scale(1.2)
  .rotate(45)
  .step()
  .scale(1)
  .rotate(0)
  .step();

// Apply animation to component
this.animationData = animation.export();

Page Scroll

Control page scrolling behavior.

/**
 * Scroll page to specific position
 * @param options - Scroll options
 */
function pageScrollTo(options: PageScrollToOptions): void;

interface PageScrollToOptions {
  scrollTop?: number;
  selector?: string;
  offsetTop?: number;
  duration?: number;
  success?: (result: any) => void;
  fail?: (error: any) => void;
  complete?: () => void;
}

Pull-to-Refresh

Control pull-to-refresh functionality.

/**
 * Start pull-down refresh
 */
function startPullDownRefresh(): void;

/**
 * Stop pull-down refresh
 */
function stopPullDownRefresh(): void;

Background

Set page background appearance.

/**
 * Set background color
 * @param options - Background color options
 */
function setBackgroundColor(options: SetBackgroundColorOptions): void;

/**
 * Set background text style
 * @param options - Background text style options
 */
function setBackgroundTextStyle(options: SetBackgroundTextStyleOptions): void;

interface SetBackgroundColorOptions {
  backgroundColor?: string;
  backgroundColorTop?: string;
  backgroundColorBottom?: string;
  success?: (result: any) => void;
  fail?: (error: any) => void;
  complete?: () => void;
}

interface SetBackgroundTextStyleOptions {
  textStyle: 'dark' | 'light';
  success?: (result: any) => void;
  fail?: (error: any) => void;
  complete?: () => void;
}

Types

Additional UI Types

interface SetTabBarStyleOptions {
  color?: string;
  selectedColor?: string;
  backgroundColor?: string;
  borderStyle?: 'black' | 'white';
  success?: (result: any) => void;
  fail?: (error: any) => void;
  complete?: () => void;
}

interface HideTabBarOptions {
  animation?: boolean;
  success?: (result: any) => void;
  fail?: (error: any) => void;
  complete?: () => void;
}

interface ShowTabBarOptions {
  animation?: boolean;
  success?: (result: any) => void;
  fail?: (error: any) => void;
  complete?: () => void;
}

interface RemoveTabBarBadgeOptions {
  index: number;
  success?: (result: any) => void;
  fail?: (error: any) => void;
  complete?: () => void;
}

interface ShowTabBarRedDotOptions {
  index: number;
  success?: (result: any) => void;
  fail?: (error: any) => void;
  complete?: () => void;
}

interface HideTabBarRedDotOptions {
  index: number;
  success?: (result: any) => void;
  fail?: (error: any) => void;
  complete?: () => void;
}