Knowledge line:

Basic knowledge of building the first small program small program code composition WXML WXSS JS small program running environment small program component small program API summary

One, small program basis

Different from traditional web pages

1. Different operating environments. Web pages run in browsers, while small programs run in wechat

2. Different development modes

Web pages are browser plus compiler development

Small program is to create and configure small program projects in wechat developer tools

3. Different apis. Applets cannot invoke apis provided by the browser BOM and DOM. But there are apis provided by wechat itself

First little program

Registration process:

1. Open the browser website: mp.weixin.qq.com/ 2. Click on the upper right corner of the official website to register. Select an account type mini program 4. Fill in the email address to activate 5. Click Activate to activate account 6. 8. Obtain the APPID of the small program (you can use the test number during the learning phase).

Wechat developer tools

Wechat developer tool is the official recommended small program development tool, it provides the following main functions: ① quickly create small program project ② code view and edit ③ small program function debugging ④ small program preview and release

Developers.weixin.qq.com/miniprogram… This is the download address, the download process and installation process are relatively simple I won’t write

Log in to create a project

1. Scan code for login.

2. Mobile login

3. This is the page after login

4. Create projects

You need to change the project name, directory, and language.

5. The creation is complete



The important thing to notice in this diagram is that

Compilation, preview, emulator. Real machine debugging, also easier to understand

Three, the composition of small program code

The project structure

1.



Specific meaning:

Pages is used to store the pages of all small programs. Utils is used to store the module of utility nature. Json applets project global configuration file ⑤ app.wxss applets project global style file ⑥ project.config.json project configuration file ⑦ Sitemap. json is used to configure whether the applets and their pages are allowed to be indexed by wechat /

2, pages inside a folder is a page, normally we write a small program page on a separate folder

Each page consists of four basic files, which are: Json file (configuration file of the current page, the appearance and performance of the configuration window, etc.) ③. WXML file (template structure file of the page) ④. WXSS file (style sheet file of the current page)

Json configuration file

Json is a data format that takes the form of configuration files in the actual development of JSON

There are four json configuration files in the applets project, which are: Json configuration file in the project root directory 2 Project.config. json configuration file in the project root directory 3 Sitemap. json configuration file in the project root directory 4. Since there is too much to cover in this article, I will write a separate article to explain each JSON configuration file in the later stage, so I will not repeat it again

WXML template

Definition:

WXML is a set of tag language for small programs, used to build small program page structure, the equivalent of HTML in web development

The difference between:

HTML (div, span, img, a) WXML (view, text, image, navigator)

<a href="#"> Hyperlink </a>" /pages/home/home"></navigator>
Copy the code

③ Provides conditional rendering similar to template syntax data binding list rendering in Vue

WXSS style,

Definition:

Similarly, WXSS is a style language for describing component styles in WXML, similar to CSS in Web development

The difference between:

CSS requires manual conversion of pixel units, such as REM WXSS in the bottom support for a new dimension unit RPX, in different sizes of the screen small program will automatically conversion

The app.wxss style in the project root directory applies to all applet pages. The.wxss style applies only to the current page

③ WXSS only supports some CSS selectors. Class and # ID class selectors and id selectors. Element union selectors, descendant selectors ::after and ::before

Applet JS

When I look at the js of small programs, I divide it into three categories:

App.js is the entry file of the whole applet project, and the whole applet is started by calling the app () function

② The.js file of a Page is the entry file of a Page, which is created and run by calling the Page() function

③ Ordinary.js files are ordinary function module files used to encapsulate common functions or attributes for page use. And before learning js function.

Four, small program running environment

Knowledge:

Communication model run mechanism component API definition

The running environment is also called the host environment

The js environment that we learned before is the browser, so you can use DOM and BOM to do things,

According to this understanding, the running environment of small programs is wechat. So the small program can no longer use the original DOM and BOM operation elements, instead, various interfaces provided by wechat. At the same time, some browsers do not have API, such as wechat scan code, wechat pay, wechat login, location and so on. Wechat has ios and Android two environments are also different.

Here focus on the mobile phone wechat environment, browser environment do not understand the students go back to fill knowledge points

Communication model of applets

Communication subject:

