Cross-Platform Applications#

Cross-platform applications are a core feature that allows you to use the same definition specifications to write different implementations for different platforms. At runtime, it automatically detects the platform type, matches and loads the corresponding platform resources. Users only need to write one set of code to create systems that perfectly match the habits of users on different access devices.

Principle#

The basic principle of cross-platform applications is still based on resource sharing. If you are not familiar with resource sharing, please first check the Micro Applications chapter. The granularity of cross-platform is at the resource level, including component resources, script tool resources, etc., rather than at the page or application level. Cross-platform applications achieve application-level cross-platform capabilities by combining these resources.

Cross-Platform Sets#

1. Definition Method

import type { WisConfig } from "@wisdesign/wis-plugin";
 
export default const config: WisConfig = {
  exposes: {
    "./button": {
      // PC platform resources must be specified
      pc: "./src/packages/button/pc/index",
      pad: "./src/packages/button/pad/index",
      mobile: "./src/packages/button/mobile/index",
    },
  },
}

2. Usage Method

import { Button } from "wis/button";
 
export default function () {
  return <Button text="Wis Button" />;
}

Cross-Platform Resource Sets#

Cross-platform resource sets are used in scenarios where resource sets need to be loaded differently according to platform types. The export method is as follows:

1. Definition Method

import type { WisConfig } from "@wisdesign/wis-plugin";
 
export default const config: WisConfig = {
  exposes: {
    "./themes": {
      pc: {
        default: "./src/themes/pc/blue/index",
        red: "./src/themes/pc/red/index",
      },
      mobile: {
        default: "./src/themes/mobile/blue/index",
        red: "./src/themes/mobile/red/index",
      },
    },
  },
}

2. Usage Method

import "wis/themes";

Cross-Platform Set Sharing#

Like ordinary resource sets, cross-platform sets can be used not only by their own projects but also by other micro applications. You just need to register the application on the using end.

Supported Platforms#

Currently, we support three types of platforms: pc, pad, and mobile. Among them, PC platform resources serve as the default platform resources and must be configured. Other platforms can be implemented based on actual scenarios.

Matching Rules#

• When no platform-specific resource is matched, PC platform resources are used by default.

Cross-Platform Component Library#

We are developing a complete cross-platform component library, wis, based on this feature. In the future, it will effectively help you quickly develop cross-platform applications.