This is the sixth day of my participation in the Junwen Challenge in August. For details, see junwen Challenge

Page file

Page constructor JS file

The page’s JS file, which is used to write the script code and lifecycle functions needed for the current page.

Page() : A Page is registered

Receives an object that is used to configure the content required for the current page.

This object has the following properties:

OnLoad: functions (lifecycle functions) that are executed when the current page is loaded onReady: functions (lifecycle functions) that are executed when the page is rendered onShow: OnHide: When a page enters the background from the foreground (life cycle function) onUnload: when a page is unloaded (life cycle function) onPullDownRefresh: When a page enters the background from the foreground (life cycle function) onHide: When a page enters the background (life cycle function) onUnload: When a page is unloaded (life cycle function) onPullDownRefresh: Event function onReachBottom: event function onShareAppMessage: Event function executed when the user clicks the share button in the upper right cornerCopy the code

Page configuration file JSON file

This file is configured for a single page similar to app.json.

Page structure file WXML file

This file is the skeleton file for the current page equivalent to a pure HTML file

Style file WXSS file

This file is only responsible for the current page style equivalent to the CSS file

component

Components are tags in HTML. Wechat encapsulates the original HTML tag once and then calls it a component.

Because of encapsulation, the original properties, methods, and JS packages will not be available here.

To render the page

Wechat applet is dual-threaded. One thread is responsible for rendering the style and the other for executing the JS script.


{{title}}

{{}} does not actually turn on a JS execution environment, but merely performs operations. So it’s a pseudo-environment.

Data driven

The content on the page, and the triggering of events, is usually data-driven.

attribute

Components have attributes, just as HTML tags have attributes.

HTML tag attribute classification:

Generic attributes: ID, class, style, hidden, data-* Non-generic attributes: a tag href resource tag SRC image tag width, height generic and non-generic attributes are called HTML standard attributes.Copy the code

Component attribute classification:

Generic properties:

Id: component ID style: component style class: component class name Hidden: whether to hide the component data-*: custom property bind-* catch-*: bind eventCopy the code

Non-generic attributes: for example, the SRC attribute of each resource tag

The event

In wechat applet, there are two kinds of events. There are generic events and there are non-generic events

General events:

Touchstart: touchmove: touchend: touchcancel: tap: touch longTap: longPress: tap: touch Animationstart: animation starts animationend: animation ends animationinteration: animation is executed multiple times, each time it triggers a transitionend: transitionend eventCopy the code

Non-generic events:

Submit event for the formCopy the code

Component is introduced

The view components

This component is equivalent to DIV.

This component has four unique properties:

Hover -class: A class that appears briefly after a click. Hover - start - time: after clicking on a hover - how long the class will be hover - stay - time: after clicking on a hover - how long is the layover class hover - stop - propagation: Whether or not to prevent bubbling is only valid for the hohover class attribute if it is the parent's hohover classCopy the code

demo:

<! --pages/view/view.wxml--><view hover-class='blue'>Ha ha<view hover-class='red' hover-start-time='1000' hover-stay-time="2000" hover-stop-propagation='true'>hello</view>
</view>
Copy the code

Click on the subcomponent

Click on the parent

Text component

This component is equivalent to SPAN.

Special properties of this component:

Space: for whitespace

Default: white space folding NBSP: set according to font emsp: one Chinese space ensp: half Chinese spaceCopy the code

Decode: Handles transfer characters

Default: no processing True: Escape characters are processedCopy the code

Selectable: Whether the text is optional

Default: optional True: OptionalCopy the code

space:

</text><view></view>
<text space="ensp">Aa hello hello</text>
<view></view>
<text space="nbsp">Aa hello hello</text>
<view></view>
<text space="emsp" selectable>Aa hello hello hello hello hello</text>
Copy the code

decode:

<view></view>
<text decode='true'>></text>
<view></view>
<text>></text>
Copy the code

rich-text

Rich text component: Allows us to render HTML code.

Attribute: Nodes indicates the meaning of a node

There are two optional attribute values:

Class: "active", style: "linheight:100px" children: "active", "linheight:100px" The children of a node are an array of one node object in an array. Type: "text", text: "Nice day today"Copy the code

The nodes value is an array:

<rich-text nodes="{{nodes}}"></rich-text>
Copy the code

Icon component

Component name: icon

What it does: Provides small ICONS

In HTML, we can use any image we want, using CSS to control styles as ICONS. But in the micro channel small program, because of the size of the small program, can not do so. So wechat made some commonly used small ICONS into components.

Properties:

Type: Indicates the icon type. Success, success_NO_CIRCLE, INFO, WARN, waiting, Cancel, Download, search, clear size: Size: pure number: English color: English colorCopy the code

demo:

<! --pages/icon/icon.wxml--><icon type='download' size="200" color="blue" ></icon>
<icon type='success'></icon>
Copy the code

Canvas component

Canvas component.

Property: Canvas-ID Indicates the ID of the tag canvas

demo:

// Get the brush
var ctx = wx.createContext("myCanvas");
// Call the method
ctx.fillRect(0.0.50.50);
wx.drawCanvas({
canvasId: "myCanvas".actions: ctx.actions
})
Copy the code

The map component

Map component: Used to display a map

Properties:

Longitude latitude scale scale or accuracy 5 to 18Copy the code

demo:

<map longitude="90.8541870117" latitude="29.1527609491" scale="10"></map>
Copy the code

Image components

Picture components:

Property: SRC Image address

Mode determines how to crop the image

The available values are:

ScaleToFill Scales an image without keeping the aspect ratio, so that the height and width of the image are fully stretched to fill the image element

Scaling aspectFit scales the image by keeping the aspect ratio so that the long side of the image is fully displayed. In other words, the image can be displayed in its entirety.

Zooming aspectFill keeps the aspect ratio of the image scaled, ensuring that only the short edges of the image are fully displayed. In other words, the image is usually complete only in the horizontal or vertical direction, the other direction will be intercepted.

Zoom widthFix width unchanged, height automatically change, keep the original image aspect ratio unchanged

Crop TOP does not scale the image, showing only the top area of the image

Crop bottom without zooming the image, only the bottom area of the image is displayed

Crop Center does not scale the image, only the middle area of the image is displayed

Crop left to show only the left side of the image without zooming

Crop right Does not scale the image, only the right area of the image is displayed

Crop top left to show only the top left area of the image without zooming

Crop top Right does not scale the image, showing only the top right area of the image

Crop bottom left to show only the bottom left of the image without zooming

Show only the bottom right area of the image without zooming

demo:

<image src="https://www.baidu.com/img/bd_logo1.png" mode="scaleToFill"></image>
<image src="https://www.baidu.com/img/bd_logo1.png" mode="aspectFill"></image>
<image src="https://www.baidu.com/img/bd_logo1.png" mode="aspectFit"></image>
Copy the code

Media components

Camera component: camera

Property: device-position: Optional front back

demo:

<camera device-position='front'></camera>
Copy the code

Audio component: audio

Properties: the SRCCopy the code

Video component: video

Properties: the SRCCopy the code

Live component: live-player

Recording component: live-pusher