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

落日映苍穹つ 2023-06-29 12:59 91阅读 0赞

# 一、事件处理 #

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

# 四、条件渲染 #

# 五、列表渲染 #

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可以循环嵌套

更详细的语法参见： [https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html][https_developers.weixin.qq.com_miniprogram_dev_reference_wxml_list.html]

[https_developers.weixin.qq.com_miniprogram_dev_reference_wxml_list.html]: https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html