Quick Start

Introduction

Welcome to the Mini Program Academy development guide! This document will help you quickly get started with mini program development, whether you want to develop WeChat mini programs, Alipay mini programs, or mini programs for other platforms.

Development Environment Preparation

Before starting mini program development, you need to prepare the following environment:

1. Development Tools: Choose the appropriate development tool based on your target platform

   • WeChat Mini Program: WeChat Developer Tools
   • Alipay Mini Program: Alipay Mini Program Developer Tools
   • Baidu Smart Program: Baidu Smart Program Developer Tools
   • ByteDance Mini Program: ByteDance Mini Program Developer Tools
   • QQ Mini Program: QQ Mini Program Developer Tools
   • Kuaishou Mini Program: Kuaishou Mini Program Developer Tools

2. Editor: We recommend using VS Code with the following plugins:

   • Mini Program Development Assistant
   • ESLint
   • Prettier
   • Vetur (if using Vue)
   • TypeScript (if using TypeScript)

3. Node.js Environment: If you plan to use cross-platform frameworks (such as Taro, uni-app, etc.), you need to install Node.js (recommended version ≥ 14.0.0)

Choose Development Method

There are two main ways to develop mini programs:

1. Native Development

Develop directly using the development languages and frameworks provided by each platform. The advantage is good performance, but the disadvantage is that different code needs to be written for different platforms.

2. Cross-platform Framework Development

Use third-party frameworks for development, where one set of code can be compiled to multiple platforms. Mainstream cross-platform frameworks include:

• Taro: React-based cross-platform framework
• uni-app: Vue-based cross-platform framework
• Remax: React-based cross-platform framework
• Chameleon: Multi-platform unified framework

Create Your First Project

Native WeChat Mini Program

1. Open WeChat Developer Tools
2. Click "Project" > "New Project"
3. Select project directory, fill in AppID (you can use a test ID)
4. Select "Mini Program" project
5. Click "OK" to complete creation

Create Project Using Taro

# Install Taro CLI
npm install -g @tarojs/cli

# Create project
taro init myApp

# Enter project directory
cd myApp

# Develop WeChat Mini Program
npm run dev:weapp

# Develop Alipay Mini Program
npm run dev:alipay

# Develop Baidu Smart Program
npm run dev:swan

# Develop ByteDance Mini Program
npm run dev:tt

# Develop QQ Mini Program
npm run dev:qq

Create Project Using uni-app

# Install Vue CLI
npm install -g @vue/cli

# Create project
vue create -p dcloudio/uni-preset-vue my-project

# Enter project directory
cd my-project

# Run project
npm run dev:mp-weixin  # WeChat Mini Program
npm run dev:mp-alipay  # Alipay Mini Program
npm run dev:mp-baidu   # Baidu Smart Program
npm run dev:mp-toutiao # ByteDance Mini Program
npm run dev:mp-qq      # QQ Mini Program

Next Steps

• Learn about Basic Concepts
• Study Project Structure
• Explore Page Development
• Check out Component Development