The main body of communication in applets is the rendering layer and the logic layer, wherein: ① WXML template and WXSS style work in the rendering layer ② JS script work in the logic layer

Communication model:

Small program of the communication model is divided into two parts: (1) rendering layer and the logical communication between | forwarded by WeChat client (2) the logic layer and the third party server communication between | forwarded by WeChat client

After receiving the data request, the wechat client interacts with and responds to the third-party server, which acts as an intermediary

The process of starting a small program:

① Download the applet code package to the local ② parse the app.json global configuration file ③ execute the app.js applet entry file and call app () to create the applet instance ④ Render the applet home page ⑤ Complete the applet start

Page rendering process

① Load the.json configuration file of the parsed Page ② load the.wxml template and.wxSS style of the Page ③ execute the.js file of the Page and call Page() to create the Page instance ④ Summary of Page rendering completion: JSON “WXML” WXSS “JS

Five, small program components

Classification of components

The components in the mini program provided by wechat are mainly divided into nine categories: ① View container ② Basic content ③ Form component ④ Navigation component ⑤ Media component ⑥ Map map component ⑦ Canvas canvas component ⑧ Open capability ⑨ barrier-free access

Common view container components

1, the view

A common view area, similar to an HTML div, is a block-level element used to achieve the layout effect of a page

2, the scroll – view

Scrollable view areas are often used for scrolling list effects

3. Swiper and swiper-item

The multicast diagram container component and the multicast diagram Item component

4. Common properties of swiper

Attribute: type; The default value; Indicator -dots: Boolean; False; Whether to display panel indicator-color: color; rgba(0, 0, 0, .3) ; Indicator active-color: color #000000; Autoplay: Boolean; false ; Interval :number; 5000; Circular: Boolean; false ; Whether to use cohesive sliding

Common base content components

Text:

A text component is an inline element similar to the SPAN tag in HTML

Rich – text:

The rich text component supports rendering HTML strings as WXML structures

Other Common Components

The button:

The button component has more functions than the BUTTON in HTML. Various functions provided by wechat (customer service, forwarding, obtaining user authorization, obtaining user information, etc.) can be called through the open-type attribute.

Image:

The default width and height of the image component are 300px and 240p respectively

navigator:

1

The page navigation component is similar to the A link in HTML

The mode attribute of the image component:

The mode attribute of the image component is used to specify the cropping and scaling mode of the image. The commonly used mode attribute values are as follows: mode: value; ScaleToFill (default) scales an image so that the width and height of the image are fully stretched to fill the image element without retaining the aspect ratio. AspectFit scales the image so that the long sides of the image are fully visible. In other words, the image can be displayed completely. AspectFill zoom mode keeps the aspect ratio of the zoom image and ensures that only the short edges of the image are fully displayed. That is, the image is usually complete only in the horizontal or vertical direction, and will be intercepted in the other direction. WidthFix zoom mode, the width, height, automatically change the original aspect ratio unchanged heightFix zoom mode, constant height, width, automatically change the original aspect ratio unchanged

Applets API

Definition:

The API in the small program is provided by the wechat environment. Through the API, it is convenient to call the capabilities provided by wechat, such as obtaining user information, local storage and payment functions.

Classification:

Event listening API

Example: wx.onWindowResize(function callback) listens for window-size changes

Synchronous API

Feature 1: all apis ending with Sync are synchronization apis feature 2: The execution result of the synchronization API can be obtained directly from the return value of the function. If the execution error occurs, an exception will be thrown. Example: wx.setStorageSync(‘ key ‘, ‘value’) Writes content to the local storage

Asynchronous API

Features: Similar to $.ajax(options) function in jQuery, need to receive the result of the call through success, fail, complete example: wx.request() initiates the network data request, receives the data through the SUCCESS callback function

Comparison:

Synchronous disadvantage single thread execution, a task is not completed after the code can not perform asynchronous advantage? The code will complete immediately, and then after the cache is retrieved, the framework will call SUCCESS again. The whole process will complete quickly, and the UI will not have a standstill effect. Use asynchronous apis when you can

The next section links to getting started wechat applet ii (page navigation, events, life cycle, WXS scripts)

Refer to the video zero basic play micro channel small program