Small program main file

  • WXML — template file
  • WXSS — Style files that can be imported directly through import
  • JS – logical script files, logical processing, network requests
  • JSON – Configuration/Settings files such as title,tabber, page registration
  • App. json — configuration file entry, global configuration of the entire applet, network timeout, bottom TAB, page path
  • App.js – you can have no content, you can declare global variables in it, and listen for the life cycle
  • App.wxss — Global configuration style file

Common commands

2.1 Template Syntax — Data binding {{}}

2.1.1 Common Writing method

<view> {{ message }} </view>
Copy the code

2.1.2 Component Types

<view id="item-{{id}}"> </view> Page({ data: { message: 'Hello MINA! '}})Copy the code

2.1.3 bool type

<checkbox checked="{{false}}"> </checkbox>
Copy the code

Don’t simply write Checked = “false”; it evaluates to a string

2. Operation

2.2.1 Ternary operation

<view hidden="{{flag ? true : false}}"> Hidden </view>
Copy the code

2.2.2 Arithmetic operation

<view> {{a + b}} + {{c}} + d </view>

Page({
 data: {
  a: 1,
  b: 2,
  c: 3
  }
})
Copy the code

2.2.3 Logical operation

<view wx:if="{{length > 5}}"> </view>
Copy the code

String operation

<view>{{"hello" + name}}</view>

Page({
 data:{
  name: 'MINA'
}
})
Copy the code

Note: Spaces between curly braces and quotes will eventually be parsed as strings

3. List rendering

3.1 wx: the for

The variable name of the item defaults to item wx: for-item specifies the variable name of the current element of the array

The default subscript variable name is index wx: for-index Specifies the variable name of the array’s current subscript

Wx :key is used to improve array rendering performance

Wx: the value of the key binding? The options are as follows

3.1.1 A string that represents a unique attribute in a loop item. Such as

List: [{id: 0, name: "Fried rice"}, {id: 1, name: "Fried noodles"}] wx: key = "id"Copy the code

3.1.2 Reserve the word *this, which means item itself. *this must represent a unique string and array.

List: [1, 2, 3, 4, 5] wx: key = "* this"Copy the code

3.2 block

Render a structure block containing multiple nodes? Blocks don’t end up being real DOM elements

<block wx:for="{{[1, 2, 3]}}" wx:key="*this" >
 <view> {{index}}: </view>
 <view> {{item}} </view>
</block>
Copy the code

4. Conditional rendering

In the framework, use wx:if=”{{condition}}” to determine whether to render the code block:

<view wx:if="{{false}}">1</view>
 <view wx:elif="{{true}}">2</view>
 <view wx:else>3</view>
Copy the code

4.2 hidden

<view hidden="{{condition}}"> True </view>
Copy the code

Similar to wx:if frequently toggled with hidden not often used with wx:if

5. Event binding applet to bind events, through the keyword bind. Different components, such as Bindtap Bindinput bindchange, support different events. For details, see the component description

5.1 WXML

<input bindinput="handleInput" />
Copy the code

5.2 page

