微信小程序笔记（三）

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第25天，点击查看活动详情

前言

大家好呀，我是L同学。在上篇文章微信小程序笔记（二）中，我们学习了微信小程序的相关知识点，包括数据绑定、插值表达式、列表渲染、更改默认变量、性能优化、列表渲染等相关知识点。在本篇文章中，我们将学习block标签、监听事件、阻止冒泡等相关知识点。

block标签

使用 标签将控制属性（列表渲染或条件渲染的属性）从组件上分离出去。<block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。template 空标签(不渲染任何实质的内容) 用于包裹一堆标签。使用 <block> 标签的好处是提高代码可读性、可以提升某些场景下的性能、不会创建额外的组件实例。

条件渲染示例。

<!-- 使用前 -->
<view wx:if="{{ isShow }}">A</view>

<!-- 使用后 -->
<block wx:if="{{ isShow }}">
  <view>A</view>
</block>

列表渲染。

<!-- 使用前 -->
<view wx:for="{{books}}">
	{{ item.name }}
</view>

<!-- 使用后 -->
<block wx:for="{{books}}" wx:key="id">
  <view>{{ item.name }}</view>
</block>

减少判断，用于提升性能。

<!-- 使用前 -->
<view wx:if="{{isShow}}">hello</view>
<text wx:if="{{isShow}}">world</text>
<button wx:if="{{isShow}}">按钮</button>

<!-- 使用后 -->
<block wx-if="{{isShow}}">
  <view>hello</view>
  <text>world</text>
  <button>按钮</button>
</block>

监听事件

为小程序组件添加事件监听。

语法：

• bind事件名="事件监听函数名"
• bind:事件名="事件监听函数名"

编写 button 组件，并使用bind事件名 或 bind:事件名添加点击事件。

<button bindtap="tapHandler">按钮</button>
<button bind:tap="tapHandler">按钮</button>

在页面js中添加事件监听函数。

Page({
  // 事件监听函数
	tapHandler() {
  	console.log('按钮被点击啦！')
  }
})

事件冒泡以及阻止冒泡

事件冒泡就是事件从目标组件向最外层组件逐层传递。点击子组件，它的父组件也能触发点击事件。bind:事件名 语法监听的就是事件的冒泡阶段。因此事件在当前组件上处理完后，会继续向父组件传递并触发父组件上的事件监听。

在 wxml 中编写两个父子结构的组件，并添加 tap 事件监听。

    <view style="width: 300rpx; height: 300rpx; background-color: pink;" bind:tap="tapHandler1">
  外层
  <view style="width: 200rpx; height: 200rpx; background-color: teal;" bind:tap="tapHandler2">
    内层
  </view>
</view>

在页面js中编写事件监听函数。

    Page({
  tapHandler() {
    console.log('我被触摸了');
  },
  tapHandler1() {
    console.log('外层被点击了...');
  },
  tapHandler2() {
    console.log('内层被点击了...');
  }
})

阻止冒泡

阻止冒泡就是点击子组件后，事件不再继续向父组件传递的效果（即父组件的事件监听不会被触发）。

语法：

• catch事件名="事件监听函数"
• catch:事件名="事件监听函数"

在 wxml 中编写两个父子结构的组件，并使用 catch事件名 代替 bind事件名 进行事件监听。

    <view style="width: 300rpx; height: 300rpx; background-color: pink;" bind:tap="tapHandler1">
  外层
  <view style="width: 200rpx; height: 200rpx; background-color: teal;" catch:tap="tapHandler2">
    内层
  </view>
</view>

在页面js中编写事件监听函数。

    Page({
  tapHandler() {
    console.log('我被触摸了');
  },
  tapHandler1() {
    console.log('外层被点击了...');
  },
  tapHandler2() {
    console.log('内层被点击了...');
  }
})