What are the WeChat mini program instructions?

WeChat applet instructions include: 1. "wx:for" instruction, the usage method is such as "{{ index }} {{ item } }"; 2. "wx:for-item" instruction, which can specify the variable name of the current element of the array; 3. "wx:for-index" instruction, which can specify the variable name of the current subscript of the array; 4. " wx:if" instruction; 5. Data binding instructions, etc.

The operating environment of this tutorial: Windows 10 system, WeChat applet official version 8.0.25, Dell G3 computer.

What are the WeChat mini program instructions?

WeChat Mini Program: Commonly used commands/components

1. Command

1.1 wx:for command

• 1.1.1 html

1. There is a built-in index/item, the former index and the latter element

<view wx:for="{{ data_list }}">{{ index }} {{ item }} index索引 item元素 </view>

2. Modify

Use wx:for-item to specify the variable name of the current element of the array,

Use wx:for-index to specify the variable name of the current subscript of the array:

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

• 1.1.2 js

 data: {
    data_list:['大饼','洋葱']
  },

1.2 wx:if

In the frame, use wx:if="" to determine whether the code block needs to be rendered:

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

1.3 block wx:if

Because wx:if is a control attribute, it needs to be added to a label.

If you want to judge multiple component tags at once, you can use a tag to wrap multiple components, and use the wx:if control attribute above.

Note: is not a component, it is just a wrapping element that will not do any rendering on the page and only accepts control attributes

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

1.4 Data binding

• 1.4.1 html

<view>数据1：{{message}}</view>

• 1.4.2 js

Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    message:"新年快乐",
  }
)}

2. Component (label)

2.1 view---Similar to div

2.2 image---image

2.3 text-- -span

Recommended learning: "小program video tutorial"

The above is the detailed content of What are the WeChat mini program instructions?. For more information, please follow other related articles on the PHP Chinese website!