English
Preparation Before Development
About 519 wordsAbout 2 min
2025-12-18
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
sharedevplugin
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
sharedevplugin - 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:
