Wechat Mini Program, a kind of small Program, English name Wechat Mini Program, is a kind of application that can be used without download and installation. It realizes the dream of application “at your fingertips”, users can open the application by scanning or searching. The hottest closed-loop ecology in the world. After the application is fully open, developers who are enterprises, other organizations or individuals can apply to register mini programs. Wechat small program, wechat subscription number, wechat service number and wechat enterprise number are parallel systems. Micro channel small program is a kind of application that can be used without downloading. It is also an innovation. After nearly two years of development, a new micro channel small program development environment and developer ecology have been constructed. WeChat applet is also China’s IT industry for many years in a truly able to affect the innovation of ordinary programmers, already has more than 1.5 million developers joined WeChat small program development, together and together we can promote the development of WeChat applet, WeChat small program applied to a population of over one million, covering more than 200 segment of the industry, The number of daily active users has reached 200 million, and wechat mini program supports subway and bus services in many cities. The development of wechat mini programs has brought more job opportunities. In 2017, the mini programs created 1.04 million jobs, and the social effect has been constantly improving. [1] On January 9, 2017, the micro channel mini program published by Zhang Xiaolong in 2017 micro Channel Open Class Pro was officially launched. In February 2018, wechat officially announced that it had permanently banned more than 2,000 micro programs involving fake goods, pornography and vulgar and illegal “cash loans”. On August 9, 2019, wechat released a public test and update announcement of new capabilities to developers. In the new version of wechat PC version, wechat applets shared in chat can be opened.

