微信小程式指令有哪些

微信小程式指令有：1、「wx:for」指令，使用方法如「{{ index }} {{ item } }」；2、「wx:for-item」指令，指令可以指定陣列目前元素的變數名稱；3、「wx:for-index」指令，該指令可以指定陣列目前下標的變數名稱；4、「 wx:if」指令；5、資料綁定指令等。

本教學操作環境：Windows10系統、微信小程式官方版8.0.25、Dell G3電腦。

微信小程式指令有哪些？

微信小程式：常用的指令/元件

一。指令

1.1 wx:for指令

• 1.1.1 html

1. 內建了一個index/item，前者索引，後者元素

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

2. 修改

使用wx:for-item 可以指定陣列目前元素的變數名，

使用wx:for-index 可以指定陣列目前下標的變數名：

<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

在框架中，使用wx:if="" 來判斷是否需要渲染該程式碼區塊：

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

1.3 block wx:if

因為wx:if 是一個控制屬性，需要將它加入到一個標籤上。

如果要一次判斷多個元件標籤，可以使用一個 標籤將多個元件包裝起來，並在上邊使用 wx:if 控制屬性。

注意： 不是一個元件，它只是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬性

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

1.4 資料綁定

• 1.4.1 html 

#

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

• 1.4.2 js

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

二. 元件(標籤)

2.1 view---類似與div

2.2 image---image

2.3 text-- -span

推薦學習：《小程式影片教學》

#

以上是微信小程式指令有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！