小程序面试题 | 08.精选小程序面试题

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

小程序中的事件系统是如何工作的？

小程序中的事件系统是基于 HTML 的事件模型，并进行了一些适配和扩展。

小程序中的事件系统主要包括以下几个关键部分：

1. 事件冒泡：小程序中的事件会按照 DOM 树的结构从子元素向父元素冒泡。这意味着如果一个子元素触发了一个事件，该事件会依次传递给父元素，直到到达根元素。

2. 事件捕获：除了事件冒泡，小程序还支持事件捕获。事件捕获的过程与事件冒泡相反，它从根元素开始，依次向子元素传递事件。

3. 事件处理程序：你可以在小程序的页面元素上使用 bind、catch 等方法来添加事件处理程序。这些方法接受一个事件类型和一个回调函数作为参数。当指定类型的事件被触发时，相应的回调函数将会被调用。

4. 事件对象：每个事件都包含一个事件对象，它包含了与事件相关的信息，如事件类型、事件目标、事件冒泡阶段等。你可以通过事件对象获取这些信息，并在事件处理程序中进行相应的操作。

5. 自定义事件：小程序还支持自定义事件。你可以通过 emit 方法在组件中触发自定义事件，并在其他组件或页面中通过 on 方法监听和处理这些自定义事件。

通过小程序的事件系统，你可以在页面元素上监听各种事件，并在事件被触发时执行相应的逻辑。这使得你能够构建交互性强、响应式的小程序界面。

如何在小程序中使用自定义事件？

在小程序中使用自定义事件可以实现页面之间的通信和数据传递，具体步骤如下：

1. 在需要被传递数据的页面定义事件：在需要被传递数据的页面中定义一个自定义事件，并通过this.triggerEvent()方法触发该事件，并将需要传递的数据通过参数传入方法中。

Component({
  methods: {
    onTap: function() {
      var data = "需要传递的数据";
      this.triggerEvent('myevent', data);
    }
  }
})

2. 在需要接收数据的页面监听事件：在需要接收传递数据的页面中监听该自定义事件，并在监听函数中获取数据。

Page({
  data: {
    receivedData: ''
  },
  onLoad: function() {
    this.onMyEvent = this.onMyEvent.bind(this);
    this.selectComponent("#component").on('myevent', this.onMyEvent);
  },
  onMyEvent: function(event) {
    console.log(event.detail); // 输出需要被传递的数据
    this.setData({
      receivedData: event.detail
    })
  }
})

3. 触发自定义事件并传递数据：在被传递数据的页面中调用该自定义事件的触发函数，从而触发该事件并在需要接收数据的页面中传递数据。

onTap: function () {
  var data = "需要传递的数据";
  this.triggerEvent('myevent', data);
}

通过上述方法，你可以在小程序中实现自定义事件的使用，从而实现页面之间的通信和数据传递。需要注意的是，在实际应用中，开发者需要根据具体场景选择正确的事件传递方式，并确保传递的数据量不要太大，以防止影响程序性能。

如何在小程序中传递复杂的数据结构？

在小程序中，你可以通过自定义事件来传递复杂的数据结构。自定义事件可以携带任意类型的数据作为其参数。

以下是一个示例，展示如何在小程序中传递一个包含多个属性的对象作为自定义事件的参数：

1. 在发送数据的组件中触发自定义事件，并将复杂的数据结构作为参数传递给事件。

Component({
  methods: {
    triggerCustomEvent(data) {
      // 触发自定义事件，并传递数据对象
      this.triggerEvent('customEvent', data);
    }
  }
})

2. 在接收数据的组件中监听自定义事件，并获取传递的数据结构。

Component({
  methods: {
    onCustomEvent(event) {
      const data = event.detail;
      // 在这里处理接收到的数据
    }
  }
})

通过上述方式，你可以在小程序中传递复杂的数据结构，如对象、数组等。在接收方的事件处理函数中，可以通过 event.detail 获取传递的数据，并进行相应的处理。

在小程序中使用自定义事件有什么限制吗？

在小程序中使用自定义事件有以下限制：

• 默认情况下，自定义事件只能在引用了该自定义组件的组件（相当于是父组件）中通过该自定义组件上绑定的监听函数监听到，不能再在父组件的父组件中监听到该事件，也不能在该父组件中其他的组件或者标签中监听到。
• 如果自定义组件设置了bubbles: true，那么父组件中与该自定义组件有包裹关系的组件或者普通标签可以监听到该自定义事件，即<子component>可以监听到。
• 不加参数的话，自定义事件只能在自定义组件行间进行监听，不能传给父组件中的兄弟标签或者组件上。

如果你需要在小程序中使用自定义事件，建议你仔细了解相关的限制和用法，以确保你的代码能够正常工作。