微信小程序開發系列三 小程序頁面渲染

一、事件處理

// index.wxml
<view bindtap="myclick">點擊我</view>
// index.js
Page({
  myclick: function(){
    console.log("clicked")
  }
})

bind開頭的事件不會阻止事件冒泡，catch開頭的事件會阻止事件冒泡

二、更新數據

小程序在Page對象中封裝了setData函數，以key: value的形式更新數據，將this.data中的key對應的值修改爲value

三、數據綁定

{{變量}}

{{變量1 + 變量2}}

四、條件渲染

<view wx:if="{{條件}}">內容</view>

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

五、列表渲染

wx:for
默認數組的當前項的下標變量名默認爲 index，數組當前項的變量名默認爲 item
<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

使用 wx:for-item 可以指定數組當前元素的變量名，
使用 wx:for-index 可以指定數組當前下標的變量名：
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

wx:for可以循環嵌套

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    </view>
  </view>
</view>

更詳細的語法參見： https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html