WeChat mini program, referred to as mini program, English name Mini Program Mini Program, is an application that does not require downloading and installation. It realizes the dream of "within reach" of applications. Users can scan Or search to open the app.

First, get to know the mini program

WeChat mini program, referred to as mini program, English name Mini Program Mini Program, is an application that can be used without downloading and installation. It realizes the application "within reach" Dream, users can scan or search to open the application

1-1, The advantages of WeChat applet :

1. WeChat has a large audience, and it is easier to reach products developed with WeChat;

2. Promote apps Or the cost of public accounts is too high.

3. Development and adaptation costs are low.

4. It is easy to trial and error at scale and then iterate quickly.

5. Cross-platform.

It can be seen that compared to the use of mini programs and apps: no installation, no need to register, no need to uninstall, convenient and practical

Why should we learn mini programs

After we have learned about the advantages and history of mini programs above, we will know why we should learn mini programs

• relies on the WeChat ecosystem

• has a wide range of employment

• is quick to get started

After learning the WeChat applet, it is very convenient to learn Baidu applet, Douyin applet, Alipay applet. Because these small program APIs are very similar.

Compared with Java, php, python, small programs are more suitable as an introductory language for programming

Compared with traditional front-end development , we can learn CSS and JavaScript knowledge while learning small programs

WeChat small programs are beneficial to entrepreneurship Advantages of

• The promotion cost of App development is too high
• The mobile Internet pattern has been set, and user needs are controlled by various giants. If we want to make a difference in the mobile Internet, WeChat is the inevitable backer.
• Mini programs can be used at the minimum cost. Validate your business model as quickly as possible.

WeChat Mini Program Developer Tools

If you want to do your job well, you must first sharpen your tools, so we must prepare a developer tool that suits us before developing mini programs. Here I recommend the official developer tools to everyone. The reasons are as follows: All official updates of

• will be synchronized with the official developer tools as soon as possible.

• If there are any problems, you can directly feedback them to the official

• . The official developer tools are updated in the most timely manner.

Let me teach you how to download the official website. Development tools:

official developer tool download address

https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.HTML

Personally recommend that win7 system installation version 1.05 is more suitable for

win10 system installation 1.06 is more suitable for

WeChat applet Official website development guide: https://developers.weixin.qq.com/miniprogram/dev/framework/

After downloading and installing, use WeChat to scan the QR code to log in. First, make simple settings as indicated by the arrow and confirm to exit.

Create a new small program to familiarize yourself with the operation interface and basic process.

Select your own ID account as shown in the appID, select not applicable to cloud services, and select javascript to confirm.

The basic structure of the applet project: red text represents common items

pages	is used to store all the pages of the applet
utils	is used to store tools of a module
app.js	applet project entrance File
app.json	The global configuration file of the applet project
app.wxss	The global style file of the applet project
project.config.json	The configuration of the project The file
sitemap.json	is used to configure whether the mini program and its pages are allowed to be indexed by WeChat

mini program official It is recommended that all mini program pages be placed in the pages directory and exist in separate folders. Comparison between

applet files and traditional web:

Among them, each page consists of 4 basic files, which are:

.js file	The script file of the page, which stores the page data, event processing functions, etc.
.json file	The configuration file of the current page, the appearance and performance of the configuration window, etc.
.wxml file	The template structure file of the page
.wxss file	The style sheet file of the current page

The above 4 folders exist independently and can be combined as a WeChat applet page.

.json is a data format. In actual development, json always appears in the form of a configuration file, and mini program projects are no exception. Through different .json configuration files, mini program projects can be configured at different levels. . There are 4 types of .json configuration files in the

applet project, namely: app.json configuration file in the root directory of the

1. project, project.config.json configuration file in the root directory of the
2. project, sitemap.json configuration file in the root directory of the
3. project The .json configuration file

app.json in each page folder of file

. The file

app.json is the global configuration of the current mini program, including all page paths, window appearance, interface performance, bottom tabs, etc. of the mini program. Among them, the app.json configuration content in the Demo project is as follows:

The role of the configuration item:

• pages: used to record the path of all pages of the current mini program
• window: global definition of the background color, text color, etc. of all pages of the mini program
• style: global definition The style version used by the mini program component
• sitemaplocation: used to indicate the location of sitemap.json

project.config.json file

project.config.json is the project configuration file, used to record the personalized configuration we have made for the mini program development tool. For example:

• setting saves compilation-related configurations
• projectname saves the project name
• appid saves the mini program’s account ID

sitemap.json The file

WeChat has now opened search within the mini program, and the effect is similar to the SEO of PC web pages, sitemap. The json file is used to configure whether the mini program page allows WeChat search.

When the developer allows WeChat to index, WeChat will index the page content of the mini program in the form of crawler . When the user's search keywords and the index of the page match successfully, the page of the mini program will be displayed on in search results.Key points of

: The sitemap index prompt is enabled by default. If you need to turn off the sitemap index prompt, you can configure the field checkSiteMap in the setting of the mini program project configuration file project.config.json to false

page.json configuration file

