CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-dcloudio--uni-h5

H5/Web platform runtime and components for UniApp cross-platform development framework

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

device.mddocs/

Device APIs

Comprehensive device capability APIs for accessing system information, sensors, clipboard, network status, and device-specific features. These APIs provide cross-platform access to native device functionality.

Capabilities

System Information

Access comprehensive system and device information including platform details, screen dimensions, and safe area data.

/**
 * Get system information asynchronously
 * @returns Promise resolving to system information
 */
function getSystemInfo(): Promise<SystemInfo>;

/**
 * Get system information synchronously
 * @returns System information object
 */
function getSystemInfoSync(): SystemInfo;

/**
 * Get window information including dimensions and safe areas
 * @returns Window information object
 */
function getWindowInfo(): WindowInfo;

interface SystemInfo {
  /** Device brand */
  brand: string;
  /** Device model */
  model: string;
  /** Screen width in px */
  screenWidth: number;
  /** Screen height in px */
  screenHeight: number;
  /** Window width in px */
  windowWidth: number;
  /** Window height in px */
  windowHeight: number;
  /** Status bar height in px */
  statusBarHeight: number;
  /** Operating system and version */
  system: string;
  /** Platform identifier */
  platform: string;
  /** UniApp version */
  version: string;
  /** SDK version */
  SDKVersion: string;
  /** App version */
  appVersion: string;
  /** App version code */
  appVersionCode: string;
  /** Device pixel ratio */
  pixelRatio: number;
  /** Device orientation */
  deviceOrientation: 'portrait' | 'landscape';
  /** Safe area coordinates */
  safeArea: SafeArea;
  /** Safe area insets */
  safeAreaInsets: SafeAreaInsets;
  /** Font size setting */
  fontSizeSetting: number;
  /** App theme */
  theme: 'light' | 'dark';
}

interface WindowInfo {
  /** Window width in px */
  windowWidth: number;
  /** Window height in px */
  windowHeight: number;
  /** Window top position */
  windowTop: number;
  /** Window bottom position */
  windowBottom: number;
  /** Safe area coordinates */
  safeArea: SafeArea;
  /** Safe area insets */
  safeAreaInsets: SafeAreaInsets;
}

interface SafeArea {
  left: number;
  right: number;
  top: number;
  bottom: number;
  width: number;
  height: number;
}

interface SafeAreaInsets {
  left: number;
  right: number;
  top: number;
  bottom: number;
}

Usage Examples:

import { getSystemInfo, getSystemInfoSync, getWindowInfo } from "@dcloudio/uni-h5";

// Get system info asynchronously
const systemInfo = await getSystemInfo();
console.log(`Platform: ${systemInfo.platform}`);
console.log(`Screen size: ${systemInfo.screenWidth}x${systemInfo.screenHeight}`);

// Get system info synchronously
const syncSystemInfo = getSystemInfoSync();
if (syncSystemInfo.platform === 'ios') {
  // iOS specific handling
}

// Get window info for layout calculations
const windowInfo = getWindowInfo();
const contentHeight = windowInfo.windowHeight - windowInfo.safeAreaInsets.top - windowInfo.safeAreaInsets.bottom;

Phone Calls

Initiate phone calls using the device's native calling functionality.

/**
 * Make a phone call
 * @param options - Phone call options
 */
function makePhoneCall(options: MakePhoneCallOptions): void;

interface MakePhoneCallOptions {
  /** Phone number to call */
  phoneNumber: string;
  /** Success callback */
  success?: () => void;
  /** Failure callback */
  fail?: (error: any) => void;
  /** Completion callback */
  complete?: () => void;
}

Usage Examples:

import { makePhoneCall } from "@dcloudio/uni-h5";

// Make a phone call
makePhoneCall({
  phoneNumber: '1234567890',
  success() {
    console.log('Call initiated successfully');
  },
  fail(error) {
    console.error('Failed to initiate call:', error);
  }
});

Device Vibration

Control device vibration for haptic feedback and notifications.

/**
 * Trigger device vibration
 * @param options - Vibration options
 */
function vibrate(options?: VibrateOptions): void;

interface VibrateOptions {
  /** Vibration duration in ms (default: 400) */
  duration?: number;
  /** Success callback */
  success?: () => void;
  /** Failure callback */
  fail?: (error: any) => void;
  /** Completion callback */
  complete?: () => void;
}

Usage Examples:

import { vibrate } from "@dcloudio/uni-h5";

// Short vibration
vibrate();

// Custom duration vibration
vibrate({
  duration: 200,
  success() {
    console.log('Vibration completed');
  }
});

Network Status

Monitor and retrieve network connectivity information.

/**
 * Get current network type
 * @returns Promise resolving to network type information
 */
function getNetworkType(): Promise<NetworkTypeResult>;

/**
 * Listen for network status changes
 * @param callback - Callback function for network changes
 */
function onNetworkStatusChange(callback: (result: NetworkTypeResult) => void): void;

/**
 * Remove network status change listener
 * @param callback - Callback function to remove (optional)
 */
function offNetworkStatusChange(callback?: (result: NetworkTypeResult) => void): void;

interface NetworkTypeResult {
  /** Network type */
  networkType: 'wifi' | '2g' | '3g' | '4g' | '5g' | 'ethernet' | 'unknown' | 'none';
  /** Whether connected to internet */
  isConnected: boolean;
}

Usage Examples:

import { getNetworkType, onNetworkStatusChange, offNetworkStatusChange } from "@dcloudio/uni-h5";

// Check current network status
const networkStatus = await getNetworkType();
if (networkStatus.networkType === 'none') {
  uni.showToast({
    title: 'No network connection',
    icon: 'error'
  });
}

