@dcloudio/uni-h5 is the H5/Web platform runtime for UniApp, providing comprehensive cross-platform development capabilities including Vue components, device APIs, storage operations, network requests, media handling, location services, and UI controls. It enables developers to build web applications using the unified UniApp development framework.
npm install @dcloudio/uni-h5import { Button, View, Text, uni, setupApp, setupPage } from "@dcloudio/uni-h5";For CommonJS:
const { Button, View, Text, uni, setupApp, setupPage } = require("@dcloudio/uni-h5");import { setupApp, setupPage, Button, View, Text, uni } from "@dcloudio/uni-h5";
// Setup a UniApp application
const App = setupApp({
// App configuration
});
// Setup a page component
const HomePage = setupPage({
setup() {
const handleClick = () => {
uni.showToast({
title: 'Hello UniApp!',
icon: 'success'
});
};
return { handleClick };
},
template: `
<View>
<Text>Welcome to UniApp H5</Text>
<Button @click="handleClick">Show Toast</Button>
</View>
`
});
// Use device capabilities
const systemInfo = uni.getSystemInfoSync();
console.log('Platform:', systemInfo.platform);
// Make network requests
uni.request({
url: 'https://api.example.com/data',
success: (res) => {
console.log('Response:', res.data);
}
});@dcloudio/uni-h5 is organized around several key components:
Comprehensive set of built-in Vue components optimized for cross-platform development, including form controls, layout containers, media display, and navigation elements.
// Basic UI Components
export const Button: DefineComponent<ButtonProps>;
export const View: DefineComponent<ViewProps>;
export const Text: DefineComponent<TextProps>;
export const Image: DefineComponent<ImageProps>;
// Form Components
export const Input: DefineComponent<InputProps>;
export const Textarea: DefineComponent<TextareaProps>;
export const Checkbox: DefineComponent<CheckboxProps>;
export const Radio: DefineComponent<RadioProps>;
export const Switch: DefineComponent<SwitchProps>;Application and page lifecycle management functions for initializing UniApp applications and configuring page components with proper lifecycle handling.
function setupApp(comp: any): DefineComponent;
function setupPage(comp: any): DefineComponent;
function setupWindow(comp: any, id: number): DefineComponent;
function getApp(): ComponentPublicInstance;
function getCurrentPages(): ComponentPublicInstance[];Comprehensive device capability APIs for accessing system information, sensors, clipboard, network status, and device-specific features.
function getSystemInfo(): Promise<SystemInfo>;
function getSystemInfoSync(): SystemInfo;
function getWindowInfo(): WindowInfo;
function makePhoneCall(options: MakePhoneCallOptions): void;
function vibrate(options?: VibrateOptions): void;
// Network status
function getNetworkType(): Promise<NetworkTypeResult>;
function onNetworkStatusChange(callback: (result: NetworkTypeResult) => void): void;
function offNetworkStatusChange(callback?: (result: NetworkTypeResult) => void): void;Local storage APIs for persistent data management with both synchronous and asynchronous operations supporting various data types.
function getStorage(options: GetStorageOptions): Promise<GetStorageResult>;
function getStorageSync(key: string): any;
function setStorage(options: SetStorageOptions): Promise<void>;
function setStorageSync(key: string, data: any): void;
function removeStorage(options: RemoveStorageOptions): Promise<void>;
function removeStorageSync(key: string): void;HTTP request capabilities including standard requests, file uploads/downloads, and WebSocket connections with comprehensive configuration options.
function request(options: RequestOptions): RequestTask;
function downloadFile(options: DownloadFileOptions): DownloadTask;
function uploadFile(options: UploadFileOptions): UploadTask;
// WebSocket
function connectSocket(options: ConnectSocketOptions): SocketTask;
function onSocketOpen(callback: (result: any) => void): void;
function sendSocketMessage(options: SendSocketMessageOptions): void;Media selection and processing APIs for images, videos, and files with support for camera capture, gallery selection, and media information retrieval.
function chooseImage(options?: ChooseImageOptions): Promise<ChooseImageResult>;
function getImageInfo(options: GetImageInfoOptions): Promise<GetImageInfoResult>;
function chooseVideo(options?: ChooseVideoOptions): Promise<ChooseVideoResult>;
function getVideoInfo(options: GetVideoInfoOptions): Promise<GetVideoInfoResult>;
function chooseFile(options?: ChooseFileOptions): Promise<ChooseFileResult>;Location and mapping capabilities including GPS positioning, location selection, and map integration with various provider support.
function getLocation(options?: GetLocationOptions): Promise<GetLocationResult>;
function openLocation(options: OpenLocationOptions): void;
function chooseLocation(): Promise<ChooseLocationResult>;
function onLocationChange(callback: (result: LocationChangeResult) => void): void;
function startLocationUpdate(): void;
function stopLocationUpdate(): void;Page navigation and routing APIs supporting multiple navigation modes, tab management, and page lifecycle with history stack management.
function navigateTo(options: NavigateToOptions): Promise<NavigateToResult>;
function navigateBack(options?: NavigateBackOptions): Promise<NavigateBackResult>;
function redirectTo(options: RedirectToOptions): Promise<RedirectToResult>;
function reLaunch(options: ReLaunchOptions): Promise<ReLaunchResult>;
function switchTab(options: SwitchTabOptions): Promise<SwitchTabResult>;User interface control APIs including modals, toasts, action sheets, navigation bars, tab bars, and page scrolling functionality.
function showModal(options: ShowModalOptions): Promise<ShowModalResult>;
function showToast(options: ShowToastOptions): void;
function showActionSheet(options: ShowActionSheetOptions): Promise<ShowActionSheetResult>;
// Navigation bar
function setNavigationBarTitle(options: SetNavigationBarTitleOptions): void;
function setNavigationBarColor(options: SetNavigationBarColorOptions): void;
// Page scrolling
function pageScrollTo(options: PageScrollToOptions): void;Context creation and observer APIs for audio playback, canvas operations, video control, intersection detection, and media queries.
function createInnerAudioContext(): InnerAudioContext;
function createCanvasContext(canvasId: string, component?: any): CanvasContext;
function createVideoContext(videoId: string, component?: any): VideoContext;
function createIntersectionObserver(component?: any, options?: IntersectionObserverOptions): IntersectionObserver;
function createMediaQueryObserver(component?: any): MediaQueryObserver;Core utility functions for unit conversion, data transformation, and localization support.
// Unit conversion
function upx2px(upx: number): number;
function rpx2px(rpx: number): number;
// Data conversion
function arrayBufferToBase64(buffer: ArrayBuffer): string;
function base64ToArrayBuffer(base64: string): ArrayBuffer;
// Localization
function getLocale(): string;
function setLocale(locale: string): void;
function onLocaleChange(callback: (locale: string) => void): void;
// Platform detection
function canIUse(api: string): boolean;
// Event system
function $on(event: string, callback: Function): void;
function $off(event: string, callback?: Function): void;
function $once(event: string, callback: Function): void;
function $emit(event: string, ...args: any[]): void;interface SystemInfo {
platform: string;
system: string;
version: string;
windowWidth: number;
windowHeight: number;
screenWidth: number;
screenHeight: number;
statusBarHeight: number;
safeArea: SafeArea;
safeAreaInsets: SafeAreaInsets;
}
interface WindowInfo {
windowWidth: number;
windowHeight: number;
windowTop: number;
windowBottom: number;
safeArea: SafeArea;
safeAreaInsets: SafeAreaInsets;
}
interface SafeArea {
left: number;
right: number;
top: number;
bottom: number;
width: number;
dom: number;
}
interface SafeAreaInsets {
left: number;
right: number;
top: number;
bottom: number;
}interface RequestOptions {
url: string;
data?: any;
header?: Record<string, string>;
method?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'CONNECT' | 'HEAD' | 'OPTIONS' | 'TRACE';
timeout?: number;
dataType?: string;
responseType?: 'text' | 'arraybuffer';
success?: (result: RequestSuccessResult) => void;
fail?: (result: any) => void;
complete?: (result: any) => void;
}
interface RequestSuccessResult {
data: any;
statusCode: number;
header: Record<string, string>;
cookies: string[];
}
interface RequestTask {
abort(): void;
onHeadersReceived(callback: (result: any) => void): void;
offHeadersReceived(callback?: (result: any) => void): void;
}