Micro-channel applet written front page

Micro-channel applet written front page

WXML (WeiXin Markup Language) is a markup language designed framework, combined with the base component , the event system can be constructed structure of the page.

A. Data Binding

1. longhand

<view> {{ message }} </view>

Page({
  data: {
    message: 'Hello MINA!'
  }
})

2. Component Properties

**简直和上面没区别啊**

<view id="item-{{id}}"> </view>

Page({
  data: {
    id: 0
  }
})

3. bool type

Do not write directly checked = "false", the calculation result is a string

<checkbox checked="{{false}}"> </checkbox>

II. Operation

1. The ternary operator

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

2. arithmetic

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

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

3. Analyzing logic

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

4. String operations

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

Page({
  data:{
    name: 'MINA'
  }
})

III. Rendering list

1. wx:for

The default variable name entry for the item wx:for-itemvariable name can be specified array of the current element

Index variable name defaults index wx:for-indexcan be specified under the current underlying array variable name

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

2. wx:for

A rendering block comprising a block structure of the final multi-node does not become truly dom element

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

3. wx:key

Efficient use of

IV. Conditions rendering

1. wx:if

In the frame, using wx:if="{{condition}}"to determine whether to render the block:

<view wx:if="{{condition}}"> True </view>

Can also be used wx:elifand wx:elseto add a block else:

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

block wx:if

Because wx:ifa control attribute, it needs to be added to a label. If a plurality of components is determined to be the disposable tags, you can use a <block/>label to wrap up a plurality of components, and the use of the upper wx:ifcontrol attribute.

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

Note: <block/> not a component, it is just a wrapper element, will not do any rendering on the page, only accept control properties.

2. hidden

hiddenMuch simpler, components 始终会被渲染, 只是简单的控制显示与隐藏.

<view hidden="{{condition}}"> True </view>

Similarly wx:ifdifferent hiden control is developing, but if the rendering control whether

Therefore, if the next scene require frequent switching, with hiddenbetter, if at runtime conditions are unlikely to change the wx:ifbetter.

V. Special labels

1.text

<!-- <text> </text>  相当于span标签 -->

2.view

<!-- <view></view>    相当于div标签 -->

3.block

 <!--block标签就是只显示内容不会嵌套任何标签 -->

4. image

Pictures label, Image components default width 320px, height 240px

Note: This label is actually in the picture is a combination of web tags and background image! ! ! And does not support the wording of the previous web of background images! ! !

Property name	Types of	Defaults	Explanation
src	String		Picture address resources to support cloud file ID (2.2.3 onwards)
mode	String	'ScaleToFill'	Image cropping, scaling mode
lazy-load	Boolean	false	Pictures lazy loading. Valid only for the image in the page and scroll-view

mode Valid values:

mode 13 modes, four of which is the zoom mode, nine kinds of pattern is cut.

mode	value	Explanation
Scaling	scaleToFill	Image scaling the aspect ratio is not maintained, so that the picture to fill the width and height of an image element fully stretched
Scaling	aspectFit	Maintain aspect ratio to scale the image, the picture of the long side can be fully displayed.
Scaling	aspectFill	Maintain aspect ratio scaling images, only to ensure that the short side of the picture can be fully displayed.
Scaling	widthFix	Constant width, height changes automatically maintaining the same aspect ratio picture
Cut out	top	Not scale the image, show only pictures of the top area
Cut out	bottom	Not scale the image, show only pictures of the bottom area
Cut out	center	Not scale the image, show only pictures of the middle region
Cut out	left	Not scale the image, show only the picture on the left area
Cut out	right	Not scale the image, show only pictures of the right area
Cut out	top left	Not scale the image, show only pictures of the upper left area
Cut out	top right	Not scale the image, show only the upper-right area of ​​the picture
Cut out	bottom left	Not scale the image, show only pictures of the lower left area
Cut out	bottom right	Not scale the image, show only pictures of the lower right area

5, swiper

Carousel built micro-channel assembly of FIG.

The default width 150px height 100%

Property name	Types of	Defaults	Explanation
indicator-dots	Boolean	false	Display panel indicates whether point
indicator-color	Color	rgba (0, 0, 0, .3)	Indicating some color
indicator-active-color	Color	#000000	The currently selected color to indicate
autoplay	Boolean	false	Whether to automatically switch
interval	Number	5000	Automatic switching time interval
circular	Boolean	false	Whether to adopt the convergence slide

6.swiper-item

Slider

Default width and height are 100%

7.video

video. This component is a native component , please note the relevant limit use.

Property name	Types of	Defaults	Explanation
src	String		To play a video address resources to support cloud file ID (2.2.3 onwards)
duration	Number		When specify a long video
controls	Boolean	true	Whether to display the default playback controls (Play / Pause button, playback progress, time)
autoplay	Boolean	false	Whether Autoplay
loop	Boolean	false	Whether loop
muted	Boolean	false	Are Silent Play

<video src="{{src}}" controls></video>