// Monitor network changes
const handleNetworkChange = (result) => {
  console.log('Network changed to:', result.networkType);
  if (!result.isConnected) {
    // Handle offline state
  }
};

onNetworkStatusChange(handleNetworkChange);

// Cleanup listener
offNetworkStatusChange(handleNetworkChange);

Accelerometer

Access device accelerometer for motion detection and gesture recognition.

/**
 * Start listening to accelerometer data
 * @param options - Accelerometer options
 */
function startAccelerometer(options?: AccelerometerOptions): void;

/**
 * Stop listening to accelerometer data
 */
function stopAccelerometer(): void;

/**
 * Listen for accelerometer data changes
 * @param callback - Callback function for accelerometer data
 */
function onAccelerometerChange(callback: (result: AccelerometerResult) => void): void;

/**
 * Remove accelerometer change listener
 * @param callback - Callback function to remove (optional)
 */
function offAccelerometerChange(callback?: (result: AccelerometerResult) => void): void;

interface AccelerometerOptions {
  /** Data collection interval in ms */
  interval?: 'game' | 'ui' | 'normal';
  /** Success callback */
  success?: () => void;
  /** Failure callback */
  fail?: (error: any) => void;
  /** Completion callback */
  complete?: () => void;
}

interface AccelerometerResult {
  /** X-axis acceleration */
  x: number;
  /** Y-axis acceleration */
  y: number;
  /** Z-axis acceleration */
  z: number;
}

Usage Examples:

import { startAccelerometer, stopAccelerometer, onAccelerometerChange, offAccelerometerChange } from "@dcloudio/uni-h5";

// Start accelerometer with custom interval
startAccelerometer({
  interval: 'game',
  success() {
    console.log('Accelerometer started');
  }
});

// Listen for accelerometer changes
const handleAccelerometerChange = (result) => {
  const { x, y, z } = result;
  // Detect shake gesture
  const acceleration = Math.sqrt(x * x + y * y + z * z);
  if (acceleration > 2) {
    console.log('Shake detected!');
  }
};

onAccelerometerChange(handleAccelerometerChange);

// Cleanup
stopAccelerometer();
offAccelerometerChange(handleAccelerometerChange);

Compass

Access device compass for direction and orientation information.

/**
 * Start listening to compass data
 * @param options - Compass options
 */
function startCompass(options?: CompassOptions): void;

/**
 * Stop listening to compass data
 */
function stopCompass(): void;

/**
 * Listen for compass data changes
 * @param callback - Callback function for compass data
 */
function onCompassChange(callback: (result: CompassResult) => void): void;

/**
 * Remove compass change listener
 * @param callback - Callback function to remove (optional)
 */
function offCompassChange(callback?: (result: CompassResult) => void): void;

interface CompassOptions {
  /** Success callback */
  success?: () => void;
  /** Failure callback */
  fail?: (error: any) => void;
  /** Completion callback */
  complete?: () => void;
}

interface CompassResult {
  /** Direction in degrees (0-359) */
  direction: number;
  /** Compass accuracy */
  accuracy: number;
}

Clipboard

Read from and write to the device clipboard.

/**
 * Set clipboard data
 * @param options - Clipboard set options
 */
function setClipboardData(options: SetClipboardDataOptions): void;

/**
 * Get clipboard data
 * @param options - Clipboard get options
 */
function getClipboardData(options: GetClipboardDataOptions): void;

interface SetClipboardDataOptions {
  /** Data to set in clipboard */
  data: string;
  /** Success callback */
  success?: () => void;
  /** Failure callback */
  fail?: (error: any) => void;
  /** Completion callback */
  complete?: () => void;
}

interface GetClipboardDataOptions {
  /** Success callback */
  success?: (result: { data: string }) => void;
  /** Failure callback */
  fail?: (error: any) => void;
  /** Completion callback */
  complete?: () => void;
}

Usage Examples:

import { setClipboardData, getClipboardData } from "@dcloudio/uni-h5";

// Copy text to clipboard
setClipboardData({
  data: 'Hello UniApp!',
  success() {
    uni.showToast({
      title: 'Copied to clipboard',
      icon: 'success'
    });
  }
});

// Read from clipboard
getClipboardData({
  success(result) {
    console.log('Clipboard content:', result.data);
  }
});

Theme Detection

Monitor system theme changes (light/dark mode).

/**
 * Listen for theme changes
 * @param callback - Callback function for theme changes
 */
function onThemeChange(callback: (result: ThemeChangeResult) => void): void;

/**
 * Remove theme change listener
 * @param callback - Callback function to remove (optional)
 */
function offThemeChange(callback?: (result: ThemeChangeResult) => void): void;

interface ThemeChangeResult {
  /** Current theme */
  theme: 'light' | 'dark';
}

Usage Examples:

import { onThemeChange, offThemeChange } from "@dcloudio/uni-h5";

// Monitor theme changes
const handleThemeChange = (result) => {
  console.log('Theme changed to:', result.theme);
  // Update app styling based on theme
  document.body.className = result.theme === 'dark' ? 'dark-theme' : 'light-theme';
};

onThemeChange(handleThemeChange);

// Cleanup
offThemeChange(handleThemeChange);

Device API Types

// Common callback types
interface CommonCallbacks {
  success?: () => void;
  fail?: (error: any) => void;
  complete?: () => void;
}

interface SuccessCallback<T> {
  success?: (result: T) => void;
  fail?: (error: any) => void;
  complete?: () => void;
}

// Error types
interface DeviceError {
  errMsg: string;
  errCode?: number;
}

Install with Tessl CLI

npx tessl i tessl/npm-dcloudio--uni-h5

docs

components.md

context.md

device.md

framework.md

index.md

location.md

media.md

navigation.md

network.md

storage.md

ui-controls.md

tile.json