Wechat small program (a) introduction

First, we used the developer tools provided by wechat public platform to create a simple small program project and observe the directory structure of the project

It is not hard to see that a typical wechat applet usually contains a main section describing the whole and a Pages folder describing the page

• Body: A program used to describe the whole, located in the root directory, usually consisting of three files

  • app.js: Logical code files for small programs that comply with JavaScript language specifications
  • app.json: common configuration file of a small program, which complies with the JSON language specification
  • app.wxss: common style file for small programs, compatible with CSS syntax specifications

• Pages: Used to describe each page in the applet, located in the Pages directory

  A page corresponds to a folder in the Pages directory, and a folder usually consists of four files

  • pageName.js: the logical code file of the page, responsible for processing the logical content of the page
  • pageName.json: configuration file of the page, used to set the content of the page window
  • pageName.wxml: the structure file of the page that describes the organization of the visual components of the page
  • pageName.wxss: a style file for a page that describes the presentation of the visual components of the page

• Other:

  • project.config.json: Save the configuration of wechat developer tools
  • Util folder: Stores some generic utility functions

The core of the small program is mainly four different formats of files, respectively: JS, JSON, WXML, WXSS

Json is the extension name of the configuration file of the small program, and the file format complies with the JSON syntax specification

Configuration files can be divided into applet global configuration file app.json and page configuration file pageName

Pages is a page configuration that specifies which pages the applet consists of

To add or delete pages in a small program, you need to modify the contents of the Pages array. Otherwise, the pages array cannot be loaded normally, and errors may be reported

TarBar is a navigation bar configuration. The tarBar object is an array that can be configured with at least 2 and at most 5 tabs. Its commonly used properties are as follows:

The common attributes of the objects in the list array are as follows:

Debug is used to enable the debug mode of the applets development tool

There are two types of visual layer files, which are.wxml files and.wxss files

. WXML file is responsible for the description of the page structure, based on XML language specification; The. WXSS file is responsible for the description of visual styles, compatible with THE CSS language specification

As mentioned earlier, WXML is based on the XML language specification, so WXML is very similar to XML in terms of syntax rules:

< tag name attribute =" attribute Value "attribute =" attribute value ">...... </ Tag name >Copy the code

See this syntax, I believe that contact HTML friends will not be unfamiliar, can be said to have the same wonderful ah

The label is the visual component in wechat applet, which is the basic component unit of the view layer of the applet. Properties control the presentation of components

We will not expand on the function and usage of each tag (visual component) here, because it is clearly written in the official wechat document

However, let’s talk about some of the features of WXML

Data binding is an important feature of WXML, passing operations from the view layer to the logical layer and rendering data from the logical layer to the view layer

We do this by using Mustache syntax (double braces) in a WXML file

[Example code]

<! --index.wxml-->
<view hidden="{{flag}}">
    Hidden
</view>
Copy the code

// index.js
Page({
    data: {flag: "false"}})Copy the code

[Display effect]

Hidden
Copy the code

Conditional rendering is implemented with the Wx :if attribute. When the value of the Wx :if binding is true, the corresponding Wx :else attribute can be added to render components

If you want to use a single judgment statement to determine whether several component tags need to be rendered, you can wrap multiple components with <block /> tags

Wx: Difference between the if property and the hidden property:

• Wx :if starts rendering and displaying components when the binding value is true
• Hidden Prerenders the component regardless of whether the binding value is true or false, if true, hides the component, if false, shows the component

[Example code]

<! --index.wxml-->
<view wx:if="{{condition == 1}}">A</view>
<view wx:elif="{{condition == 2}}">B</view>
<view wx:else>C</view>
Copy the code

// index.js
Page({
    data: {condition:0}})Copy the code

[Display effect]

C
Copy the code

WXSS (WeiXin Style Sheet) is a Style language used to describe the Style of WXML components

Currently, the selectors supported by wechat applet include. Class, #id, Element,.element, ::after, ::before

In addition, wechat small program also support! Important statement, just appear! The style of the important declaration, indicating that it has the highest priority

Base properties are properties that all components have

Note: Static styles are usually written to the class property and dynamic styles to the style property

The logical layer of the applets development framework consists of.js files in the root directory and the page folder. The file format complies with the JavaScript language specification

The logical layer is responsible for the data processing of the applet. It receives data from the view layer and returns the processed results to the view layer

Applets are registered through the App() function and must be registered in the app.js file in the root directory, and can only be registered once

It takes an object parameter, which specifies the life cycle function of the applet. Its common properties are as follows:

Applets maintain the page in the form of a stack, following the principle of last in, first out. When the page is switched, the page stack behaves as follows:

Applets are routed as follows:

The content of native components and native API is very clear and easy to understand in the official documents of wechat public platform, so I will not introduce more here

Here’s a direct link:

The primary components: developers.weixin.qq.com/miniprogram…

Native API:developers.weixin.qq.com/miniprogram…