Let’s learn a small program (1)

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

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:

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

< 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

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

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

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

Open-type Valid values:

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