Templates
This page provides commonly used project templates and page templates for uni-app development to help developers quickly build applications.
Table of Contents
Official Project Templates
Basic Templates
Official uni-app basic project templates, suitable for projects starting from scratch.
| Template Name | Description | Download Link |
|---|---|---|
| Default Template | Basic uni-app project with essential page structure | Download |
| Hello uni-app | Demonstrates uni-app framework components, APIs, templates, etc. | Download |
| uni-ui Project Template | Project template integrated with uni-ui | Download |
Industry Templates
Project templates for specific industries, including common industry features and pages.
| Template Name | Description | Download Link |
|---|---|---|
| E-commerce Template | Includes core e-commerce features like product list, details, cart, orders | Download |
| News Template | Includes news features like article list, details, comments | Download |
| Chat Social Template | Includes instant messaging, friend list, chat interface and other social features | Download |
| Video Template | Includes video playback, list, comments and other video app features | Download |
| Q&A Community Template | Includes question posting, answering, voting and other community interaction features | Download |
Page Templates
Login & Registration Templates
Various styles of login and registration page templates.
| Template Name | Description | Preview | Download Link |
|---|---|---|---|
| Simple Login Template | Clean style login/registration pages |  | Download |
| Background Image Login Template | Login/registration pages with background images |  | Download |
| SMS Verification Login Template | Pages supporting SMS verification code login |  | Download |
| Social Login Template | Pages supporting third-party login like WeChat, QQ |  | Download |
List Templates
Various styles of list page templates.
| Template Name | Description | Preview | Download Link |
|---|---|---|---|
| Card List | Card-style layout list pages |  | Download |
| Media List | Image-text mixed layout list pages |  | Download |
| Product List | Product list pages suitable for e-commerce apps |  | Download |
| Waterfall List | Waterfall layout list pages |  | Download |
Detail Page Templates
Various styles of detail page templates.
| Template Name | Description | Preview | Download Link |
|---|---|---|---|
| Article Detail | Article detail pages suitable for blogs, news |  | Download |
| Product Detail | Product detail pages suitable for e-commerce apps |  | Download |
| Video Detail | Video detail pages suitable for video apps |  | Download |
| User Profile | User profile pages |  | Download |
Form Templates
Various form page templates.
| Template Name | Description | Preview | Download Link |
|---|---|---|---|
| Basic Form | Pages with common form elements |  | Download |
| Step Form | Multi-step form pages |  | Download |
| Advanced Form | Form pages with complex validation and interaction |  | Download |
| Search Page | Various search page templates |  | Download |
Component Templates
Navigation Component Templates
Various navigation component templates.
| Template Name | Description | Preview | Download Link |
|---|---|---|---|
| Header Navigation | Custom header navigation bar templates |  | Download |
| Bottom Tab Bar | Custom bottom tab bar templates |  | Download |
| Sidebar Navigation | Sidebar navigation templates |  | Download |
| Segment Navigation | Segment navigation templates |  | Download |
Functional Component Templates
Various functional component templates.
| Template Name | Description | Preview | Download Link |
|---|---|---|---|
| Image Upload | Image selection and upload components |  | Download |
| Comment Component | Comment list and posting components |  | Download |
| Calendar Component | Date selection and calendar display components |  | Download |
| Shopping Cart Component | Shopping cart functionality components |  | Download |
How to Use Templates
Method 1: Use Templates When Creating Projects in HBuilderX
- Open HBuilderX, click "File" > "New" > "Project"
- Select the desired template from the project template list
- Fill in the project name and storage path
- Click the "Create" button to complete project creation
Method 2: Import Downloaded Templates
- Download the template archive and extract it
- Open HBuilderX, click "File" > "Import" > "Import from Local Directory"
- Select the extracted template folder
- Click the "Import" button to complete the import
Method 3: Copy Template Code to Existing Projects
- Download and extract the template
- Open the template folder and find the required page or component code
- Copy the code to the corresponding location in your project
- Modify and adjust the code as needed
Template Development and Contribution
If you have excellent templates to share with the community, you can contribute through the following ways:
- Upload your templates on DCloud Plugin Market
- Submit PR to uni-app GitHub repository
- Share your templates in uni-app Community
FAQ
What to do if templates don't run properly?
- Check if plugins and components required by the template are installed
- Confirm if HBuilderX and uni-app versions match template requirements
- Review notes in template documentation
- Search or ask questions in the community
How to modify template styles?
- Find style files in the template (usually .css, .scss, or .less files)
- Modify style code as needed
- If theme variables are used, you can adjust styles uniformly by modifying theme variables
How to extend template functionality?
- Analyze template code structure to understand implementation principles
- Add new features without breaking existing functionality
- Follow template code style and naming conventions
- Test to ensure new features don't affect existing functionality