in the mini program For each page, you can use a .json file to configure the window appearance of this page. The configuration items in the page will overwrite the same configuration items in the windows of app.json.

creates a new applet page

only in app.json~pages Add the storage path of the page in , the mini program developer tool can help us automatically create the corresponding page file, as shown in the figure:

First, select app.json and enter "pages/list/list" in the "pages" directory. "Create a new folder and press "Ctrl+S" to save it. Then there will be an additional "pages/list/list" folder in the "pages" folder.

Modify the project homepage:

Operation method: Select the order of the page paths in the app.json~pages array to modify the project homepage. The applet will render the page in the first row as the project homepage, as shown in the figure ：

VXML

wxml is a set of tag languages ​​designed by the mini program framework. It is used to build the structure of the mini program page and is similar to HTML in web pages. The difference between

vxml and html:

• different tag names:

wxml: use (view, text, image, navigator) tags to represent

html: use (div, span, img, a) tags to represent

• different attribute nodes:

wxml: navigator url ="Root directory file"~/navigator

html: a herf="Hyperlink"~/a

• provides template syntax similar to that in Vue:

data binding;

list rendering;

conditional rendering;

wxss

wxss and css differences:

1, new The rps size unit

• requires manual pixel unit conversion in CSS. For example: rem
• wxss supports the new size unit

2 at the bottom layer, and provides global styles and local styles

• . The app.wxss in the root directory of the project will act on all mini program pages
• The .wxss style of the local page only takes effect on the current page

The global style .wxss

.wxss

3 in each folder, wxss only supports some CSS selectors

• .class and #id
• element
• union selector, descendant selector
• ::after and ::before and other pseudo-class selectors

.js file in the applet

It is not enough for a project to only provide interface display. In the applet, user operations are processed through .js files. For example: respond to the user's click, obtain the user's location, etc. Classification of .js files in the

applet:

• app.js: It is the entry file of the entire applet project. The entire applet is started by using App (function). The .js file of the

• page: It is the entry file of the page. It creates and runs the page

• by calling Page (function). Ordinary .js file: It is an ordinary function module file, used to encapsulate public functions or attributes for use by the page.

What is the host environment?

The host environment refers to the dependent environment necessary for program running. For example:

Andrioid system and IOS system can be called two different hosts. They have different platforms and different running environments. They are neither common nor integrated with each other and each has its own corresponding APP program platform.Contents included in the

applet hosting environment:

• communication model
• running environment and mechanism
• components in the applet
• API

1. communication model: the main body of communication in the applet is the rendering layer and the logic layer, among which:

• wxml model and wxss style work in rendering Layer;

• .js script works in the logic layer;
• wxml model and wxss style work in the rendering layer; forwarded by the WeChat client; communication between the logic layer and the third-party server is forwarded by the WeChat client;

applet starts Running mechanism:

1, startup running mechanism:

• Download the code package of the mini program to the local
• Parse the app.json global configuration file
• Execute the app.js mini program entry file, the purpose is to call the APP (function) to create the mini program instance
• rendering On the homepage of the mini program
• the mini program starts and completes the process of

2 and page rendering:

• loads the .json configuration file of the parsed page
• loads the .wxml template of the page and the wxss style
• executes the .js file of the page, with the purpose of calling Page (function) to create Page instance
• Page rendering completed

Classification of components in the

applet The components in the

applet are also provided by the host environment. Developers can quickly build a beautiful page structure based on the components. The official website divides the applet components into 9 categories , respectively:

1. view container
2. basic content
3. form component
4. media component
5. navigation component
6. map map component
7. canvas canvas component
8. open capability
9. accessible access

commonly used view container components:

view

• normal view area
• is similar to div in html, It is a block element
• is commonly used to achieve the layout effect of the page

scroll-view

• When the web page content cannot be displayed in full in the applet web page, slide the up and down scroll bar to display
• is often used to achieve the effect of the page scrolling list

swiper and swiper-item

• carousel chart The basic use of the container component and the carousel item component

view component

to achieve the fiex horizontal layout effect:

First, create "pages/fist/fist" under the app.json folder, and it will be generated under the "pages" folder. pages/fist/fist” root directory.

Then we create a new structure tag in the root directory of fist.wxml under the pages/fist/fist folder and ctrl+c to save

!--pages/fist/fist.wxml--

view class="container1 "

viewA/view

viewB In the root directory style, create

/* pages/fist/fist.wxss * /

.container1 view {

width: 00;

height: 00;

text-align: center;

line -height: 00px;

}

Then we give this group of boxes a set of background colors as a distinction.

.container1 view :nth-child() {

background-color: lightblue;

}

.container1 view :nth-child() {

background-color: lightblue;

}

. container1 view :nth-child(){

background-color: lightblue;

}

Finally, we give a box to be arranged horizontally, and the two sides are separately aligned {

display: flex;

justify-content: space- around;

}

scroll-view component The basic use of

to achieve the vertical scrolling effect:

fist.wxml in

!--pages/fist/fist.wxml--

scroll-view class="container1"

viewA/view

viewB/view

viewC/view

/scroll-view

fist.wxss in the root directory

container1 {

border: px solid red;

width: 00px; ;

}