Course list

  • In this chapter, we have a preliminary understanding of what micro channel small program is. At the same time, we will download wechat small program tools, apply for appID, and do some preparation work for development. Wrap up the list for 6 sessions (35 minutes)
    • 1-1 Instructions for rerecording 2020 edition (04:55)
    • 1-2 Download applets development Tools (02:54)
    • 1-3 New Applets Project (08:04)
    • 1-4 Registration of applets appID
    • Some basic Settings of applets for new versions 1-5 (10:24)
    • Basic Units of Applets -Page Page (06:06)
  • In this chapter we will look at the directory structure of the applets official seed project and introduce the Page Page. We also need to understand the difference between page-level files and application-level files. There are 3 sections (25 minutes)
    • 2-1 Basic file types of applets (09:39)
    • 2-2 Global configuration files, Global Stylesheets, and application-level JS files for applets (07:44)
    • 2-3 Meet the Flower project we are developing (07:02)
  • Chapter 3 new Edition: RPX Responsive Units and Flex Layout In this chapter we learned how to do responsive in a small program by creating the first Welcome page. Also, we need to learn the very important layout syntax — Flex layout. This is the most popular and most useful layout scheme used in small programs. There are 10 sessions (88 minutes)
    • 3-1 Differences between JSON objects and JS objects (key) (06:13)
    • 3-2 assignments section
    • 3-3 Tips and Rules for Creating new pages (08:01)
    • 3-4 Image tags display an image (07:06)
    • 3-5 Characteristics of applets RPX Responsive Units (Very important) (16:14)
    • 3-6 Separating CSS styles into WXSS files (06:57)
    • 3-7 Learning flex layout for vertical Layout (10:46)
    • 3-8 Flex align-items (06:45)
    • 3-9 Write your own Button component (07:34)
    • The Paradox of convenience versus flexibility in Small Programs (17:29)
  • In this chapter we learn the concept of data binding for applets by writing a news reading page. We will also introduce the use of the LinUI component library. A total of 16 sections (149 minutes)
    • 4-1 Introduction to LinUI Component Library (06:52)
    • 4-2 Installing and compiling LinUI (12:01)
    • 4-3 How to Use Custom Components (13:05)
    • 4-4 L-Avatar avatar and Nickname Components (09:22)
    • 4-5 Adding a new compilation mode (07:47)
    • 4-6 Introduction to Swiper and Swiper-Item components (08:29)
    • 4-7 Swiper Component (1) Setting Multicast Content through slot (08:49)
    • 4-8 Swiper Component (3) Tips for Setting the height and width of Swiper component Content (08:40)
    • Note the difference between string and JS expressions when setting properties (important) (12:26)
    • 4-10 Good Advice for Assigning Boolean attribute Values (04:44)
    • 4-11 Other important Properties of the Swiper component (07:26)
    • 4-12 Layout with Flex (1) (09:37)
    • 4-13 Flex Layout (2) (06:49)
    • 4-14 Flex Layout (3) (10:30)
    • 4-15 Flex Layout (4) (09:56)
    • 4-16 Layout with Flex (5) (12:10)
  • In this chapter we will learn about wx:if and Wx: for rendering syntax. We also need to understand the event handling mechanism of applets. A total of 17 sections (156 minutes) close the list
    • 5-1 Use LinUI’s Icon component instead of picture Icon (11:20)
    • 5-2 Color and Size Settings for the LinUI Icon component (08:18)
    • 5-3 Flow of Small Program Development Data (1) (09:42)
    • 5-4 One-way data binding vs. Bidirectional data Binding (13:37)
    • 5-5 Data Binding and setData Functions (1) (12:03)
    • 5-6 DOM First vs. Data First (08:26)
    • 5-7 work day
    • Page. Data and this.SetData (08:33)
    • 5-9 It is recommended to pre-define the initial value of the bound data in data (06:20)
    • 5-10 Life cycle functions and special callback functions for applets (13:32)
    • 5-11 Practical Application of Data binding (07:59)
    • 5-12 Mustache Grammar Parsing (18:02)
    • 5-13 Conditional Rendering (06:59)
    • 5-14 List Rendering (part 1) (14:01)
    • 5-15 List Rendering (ii) (05:15)
    • 5-16 What is an Event (04:35)
    • 5-17 Bind to catch events and perform callbacks (06:42)
  • In this chapter we will focus on several of the routing functions of applets for jumping to pages, and we will also look at the event bubbling mechanism of applets. There are 8 sessions (65 minutes)
    • 6-1 Differences between NavigateTo and RedirectTo routing functions
    • 6-2 assignments section
    • 6-3 The difference between a Catch and a Bind event (08:49)
    • 6-4 Import/export of JS modules (require and import) _1 (13:33)
    • 6-5 Displaying imported array data with list rendering (07:55)
    • 6-6 Jump from the List page to the Article Details page (08:41)
    • 6-7 Wxkey assignment rules for list rendering (06:05)
    • 6-8 Specific Application of Event bubbling (05:12)
  • In this chapter, we mainly build the news details page, and introduce Flex’s spindle and cross axis, custom attribute data- and other technologies and knowledge in 11 sections (88 minutes)
    • 7-1 Build article Details page (1) (07:32)
    • 7-2 Building article Details Page (2) (03:58)
    • 7-3 Building article Details Page (3) (09:13)
    • 7-4 Advanced Use of Flex (1) (13:10)
    • 7-5 Flex Advanced Applications (2) Spindle and Cross Shaft (10:11)
    • 7-6 Flex Advanced Applications (3) (04:08)
    • 7-7 Component custom property Data (07:27)
    • 7-8 Naming rules for custom attribute data- (11:24)
    • Get query parameters in onLoad function of page (06:51)
    • 7-10 Loading detailed data and filling the page (09:59)
    • 7-11 Why only post- ID (03:53)
  • In this chapter, we will learn about the caching mechanism of applets and the calling scheme of asynchronous APIS by making the features of the article. At the same time, we will learn how to use async and await to simplify the calling of asynchronous apis. There are 17 sessions (123 minutes)
    • 8-1 The Significance and Function of app.js (07:04)
    • 8-2 assignments section
    • 8-3 Saving global variables in app.js (03:58)
    • 8-4 assignments section
    • Add, Delete, Modify, Check and Clear small program Cache (11:06)
    • 8-6 Options for asynchronous functions: callback functions, Promise and await (13:44)
    • (1) How do you think (10:48)
    • Article Collection (2) Dynamic Properties of JS (05:39)
    • 8-9 Switch from Favorites to Unfavorites (05:23)
    • 8-10 Initializing the Collection State (06:11)
    • 8-11 How can the cache not be overwritten? (07:41)
    • 8-12 Synchronizing article Cache Status (06:59)
    • 8-13 showToast Interface Applications (08:53)
    • 8-14 Remember the effect of setData on data attributes (06:08)
    • 8-15 showToast changed to showModal (1) (10:25)
    • 8-16 showModal callbacks and Promises (10:12)
    • 8-17 The Use of showActionSheet (08:32)
  • Chapter 9 New version: Music Playing This chapter we will only do music playing function, through music playing we focus on learning how to write complex business logic, which has a good training effect for everyone’s logical thinking ability. There are 11 sessions (90 minutes)
    • 9-1 Floating Center solution – Locating music ICONS by Left and Top (12:23)
    • 9-2 ApPLETS Music Playing API Introduction (05:24)
    • 9-3 Demo Music Playback API (11:10)
    • 9-4 Two ways to switch music player ICONS: Conditional Rendering and JS Expression (12:33)
    • 9-5 Switching between Music Playing States (08:15)
    • 9-6 API related to Background Music monitoring (04:56)
    • 9-7 State of Synchronous music master control Switch and Its own Playing light (09:46)
    • 9-8 Pause and Stop Logic for Music Control panel (04:53)
    • 9-9 Global variables fix incorrect initialization of music playback state (07:11)
    • 9-10 Analyzing a Problem that is not a Problem (03:52)
    • 9-11 Make music status independent for each article (08:43)
  • In this chapter we’ll learn how to develop custom components like LinUI. Custom components are very important for small applications, so be sure to learn. We will also introduce tabBar configuration schemes for applets. There are 11 sessions (80 minutes)
    • 10-1 Article list top rotation chart jump (04:17)
    • 10-2 Applets tabBar TAB Configuration Basics (07:14)
    • 10-3 Other configuration options for tabBar (09:29)
    • 10-4 Switching to a page with tabs requires switchTab (02:48)
    • 10-5 Introduction to Custom Components (09:13)
    • 10-6 Creating the First custom Component (07:12)
    • 10-7 Creating custom Component properties (07:40)
    • 10-8 Simplified Definitions of custom component properties (05:06)
    • 10-9 Custom properties can accept an Object (06:12)
    • 10-10 Separating articles into separate custom components (06:30)
    • 10-11 Nested references to custom components (13:58)
  • We will use componentized thinking to build movie pages. In this chapter we will learn what componentized thinking is and explore the mechanics of custom components. There are 12 sections (109 minutes)
    • Building a custom component for 11-1 Movie (09:27)
    • 11-2 Quick Score Preview with LinUI’s Scoring component (11:53)
    • 11-3 The Implementation of simple Scoring Components (Optional look) (04:20)
    • 11-4 Using Flex Space-Between layouts
    • 11-5 Adjusting the Spacing of custom components (07:04)
    • 11-6 Use of the external style class externalClasses (13:22)
    • 11-7 Trying to access server data (08:34)
    • 11-8 Loading data paging data from the server and passing in custom components (12:20)
    • 11-9 Using the ES6 arrow function to solve the problem of referring to this (08:26)
    • 11-10 Binding movie Data (1) Two Different Scoring Methods (06:55)
    • 11-11 Binding Server Movie Data (2) (07:34)
    • 11-12 Complete upcoming releases and Top250 (09:51)
  • In this chapter, we will learn how to make the movie list page and the movie search function. This chapter focuses on the layout skills of small programs and the review and practice of the previous knowledge in 11 sections (88 minutes)
    • 12-1 More parameters for Wx. request (05:59)
    • 12-2 More Movies (1) Analyzing logic for more Movie pages (10:02)
    • 12-3 More Movies (2) Loading More Data (08:53)
    • More Movies (3) The Application of Flex-wrap (08:33)
    • 12-5 More Movies (4) Flex Layout impact on Common Style Classes (06:52)
    • More Movies (5) Loading Different Types of Movie Data (08:43)
    • 12-7 Quickly Build a search bar with LinUI (07:52)
    • 12-8 Requesting search data from the server (09:45)
    • 12-9 Switching display between search results and movie data (07:56)
    • 12-10 Show searched movie data (07:31)
    • Fixed a bug between Space- Betweenelements (05:31)
  • Chapter 13 New version: Movie details and sliding loading data, drop-down refresh data This chapter we focus on the production of movie details page, movie details page is more complex, elements and CSS are more. Students need to focus on learning some CSS layout skills. We’ll also show you how to slide to load more paging data and how to refresh data. Flex layout nested applications and Scroll View component applications also need to be studied carefully… A total of 19 sections (192 minutes) unpack the list
    • 13-1 Slide up loading more data (1) onReachBottom (12:16)
    • 13-2 Loading more data (2) Showloading Prompt (06:15)
    • 13-3 Drop-down refresh data (1) (11:58)
    • 13-4 Configuration Headings and Dynamic Configuration Headings (13:19)
    • 13-5 On Component Independence (06:52)
    • 13-6 Custom Event Generation for custom Components (09:27)
    • 13-7 Getting the detail parameter of a custom component (07:19)
    • 13-8 Getting detail parameters for both custom properties and custom components (12:17)
    • 13-9 Movie Details Page (1) Get movie details data (07:45)
    • 13-10 Movie Details Page (2) Top area (10:19)
    • 13-11 Movie Details Page (3) Header Element Float Technique (10:11)
    • 13-12 Movie details page (4) Image preview effect only (10:06)
    • 13-13 Movie Details Page (5) Multiple Modes for pictures (09:00)
    • 13-14 Data Pretreatment (24:05)
    • 13-15 CSS Builds for Movie Intro (08:54)
    • 13-16 Processing the Information of the Actor (09:45)
    • 13-17 Nested Applications with Multiple Flex layouts (07:53)
    • 13-18 Adjust the CSS details of the actor information (05:09)
    • 13-19 Application and Conclusion of Scroll View Component (08:25)

This course is over