Before starting PWC development, please complete the corresponding preparation based on your target platform.

PWC currently supports both mobile and web, but the development approach is different on each side:

• Mobile: developed and previewed through the online IDE
• Web: developed through a local development environment, which requires VS Code and the sharedev plugin

Runtime Environment Overview

Before reading the detailed preparation items, it is recommended to first understand the basic differences between the two sides.

Dimension	Mobile	Web
Runtime environment	Fxiaoke App / mini program runtime	Browser / Vue 2 host environment
Development method	Online IDE	Local development
Debugging method	Online preview and host-environment verification	VS Code, local debugging, browser debugging
API capabilities	Mini program capabilities + platform-open capabilities	Web host capabilities + platform-open capabilities
Performance concerns	Package size, startup performance, resource loading	Page rendering, interaction response, dependency management

General Preparation Items

Permission Preparation

Before starting PWC development, make sure your account has the following permissions:

• Custom development platform permission
• Object management configuration permission
• Process management configuration permission
• UI customization management configuration permission
• Interconnection management configuration permission
• Portal management configuration permission

Important

It is recommended to verify account permissions in advance to avoid invisible features or abnormal behavior during development or debugging due to insufficient permissions.

Basic Technical Requirements

• Familiarity with JavaScript / HTML / CSS
• Understanding of component-based and modular development concepts
• Basic front-end debugging and issue troubleshooting skills

Understanding Core Concepts

Before development starts, you should understand the following core concepts:

• PWC (Page Web Component)
• Custom Components
• Custom Plugins
• Runtime Context
• Hooks

Development Preparation

Mobile

Mobile PWC runs in the mini program runtime inside the Fxiaoke App, which has higher requirements for performance, package size, and runtime stability.

Development Environment

The following conditions are required for mobile development:

• An available online IDE environment
• A test or sandbox account that can log in
• A Fxiaoke App environment for real-device verification

Development and Preview

• Develop through the online IDE
• Verify through online preview or the host environment
• It is recommended to confirm interaction behavior and capability performance on a real mobile device

Mobile Notes

• Direct DOM manipulation is not supported
• Pay attention to package size and resource loading methods
• Watch for page lifecycle differences and their performance impact

Web

Web-side development is based on a local development environment. It is recommended to complete tool installation before entering specific development work.

Development Environment

The following conditions are required for web development:

• Install VS Code
• Install the sharedev plugin
• Prepare an available test environment and account

Development and Debugging

• Develop through VS Code and a local environment
• Use browser debugging capabilities for issue investigation
• Perform final joint verification in the host environment

Web Notes

• Do not directly reuse mobile component or plugin definitions
• Pay attention to dependency management, resource references, and differences in the host environment
• Use the definitions in the web reference manual as the source of truth

Next Steps

After completing the preparation work, you can continue with the following content:

• Development Overview
• Capability Map
• Component Guide
• Plugin Guide