Next to learn, please read the table of contents:
1: wechat applet components and styles
The third party dependent modules used are:
- Vant Downloadp USER Interface (UI) Components: A lightweight, reliable library of mini – program UI components
- Miniprogram-api-promise: wechat official documentation for API promise description: – and Github address
- MobX related packages – Global Data Sharing: MobX official documentation
1.1: Custom components
1.1.1: Prepare items to be used
1.1.2: Creating custom components
1.1.3: Locally reference components
1.1.4: Global reference components
1.1.5: Global vs. local references
1.1.6: The difference between components and pages
1.1.7: Component style isolation feature
1.1.8: A note on component style isolation
1.1.9: Modify the component's style isolation options
2: Custom components - data, methods, properties, and data listeners
2.1: Define data private data
Method: 2.2 the methods
2.3: Define the properties properties
2.4: Use the Max attribute to control the maximum value of the increment
2.5: The difference between data and properties
2.6: Use setData to modify the value of properties
2.7: What is a data listener and its syntax
2.8: Basic usage of data listeners
2.9: Changes in the properties of the listening object
3: Custom components - Data monitoring case: click the RGB button to change the box color
Create the component and define the data
Render the UI structure of the component
Define button's event handler
Listen for changes to specified properties in the object
Listen for changes to all properties in the object
What are pure data fields
Use rules
Retrofit the data listener case with pure data fields
4: Custom components - Component lifecycle and slots
The entire lifecycle functions of a component
Component's major lifecycle functions
Lifetimes node
concept
PageLifetimes node
Generates random RGB color values
What is a slot
A single slot
Enabling Multiple slots
Define and use multiple slots
5: Customized components - Parent-child component communication and behaviors
Learn three ways to communicate between parent and child components
Attributes bind
Implement the child component's count property increment by +1
Learn about the four core implementation steps for event binding
Understand the core implementation code for event binding
The count value is synchronized through event binding
Use selectComponent to get the component instance
Know what are behaviors and how they work
Create behaviors
Import and use behavior
Learn all available nodes in Behavior
Overlay and composition rules for fields with the same name
Stage summary:
6: Promise of vantUI component library and API used in applets
Import the applets you need to use
NPM support and limitations in applets
What is Vant syndrome
Install the Vant component library
Use the Vant component
Define and use CSS variables
Customize the theme style of the Vant using CSS variables
What is promisification of apPLETS
Install and build miniProgram-apI-Promise
There are three steps to Promise the API
Call the promise-enabled asynchronous API
7: wechat applet global data sharing
What is global data sharing
Global data sharing scheme in applets
Install and build mobx-related packages
Create a Store instance object
Defining computed properties
Define actions methods
Learn about the implementation of binding Store members to pages
Bind members from the Store to the page
Use members from the Store in the page
Learn the implementation ideas for binding Store members to components
Bind a member in a Store to a component
Use Store members in components
8: the subcontract
Understand the concept and benefits of subcontracting
Composition of the project before and after subcontracting
Loading rules for subcontracting
Volume limits for subcontracting
Know how to configure subcontracting
Demonstrate how to configure subcontracting on a project
Set the alias for the subcontract and view the volume of the subcontract
Packaging principles
Refer to the principle of
What is independent subcontracting and the difference between it and ordinary subcontracting
Understand the application scenarios of independent subcontracting
Transform ordinary subcontracting into independent subcontracting
Principles of reference for independent subcontracting
Introduces the concept and benefits of subcontracting pre-download
Configure predownloads for subcontracting
Subcontract pre-download limits
9: Custom tabBar
Demonstrate case effects
Learn the implementation steps for a custom tabBar
Declare configuration information for a custom tabBar in app.json
Add the tabBar code file
Render basic custom tabBar effects based on Vant components
Customize tabBar ICONS and text
Loop over the tabBar Item
Render and beautify the style of the digital logo
Render digital logos on demand
Render the value of sum in Store as a numeric logo
Implement tabBar page switch
Use global data sharing to resolve inaccurate tabBar selections
Modify the color value of the tabBar selected item text
Summary:
At this point, the small program foundation, has finished, you can start to complete their first small program!