Mobile terminal - Scan code to experience wechat mini program:
PC – Applet official document: Applet official document
Next to learn, please read the table of contents:
Basic introduction to wechat small program:
1. Small program concept:
1.1: Register applets development account and obtain AppId
1.1.1: Register applets development account
1.1.2: Get the AppID of the applet
1.2: Install wechat developer tools
1.2.1: Scan code to log in to wechat developer tools
2: Configure wechat developer tools:
2.1: Set the appearance and agent
2.2: Steps for creating a small program project
2.3: Two ways to view the operation effect of the project
2.4: 5 components of the main interface of wechat Developer Tool
2.5: Basic structure of the project
2.6: Components of the applet page
3: four configuration files in the applets
3.1: Understand the four configuration files in the applets
3.2: app. Json file
3.3: project. Config. Json file
3.4: a sitemap. Json file
3.5:. Json configuration file of the page
A: Create A small program page and modify the project home page
4.1: Create a small program page
4.2: Modify the project home page
4: WXML, WXSS, and small program JS files in the three categories
4.1:WXML concepts and differences from HTML
4.2:WXSS concepts and differences from CSS
4.3: three categories of JS files in small programs
5: the host environment of wechat applets
5.1: Concept of host environment
5.2: Communication model of applets
5.3: Operating mechanism
6: component
6.1: Common view container components
6.2: Basic use of view components
6.3: Basic use of the Scrollview component
6.4: Basic use of swiper and swiper-item
6.5.1: Common properties of swiper
6.6: Text and rich-text components
6.7: Button Button component
6.8: Image Image component
Stage summary: The three main categories of applets
7: small program background management - collaborative work and release
7.1: Rights management requirements, organization structure, and development process
7.2: Two aspects of applets member management
7.3: Description of developer permissions
7.4: How to add project members and experience members
7.5: Version stage of applets
7.6: Main steps for the release of small programs online
7.7: small program code for promotion
7.8: View the operation data of small programs
Stage summary:
8: Basic syntax of applets
8.1: Applets data binding
8.1.1: Data binding principles
8.1.2: Dynamically binding properties
8.1.3: Ternary operation
8.1.4: Arithmetic operations
8.2: Event binding
8.2.1: What are events and the events commonly used in applets
8.2.2: Property list of event objects
8.2.3: The difference between Target and currentTarget
8.2.4: Syntax format for bindtap
8.2.5: Assign values to data in data in event handlers
8.2.6: Event parameter transfer
8.2.7: Syntax format of bindinput
8.2.8: Realizes data synchronization between text boxes and data
8.3: Conditional render if else
8.3.1: if... elif... else
8.3.2: If conditional rendering based on block tags
8.3.3 are included: the hidden
8.3.4: The difference between if and Hidden
8.4: the for loop
8.4.1: Basic usage of the for loop
8.4.2: Manually specify the index and variable name of the current item
8.4.3: Specifying key values improves rendering efficiency
9: wechat small program advanced
9.1: WXSS
9.1.1: WXSS and its relationship to CSS
9.1.2: RPX and how it works
9.1.3: Unit conversion between RPX and PX
9.1.4:@import Style import
9.1.5: Global style
9.1.6: Local styles
9.2: Applet global configuration
9.2.1: Common global configuration items and components of the applet window
9.2.2: Window - Sets the title of the navigation bar
9.2.3:window - Sets the background color of the navigation bar
9.2.4: Window - Sets the navigation bar title color
9.2.5: Window - Enable the drop-down refresh function globally
9.2.6: Window - Instructions on emulator issues
9.2.7:window - Sets the background color of the window for drop-down refresh
9.2.8:window - Sets the loading style for the drop-down refresh
9.2.9: Window - Set pull-up distance to bottom
9.4: tabBar
9.4.1: What is tabBar
9.4.2:tabBar has six components
9.4.3: Understand tabBar configuration items
9.4.4: Achieve the effect of tabBar case
9.4.5: Relationship between page configuration and global configuration
9.4.6: Common configuration items in page configuration
10: applets data requests
10.1: Limitations on network data requests in applets
10.2: Configuring a valid Request domain name
10.3: Initiates a GET request
10.4: Initiating a POST request
10.5: How do I request data when the page is just loaded
10.6: Request domain name verification is skipped
10.7: Instructions on cross-domain and Ajax
Based on the above knowledge, complete the local life small program case
Create the project and organize the project structure
Configure the navigation bar effect
Configure the tabBar effect
Get the data of the caroute chart
Render the wheel cast effect
Get the data of the nine squares
Render the layout of the nine grid
Realize the layout effect of the bottom picture of the home page
Stage summary:
11: wechat mini program page navigation
Small procedures to achieve page navigation in two ways
11.1: Declarative navigation
11.1: Navigate to the tabBar page
11.2: Navigate to a non-Tabbar page
11.3: Achieve backward navigation effect
11.2: Programmed navigation
11.2.1: Navigate to the tabBar page
11.2.3: Navigate to a non-Tabbar page
11.2.4: Achieve backward navigation effect
11.3.: Indicates navigation parameter transmission
11.3.1: Declarative navigation Parameter Transfer
11.3.2: Programmatic navigation parameter transfer
11.3.3: Navigation Parameter Transmission
12: small program page pull and drop down events
12.1: Refresh page data from the drop-down list
12.1.1: What is a drop-down refresh
12.1.2: Enable drop-down refresh
12.1.3: Configure the style of the drop-down refresh window
12.1.4: Listens for the page drop-down refresh event
12.1.5: Stop the drop-down refresh effect
12.2: Pull-up bottom loading data
12.2.1: What is pull-up bottoming
12.2.2: Listen for the pull-up event of the page
12.2.3: Configure the pull-up touchdown distance
[Drop down random loading color block] case
Based on the pull-up and pull-down learned above, the requested data will be pull-down refreshed and randomly generated color bars
Case Effect Demonstration
Define the method to get random color, get data
Render the UI structure and beautify the page
Pull up to get a random color when you hit bottom, pull down to load more data
Add loading prompt effect
Introduce why throttling process is needed for pull-up bottom contact
Throttling is performed on the pull-up contact bottom
Custom compilation mode
13: Applets life cycle
13.1: What is the lifecycle
13.2: Two categories of life cycles in applets
13.3: Life cycle functions
13.4: Two classifications of life cycle functions in applets
13.5: Application lifecycle functions
13.6: Page lifecycle functions
14: small program WXS
14.1: What is WXS and its application scenarios
14.2: WXS and JavaScript
14.3: Embedded WXS scripts
14.4: Define WXS scripts for outreach
14.5: Use external WXS scripts
14.6: Understand the four features of WXS
Rewrite [local life applet] case, improve
A demo of the store list page
Load the project code into wechat developer tools
Realizes the navigation jump and transmits parameters
Dynamically set the title content of the shop list page
Create a compile mode for the shop list page
Understand the API and define the required data nodes
Define the getShopList method to get the item list data
Render the UI structure of the shop list and beautify it
Display loading prompt effect
The next page of data is requested when the pull-up hits the bottom
Throttling control for pull-up bottoming events
Demonstrate and analyze data loading problems
Describes formulas for determining whether there is data on the next page
Use the formula to determine whether there is data for the next page
Enable the drop-down refresh effect for the shop list page
Implement the drop-down refresh function
Fixed an issue where the drop-down refresh window effect would not close automatically
Use WXS to handle phone numbers
Summary:
Small program basic part of the knowledge is still very much, so the article is divided into a total of 2 parts to explain, so the road is long to repair xi, mutual encouragement ha!
Next: One article master – wechat small program foundation (the second half)