微信小程序开发系列三 小程序页面渲染

一、事件处理

// 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