[wechat applet] understand conditional rendering, list rendering and wxss template style

Author's brief introduction ： Su Liang （ Focus on web crawlers , Data analysis , On the way to learning the front end ）
Blog home page ： Su Liang .py The blog of
Series column ： Basic course of applet development
Aphorisms ： The sea is wide with fish , The sky is high and the birds are flying .
If you think the blogger's article is good , I hope you can support me for the third time in a row ！！！
Follow the likes collection

Conditions apply colours to a drawing

wx:if

In order to display different information segments in the applet , We can show by conditional rendering , If the conditions are met, the page will be displayed , If you are not satisfied, hide .
coordination wx:elif and wx：else To use

grammar ：wx:if="{ {}}"

example ：
Add three view Components

<view> male </view>
<view> Woman </view>
<view> Unknown </view>

stay js In the document data Define a data in

by wxml Three of them view Component to add conditional rendering statements

<view wx:if="{
     {gender == 1}}"> male </view>
<view wx:elif="{
     {gender == 2}}"> Woman </view>
<view wx:else> Unknown </view>

At this time, it only shows that the conditions are met in the applet gender by 1 Of view Component .

combination block Use wx:if

If you want a one-time Control the display and hiding of multiple components , You can use one block Tags wrap multiple components , And in block Use on label wx:if Control properties .

<block wx:if="{
     {gametype == 1}}">
<view> Hero alliance </view>
<view>QQ Flying car </view>
<view> Dungeons </view>
</block>

<block wx:else="{
     {gametype == 2}}">
<view> Glory of Kings </view>
<view> Protogod </view>
<view> Game for Peace </view>
</block>

<block wx:else>
<view> other </view>
</block>

block Not a component , But a container of wrapping nature , It will not be rendered on the page .

hidden Hidden elements

As we said above, you can use wx:if To show and hide elements ,hidden You can also control the display and hiding of elements .

grammar ：hidden=”{ {}}“ Condition is true Then hide , Otherwise, it will show .

<view hidden="{
     {true}}"> Su Liang </view>

wx:if and hidden The difference between

1. The operation mode is different

• wx:if With Dynamically create and remove The way of elements , Control the display and hiding of elements
• hidden With Switching styles The way ( display: none/block;), Control the display and hiding of elements
  

2. When to use ？

• Before we need Switch frequently When showing and hiding , It is recommended to use hidden
• When our conditions are complicated , It is recommended to use wx:if coordination wx:elif and wx:else To use .

The list of rendering

wx:for

adopt wx:for According to the specified array , Loop render duplicate component structures .
Use at the same time index To display the current index , Use item To display the current item

example ：

<view wx:for="{
     {arr1}}">
 This is the first {
   {index+1}} A character ,TA yes {
   {item}}.
</view>

index Index entry from 0 Start

Manually specify the index and the variable name of the current item

• Use wx:for-index You can specify the variable name of the index of the current circular item
• Use wx:for-item You can specify the variable name of the current item

example ：

<view wx:for="{
     {arr1}}" wx:for-index="num" wx:for-item="acter">
 This is the first {
   {num+1}} A character ,TA yes {
   {acter}}.
</view>

wx:key Use

When the applet realizes list rendering , The suggestion is The rendered list item specifies a unique key value , So as to improve the efficiency of rendering .
example ：
wxml：

<view wx:for="{
     {arr2}}" wx:key="id">{
   {item.name}}</view>

js：

If there is no setting in the list key value , Then we can also default index As our key value .

wxss Template style

wxss What is it?

wxss (weixin Style Sheets) It's a style language , To beautify WXML Component style , Similar to... In web development CSS.

wxss and css The relationship between

wXSS have CSS Most features , meanwhile ,WXSS Also on the CSS It has been expanded and modified , To adapt to the development of wechat applet .
And CSS comparison ,WXSS The extended features are :

• rpx Unit of measure
• @import Style import

meanwhile wxss and css There are general selectors and general style rules .

rpx Company

rpx ( responsive pixel） It is unique to wechat applet , Size unit used to solve screen adaptation .

rpx Realization principle

rpx The implementation principle of is very simple ： Given the different screen sizes of different devices , In order to realize the automatic adaptation of the screen ,rpx Put all the devices on the screen , Divide equally in width 750 Share ( namely : The total width of the current screen is 750rpx).

• On smaller devices ,1rpx The width represented is small
• On larger devices ,1rpx The width represented is large

When applets run on different devices , Meeting Automatic handle rpx The style units are converted to the corresponding pixel units to render , So as to realize screen adaptation .