Course Introduction#
The video tutorial on building a full-stack application for cross-platform mini-programs from scratch using Vue3+Uni+Node+MySQL, organized and published by Youku IT Resource Network, takes you from beginner to advanced levels. This course systematically teaches the latest full-stack technologies of WeChat mini-programs, Vue3, Uni-APP, NodeJs, and MySQL, culminating in the development of a cross-platform, complex, complete, and already launched full-stack mini-program application, equipping you with the ability to implement commercial-grade mini-programs across platforms.
You Will Gain#
Gain over 300 new full-stack technical points
Implement 12 typical business scenarios for mini-programs
Possess real commercial-grade full-stack capabilities
Package and generate multi-platform cross-end applications
Master the design and development process of complex projects
Learn every knowledge point in plain language throughout the course
Resource Directory#
.
├── 1-Preparation - Understand the course content and have a preliminary understanding of the course/
│ └── [ 28M] 1-1 Guide
├── 2-[Introduction] Detailed explanation of WeChat mini-program concepts and directory structure - Implement the first mini-program application in configuration/
│ ├── [1.8M] 2-1 Classroom Introduction
│ ├── [1.2M] 2-2 What is a WeChat mini-program
│ ├── [4.3M] 2-3 Characteristics of WeChat mini-programs
│ ├── [2.8M] 2-4 Why learn WeChat mini-programs
│ ├── [ 23M] 2-5 Registration of WeChat mini-program account
│ ├── [ 40M] 2-6 Downloading WeChat Developer Tools and creating a project
│ ├── [ 31M] 2-7 Learning json configuration of project.config.json and project.private.config.json
│ ├── [ 57M] 2-8 json configuration - app.json
│ ├── [ 29M] 2-9 json configuration - sitemap.json
│ ├── [ 12M] 2-10 The role and use of app.js
│ ├── [5.2M] 2-11 The role and use of app.wxss
│ ├── [6.5M] 2-12 Page structure - The role of .wxml files
│ ├── [ 16M] 2-13 Page structure - The role of .wxss
│ ├── [ 12M] 2-14 Page structure - The use of .js
│ ├── [ 17M] 2-15 Page structure - The use of .json
│ └── [ 20M] 2-16 Course Summary
├── 3-[Basics] Basic syntax and commonly used components in WeChat mini-programs - The basic units that make up WeChat mini-programs/
│ ├── [1.7M] 3-1 Course Introduction
│ ├── [ 25M] 3-2 Data Binding
│ ├── [ 56M] 3-3 List Rendering
│ ├── [ 52M] 3-4 Detailed explanation of list key
│ ├── [ 37M] 3-5 Conditional Rendering and the difference with hidden property
│ ├── [3.5M] 3-6 Concept and characteristics of mini-program components
│ ├── [ 35M] 3-7 View Component - view
│ ├── [ 35M] 3-8 Text Component - text
│ ├── [ 17M] 3-9 Icon Component - icon
│ ├── [ 50M] 3-10 Button Component - button
│ ├── [ 53M] 3-11 Form Component - input
│ ├── [ 19M] 3-12 Form Component - radio
│ ├── [ 17M] 3-13 Form Component - checkbox
│ ├── [ 27M] 3-14 Form Component - textarea
│ ├── [ 13M] 3-15 Form Component - switch
│ ├── [ 26M] 3-16 Form Component - form
│ ├── [ 48M] 3-17 Form Practical - User Registration
│ ├── [ 30M] 3-18 Basic use of template
│ ├── [8.9M] 3-19 Basic use of include import
│ ├── [7.4M] 3-20 Common properties and types of component attributes
│ └── [ 13M] 3-21 Classroom Summary
├── 4-[Basics] Detailed explanation of scripts and styles in WeChat mini-programs and Flex layout - Write more colorful mini-program applications/
│ ├── [3.0M] 4-1 Course Introduction
│ ├── [8.2M] 4-2 What is wxs
│ ├── [ 28M] 4-3 Modularization of mini-programs
│ ├── [ 37M] 4-4 wxs variable declaration and two usage methods of wxs
│ ├── [ 12M] 4-5 How to use comments in wxs
│ ├── [2.0M] 4-6 Supported operator types in wxs
│ ├── [2.2M] 4-7 Supported control flow statements in wxs
│ ├── [ 15M] 4-8 Supported data types in wxs
│ ├── [8.8M] 4-9 Supported basic libraries in wxs
│ ├── [3.5M] 4-10 Basic concept of wxss
│ ├── [ 17M] 4-11 Concept and conversion rules of rpx
│ ├── [1.9M] 4-12 Supported selectors in wxss
│ ├── [ 12M] 4-13 Use of style and dynamic style
│ ├── [ 14M] 4-14 Style import in wxss
│ ├── [8.9M] 4-15 Detailed explanation of flex - concept
│ ├── [ 18M] 4-16 Two ways to enable flex layout
│ ├── [ 14M] 4-17 Set the direction of flex layout
│ ├── [ 12M] 4-18 Set whether flex layout wraps
│ ├── [7.9M] 4-19 Set both the direction and whether to wrap in flex layout
│ ├── [ 22M] 4-20 Set the distribution and alignment of flex layout
│ ├── [ 21M] 4-21 Set the alignment of child elements on the cross axis in flex layout
│ ├── [ 18M] 4-22 Set the distribution of multi-line child elements on the cross axis in flex layout
│ ├── [8.3M] 4-23 Set the order of flex child elements
│ ├── [ 15M] 4-24 Set the width expansion of flex layout child elements
│ ├── [ 13M] 4-25 Set the shrinkage of flex layout child elements
│ ├── [ 11M] 4-26 Set the base size of flex layout
│ ├── [ 41M] 4-27 Set the expansion, shrinkage, and base size of flex layout child element widths
│ ├── [ 13M] 4-28 Set the alignment of a single child element on the cross axis in flex layout
│ └── [ 28M] 4-29 Classroom Summary
├── 5-[Basics] Event system and interactive feedback in WeChat mini-programs - Ultimate interactive experience for mini-programs/
│ ├── [3.0M] 5-1 Classroom Introduction
│ ├── [5.1M] 5-2 What is an event system
│ ├── [ 18M] 5-3 Different ways to register events
│ ├── [ 26M] 5-4 Capture phase and bubble phase
│ ├── [ 23M] 5-5 Event object (Part 1)
│ ├── [ 18M] 5-7 Interactive feedback - Toast
│ ├── [ 36M] 5-8 Interactive feedback - Modal
│ ├── [ 29M] 5-9 Interactive feedback - loading
│ ├── [ 20M] 5-10 Interactive feedback - actionsheet
│ └── [ 32M] 5-11 Classroom Summary
├── 6-[Intermediate] Routing, lifecycle, and data storage in mini-programs - Build more feature-rich mini-program applications/
│ ├── [2.3M] 6-1 Classroom Introduction
│ ├── [ 26M] 6-2 Routing - navigateTo
│ ├── [ 43M] 6-3 Routing - events and url parameter passing in navigateTo
│ ├── [ 41M] 6-4 Routing - navigateBack
│ ├── [ 19M] 6-5 Routing - redirect
│ ├── [ 20M] 6-6 Routing - switchTab
│ ├── [ 13M] 6-7 Routing - reLaunch
│ ├── [4.6M] 6-8 Concept of lifecycle
│ ├── [ 80M] 6-9 App lifecycle
│ ├── [ 80M] 6-10 Page lifecycle
│ ├── [2.4M] 6-11 Concept of data storage
│ ├── [ 38M] 6-12 Global data storage (CRUD)
│ ├── [ 33M] 6-13 Page data storage (CRUD)
│ ├── [ 41M] 6-14 Cache data storage (CRUD)
│ └── [ 29M] 6-15 Classroom Summary
├── 7-[Intermediate] Encapsulation of network requests in mini-programs - An essential link for modern applications/
│ ├── @Youku IT Resource Network ukoou.com
│ ├── [2.4M] 7-1 Classroom Introduction
│ ├── [6.0M] 7-2 Concept of network requests
│ ├── [ 57M] 7-3 How to initiate network requests in mini-programs
│ ├── [4.3M] 7-4 Significance of encapsulation
│ ├── [ 39M] 7-5 Encapsulation of network requests
│ ├── [ 26M] 7-6 Encapsulation of backend interfaces
│ ├── [ 26M] 7-7 Form practical - UI construction
│ ├── [ 60M] 7-8 Form practical - Logic interface improvement
│ └── [1.5M] 7-9 Classroom Summary
├── 8-[Basics] Concepts of Vue3, creating reactive data, and dynamic page rendering - Features and basic syntax of Vue3/
│ ├── [3.2M] 8-1 Classroom Introduction
│ ├── [ 18M] 8-2 Features of Vue3
│ ├── [ 29M] 8-3 Ways to create Vue3 projects
│ ├── [ 32M] 8-4 Template syntax of Vue3
│ ├── [ 44M] 8-5 Vue3 reactive data - ref
│ ├── [ 35M] 8-6 Vue3 reactive data - reactive
│ ├── [ 35M] 8-7 Interpretation of Vue3 source code - the difference between ref and reactive
│ ├── [ 25M] 8-10 Vue3 directive v-on-
│ ├── [ 43M] 8-11 Vue3 event modifiers
│ ├── [ 39M] 8-12 Vue3 conditional rendering
│ ├── [ 72M] 8-13 Vue3 list rendering
│ ├── [ 67M] 8-14 Reactive changes in Vue3 arrays
│ └── [ 29M] 8-15 Classroom Summary
├── 9-[Introduction] Common components of Vue3, data listening, and lifecycle usage - The core of Vue3/
│ ├── [ 12M] 9-1 Classroom Introduction
│ ├── [ 50M] 9-2 Form control - input
│ ├── [ 35M] 9-3 Form control - textarea
│ ├── [ 64M] 9-4 Two-way binding v-model
│ ├── [ 31M] 9-5 Form control - radio
│ ├── [ 34M] 9-6 Form control - checkbox
│ ├── [ 34M] 9-7 Form control - select
│ ├── [ 57M] 9-8 Form modifiers
│ ├── [110M] 9-9 Computed properties - computed
│ ├── [107M] 9-10 Watchers - watch
│ ├── [ 63M] 9-11 Lifecycle - Mounting phase
│ ├── [ 51M] 9-12 Lifecycle - Updating phase
│ ├── [ 52M] 9-13 Lifecycle - Unmounting phase
│ └── [ 44M] 9-14 Classroom Summary
├── 10-[Intermediate] Component-based development and communication methods between components in Vue3 - The mainstream development model for large and complex applications/
│ ├── [2.2M] 10-1 Classroom Introduction
│ ├── [4.0M] 10-2 Concept of component-based development
│ ├── [ 32M] 10-3 Registration of global and local components
│ ├── [ 14M] 10-4 Dynamic components - component
│ ├── [ 14M] 10-5 Concept of props and data passing
│ ├── [ 13M] 10-6 Using snippet generator to generate vscode code snippets
│ ├── [ 44M] 10-7 Precautions for passing props
│ ├── [ 54M] 10-8 Validation of props
│ ├── [ 52M] 10-9 One-way data flow - Updating data in parent component
│ ├── [ 20M] 10-10 Slot - Basic use of slots
│ ├── [ 24M] 10-11 Slot - Named slots
│ ├── [ 31M] 10-12 Slot - Scoped slots
│ └── [ 29M] 10-13 Classroom Summary
├── 11-[Advanced] Routing management and state management in Vue3 - The cornerstone for building large Vue3 applications/
│ ├── [2.4M] 11-1 Classroom Introduction
│ ├── [ 52M] 11-2 Common registration methods for Vue Router
│ ├── [ 68M] 11-3 Related usage of RouterLink and RouterView in Vue Router
│ ├── [ 38M] 11-4 Nested routes in Vue Router
│ ├── [ 14M] 11-5 Sensitive mode and strict mode in Vue Router
│ ├── [ 44M] 11-6 Dynamic routes and 404 page configuration in Vue Router
│ ├── [ 42M] 11-7 Named routes and programmatic navigation in Vue Router
│ ├── [ 16M] 11-8 Two common ways to redirect in Vue Router
│ ├── [8.6M] 11-9 Concept of navigation guards in Vue Router
│ ├── [ 45M] 11-10 Detailed explanation of navigation guards in Vue Router
│ ├── [ 38M] 11-11 Detailed explanation of KeepAlive component and lifecycle during active phase
│ ├── [7.1M] 11-12 Concept of Pinia
│ ├── [ 43M] 11-13 Installation and integration of Pinia
│ ├── [ 55M] 11-14 Related usage of Pinia State
│ ├── [ 16M] 11-15 Related usage of Pinia Getters
│ ├── [ 39M] 11-16 Related usage of Pinia Actions
│ ├── [ 28M] 11-17 Related usage of Pinia Plugins
│ └── [ 40M] 11-18 Classroom Summary
├── 12-[Advanced] Concept of Uni, project creation, and the role of related files - The preferred cross-end framework/
│ ├── [2.4M] 12-1 Classroom Introduction
│ ├── [ 14M] 12-2 Concept, origin, and reasons for using uni
│ ├── [6.4M] 12-3 Language features of uni
│ ├── [ 10M] 12-4 uni compiler and runtime
│ ├── [ 50M] 12-5 Introduction to the official uni panel and using HBuilderX to create projects
│ ├── [ 45M] 12-6 Creating projects using vue-cli in uni
│ ├── [ 35M] 12-7 Differences between the two ways of creating projects in uni
│ ├── [ 29M] 12-8 The role of uni main.js
│ ├── [ 34M] 12-9 The role of uni App.vue
│ ├── [ 25M] 12-10 The role of uni manifest.json
│ ├── [ 42M] 12-11 The role of uni pages.json and configuration of code snippets
│ └── [ 11M] 12-12 Classroom Summary
├── 13-[Basics] Implementation of multiple complex cases in Uni - Deepening the mastery of Vue3 and mini-program knowledge points/
│ ├── [2.5M] 13-1 Classroom Introduction
│ ├── [ 53M] 13-2 TabBar case
│ ├── [ 22M] 13-3 Counter case (1)
│ ├── [ 29M] 13-4 Counter case (2)
│ ├── [ 36M] 13-5 Router case (1)
│ ├── [ 38M] 13-6 Router case (2)
│ ├── [ 38M] 13-7 Form case
│ ├── [ 42M] 13-8 Request case (1)
│ ├── [ 60M] 13-9 Request case (2)
│ ├── [ 59M] 13-10 List case
│ └── [5.4M] 13-11 Classroom Summary
├── 14-[Advanced] "Shared Football" project practical (frontend) - Flexibly apply the knowledge learned/
│ ├── [ 19M] 14-1 Classroom Introduction
│ ├── [ 26M] 14-2 Home page function analysis and code formatting
│ ├── [ 62M] 14-3 Home page map function construction
│ ├── [ 63M] 14-4 Home page QR code borrowing and returning and venue overview construction
│ ├── [ 52M] 14-5 Home page QR code borrowing and returning and venue overview event handling
│ ├── [ 61M] 14-6 Home page right-side icon function construction
│ ├── [ 67M] 14-7 Venue details development construction
│ ├── [ 68M] 14-8 Venue details function improvement
│ ├── [ 57M] 14-9 Customer service center page construction
│ ├── [ 38M] 14-10 Customer service center page event handling
│ ├── [ 70M] 14-11 Problem details page development
│ ├── [ 86M] 14-12 Personal center page development - Part 1
│ ├── [ 48M] 14-13 Personal center page development - Part 2
│ ├── [ 61M] 14-14 User registration and login page
│ ├── [ 37M] 14-15 My wallet page construction
│ ├── [ 53M] 14-16 Membership recharge page construction
│ ├── [ 35M] 14-17 Order list construction
│ ├── [ 24M] 14-18 Prize redemption construction
│ ├── [ 55M] 14-19 About us page construction
│ └── [5.0M] 14-20 Classroom Summary
├── 15-[Advanced] Concept of NodeJs and related usage of NPM - Building foundational skills for server-side/
│ ├── [Recognize the complete www.ukoou.com]
│ ├── [3.1M] 15-1 Classroom Introduction
│ ├── [ 15M] 15-2 Concept and role of NodeJs
│ ├── [ 13M] 15-3 Installation and initial experience of NodeJs
│ ├── [ 16M] 15-4 NodeJs REPL
│ ├── [ 53M] 15-5 NodeJs version management tools
│ ├── [ 55M] 15-6 Role and usage of Npm
│ ├── [ 50M] 15-7 Common commands of Npm and publishing Npm packages
│ ├── [ 26M] 15-8 Npm source management tool - Nrm
│ ├── [5.6M] 15-9 Introduction to the concept of modular development
│ ├── [ 70M] 15-10 CommonJs modular specification
│ ├── [ 42M] 15-11 EsModule modular specification
│ └── [ 13M] 15-12 Classroom Summary
├── 16-[Advanced] Event loop, asynchronous IO, and commonly used built-in modules in NodeJs - The core of NodeJs/
│ ├── [2.0M] 16-1 Classroom Introduction
│ ├── [ 20M] 16-2 Underlying architecture of NodeJs
│ ├── [ 60M] 16-3 Detailed explanation of NodeJs event loop
│ ├── [ 35M] 16-4 NodeJs event loop exercise questions
│ ├── [ 31M] 16-5 Introduction to NodeJs built-in module fs
│ ├── [ 47M] 16-6 Common operations of NodeJs built-in module fs
│ ├── [ 35M] 16-7 NodeJs file descriptors
│ ├── [ 37M] 16-8 Introduction to NodeJs built-in module path
│ ├── [ 69M] 16-9 Introduction to NodeJs built-in module http
│ └── [ 12M] 16-10 Classroom Summary
├── 17-[Advanced] Common frameworks of NodeJs Express and Koa - Improve NodeJs development efficiency/
│ ├── [3.5M] 17-1 Classroom Introduction
│ ├── [ 29M] 17-2 Concept and installation of Express
│ ├── [ 37M] 17-3 -1 req and res objects of Express
│ ├── [ 49M] 17-4 -2 req and res objects of Express_Sub_01
│ ├── [ 51M] 17-5 Middleware of Express
│ ├── [ 29M] 17-6 Express routing
│ ├── [ 31M] 17-7 Storage of static resources in Express
│ ├── [ 86M] 17-8 File upload in Express
│ ├── [ 31M] 17-9 Storage of static resources in Express
│ ├── [ 31M] 17-10 Logging in Express
│ ├── [ 42M] 17-11 Error handling in Express
│ ├── [ 13M] 17-12 Introduction to Koa
│ ├── [ 39M] 17-13 Request and response objects of Koa
│ ├── [ 53M] 17-14 Middleware of Koa
│ ├── [ 36M] 17-15 Routing usage of Koa
│ ├── [ 45M] 17-16 File upload in Koa
│ ├── [ 16M] 17-17 Static resources in Koa
│ ├── [ 13M] 17-18 Log collection in Koa
│ ├── [ 30M] 17-19 Error handling in Koa
│ └── [8.0M] 17-20 Classroom Summary
├── 18-[Advanced] Concept of MySQL and commonly used data types - Understanding MySQL and initial experience/
│ ├── [2.1M] 18-1 Classroom Introduction
│ ├── [8.2M] 18-2 Concept of MySQL
│ ├── [ 53M] 18-3 Installation of MySQL
│ ├── [ 15M] 18-4 Default database of MySQL and related concepts
│ ├── [ 35M] 18-5 Initial experience with MySQL cases
│ ├── [9.7M] 18-6 Classification of MySQL statements
│ ├── [ 29M] 18-7 Commonly used data types in MySQL
│ └── [ 17M] 18-8 Classroom Summary
├── 19-[Advanced] Learning and using database operations - Become a CRUD engineer/
│ ├── [1.7M] 19-1 Classroom Introduction
│ ├── [ 28M] 19-2 CRUD operations on databases
│ ├── [ 52M] 19-3 CRUD operations on tables
│ ├── [ 46M] 19-4 CRUD operations on data
│ ├── [ 37M] 19-5 Explanation of MySQL queries - 1
│ ├── [ 39M] 19-6 Explanation of MySQL queries - 2
│ ├── [ 38M] 19-7 Explanation of MySQL SQL JOIN - 1
│ ├── [ 51M] 19-8 Explanation of MySQL SQL JOIN - 2
│ ├── [ 51M] 19-9 Usage of mysql2
│ └── [5.9M] 19-10 Classroom Summary
├── 20-[Advanced] "Shared Football" project practical (backend) - Flexibly use the knowledge learned/
│ ├── [2.8M] 20-1 Classroom Introduction
│ ├── [ 71M] 20-2 Project environment setup
│ ├── [ 73M] 20-3 Venue equipment interface implementation
│ ├── [ 47M] 20-4 Detailed explanation of the login process
│ ├── [ 73M] 20-5 Registration interface implementation
│ ├── [ 38M] 20-6 -1 Login interface implementation
│ ├── [ 36M] 20-7 -2 Login interface implementation
│ ├── [ 42M] 20-8 Detailed explanation of WeChat payment process
│ ├── [ 65M] 20-9 -1 Login authentication and recharge interface implementation
│ ├── [ 61M] 20-10 -2 Login authentication and recharge interface implementation
│ ├── [ 67M] 20-11 Prize redemption interface implementation
│ ├── [ 65M] 20-12 Create order interface implementation
│ ├── [ 53M] 20-13 End order interface implementation
│ ├── [ 52M] 20-14 Order list interface implementation
│ ├── [ 46M] 20-15 Customer service question interface implementation
│ ├── [ 74M] 20-16 Avatar upload interface implementation
│ ├── [ 58M] 20-17 User avatar access implementation
│ ├── [ 29M] 20-18 Processing of interface data structure
│ └── [9.4M] 20-19 Classroom Summary
├── 21- Frontend and backend project interface debugging - Ensure smooth project deployment/
│ ├── [2.7M] 21-1 Classroom Introduction
│ ├── [ 88M] 21-2 Venue interface debugging
│ ├── [ 51M] 21-3 Customer service question debugging
│ ├── [ 84M] 21-4 Registration and login transformation
│ ├── [ 28M] 21-5 Registration and login interface debugging
│ ├── [ 53M] 21-6 Avatar upload interface debugging
│ ├── [ 30M] 21-7 Recharge interface debugging
│ ├── [ 17M] 21-8 cdkey redemption debugging
│ ├── [ 39M] 21-9 Creation and ending of orders
│ ├── [ 38M] 21-10 Order list interface debugging
│ └── [ 12M] 21-11 Classroom Summary
├── 22- Project launch and deployment - Release your application for the world to use!/
│ ├── [2.2M] 22-1 Classroom Introduction
│ ├── [6.4M] 22-2 Concept and role of cloud servers
│ ├── [ 54M] 22-3 Selection and purchase of cloud servers
│ ├── [ 70M] 22-4 centos 7.9 Project environment setup and deployment
│ ├── [ 59M] 22-5 Usage of pm2 and automated deployment
│ └── [ 16M] 22-6 Classroom Summary