Page({// bind event handleInput: function(e) {console.log(e); Console. log(" value changed "); }})Copy the code

5.3 Pay special attention to 5.3.1 Binding events without parameters and parentheses. The following is an error

<input bindinput="handleInput(100)" />
Copy the code

5.3.2 Event Transmission The method and value of user-defined attributes are defined by tags

<input bindinput="handleInput" data-item="100" />
Copy the code

5.3.3 Obtaining Data when an Event is triggered

HandleInput: function(e) {// {item:100} console.log(e.currenttarget. dataset) // Console. log(e.daile.value); }Copy the code

6. Styles WXSS 6.1 introduces WXSS as a style language for describing component styles of WXML.

Compared to CSS, WXSS extensions have the following features:

  • Response length unit RPX
  • Style import

6.2 Size Unit

RPX (Responsive Pixel) : ADAPTS to the screen width. Specify a screen width of 750rpx. For example, on iPhone6, the screen width is 375px and there are 750 physical pixels, then 750rpx = 375px = 750 physical pixels and 1rpx = 0.5px = 1 physical pixel

equipment RPX convert px(screen width /750) Convert PX to RPX (750/ screen width)
iPhone5 1 the RPX = 0.42 px 1 px = 2.34 the RPX
iPhone6 1 the RPX = 0.5 px 1px=2rpx
iPhone6 Plus 1 the RPX = 0.552 px 1 px = 1.81 the RPX

Suggestion: Designers can use iPhone6 as the standard for visual draft when developing wechat mini programs.

2. Calculate the scale 750rpx = pageWidth px, because 1px=750rpx/pageWidth 3. In less file, just put px =>750/pageWidth RPX in the design.

6.3 Style Import WXSS directly supports the style import function. It can also be used with imports in less. Use the @import statement to import an external stylesheet, and only relative paths are supported.

/** common.wxss **/
.small-p {
 padding:5px;
}
Copy the code
/** app.wxss **/
@import "common.wxss";
.middle-p {
 padding:15px;
}
Copy the code

6.4 Selectors in particular note that applets do not support wildcards * so the following code is invalid!

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
Copy the code

Currently supported selectors are:

The selector The sample The sample description
.class .intro Select all components that have class=intro
#id #firstname Select the component that has id= firstName
element view Select all views? component
element,element view,checkbox Select view components for all documents and all checkbox components
nth-child(n) view:nth-child(n) Select a label for an index
::after view::after Insert content after the View component
::before view::before Insert content in front of the View component

7. Common components

view,text,button,image,navigator,icon,swiper,radio,checkbox,rich- text

7.1 View replaces original DIV tag

<view hover-class="h-class">Copy the code

7.2 Text 1. Text labels 2. Only nested text 3. Spaces and carriage returns can be encoded

The property name type The default value instructions
selectable Boolean false Whether text is optional
decode Boolean false Whether the decoding 
< text selectable = "{{false}}" decode = "{{false}}" > general & have spent Tong < / text >Copy the code

7.3 Image 1. Image label. The default width of image component is 320px and the default height is 240px

The property name type The default value instructions
src String Image resource address
mode String scaleToFill Picture cropping, zoom mode
lazy-load Boolean false Lazy loading of images

Valid values of mode: Mode has 13 modes, 4 of which are scale mode and 9 of which are cropping mode.

model value instructions
The zoom scaleToFill Scale the image without maintaining aspect ratio, so that the width and height of the image are completely stretched to fill the image element
The zoom aspectFit Maintain aspect ratio to scale the image so that the long sides of the image are fully displayed
The zoom aspectFill Keep aspect ratio zooming in and out of the image so that only the short edges of the image are fully visible.
The zoom widthFix The width is unchanged, and the height changes automatically, keeping the width to height ratio unchanged
tailoring top Show only the top area of the image without zooming
tailoring bottom Shows only the bottom area of the image without zooming
tailoring center Shows only the middle area of the image without zooming
tailoring left Shows only the left side of the image without zooming
tailoring right Shows only the right side of the image without zooming
tailoring top left Shows only the upper left side of the image without scaling
tailoring top right Shows only the upper right side of the image without zooming
tailoring bottom left Shows only the lower left area of the image without zooming
tailoring bottom right Shows only the lower right area of the image without zooming

7.4 Swiper The default width and height of the built-in wechat rote map component are 100% and 150px

The property name type The default value instructions
indicator-dots Boolean false Whether to display panel indicator points
indicator-color Color Rgba (0, 0, 3) Indicator color
indicator-active-color Color # 000000 The color of the currently selected indicator
autoplay Boolean false Whether to switch automatically
interval Number 5000 Auto switch time interval
circular Boolean false Whether to cycle round

7.4.1 Slider View Container -swiper 7.4.2 Slider -swiper-item Default width and height are 100%

8. The navigator component is similar to a hyperlink TAB

The property name type The default value instructions
target String self The target on which the jump occurs defaults to the current applet, optional self/miniProgram
url String Jump links within the current applet
open-type String navigate Jump way

Open-type Valid values:

value instructions
navigate Leave the current page and jump to a page in the app, but not to the Tabbar page
redirect Close the current page to go to a page in the application, but the Tabbar page is not allowed to go to
switchTab Jump to the tabBar page and close all other non-Tabbar pages
reLaunch Close all pages and open to a page within the app
navigateBack Close the current page and return to the previous page or multi-level page. GetCurrentPages () gets the current page stack and determines how many layers you need to return
exit Exit the miniProgram, effective when target=miniProgram

9. Rich-text tag, which can parse a string into? Corresponding tag, similar? The vue? V v- -l HTML function