小程序 页面通信

在移动互联网时代,小程序以其便捷、易用、触达率高等特点，深受广大开发者与用户的喜爱，而对于小程序开发者来说，掌握页面通信技巧至关重要，就让我来为大家详细解析一下小程序页面通信的奥秘。

事件传递：掌握基础，轻松上手

在小程序中,页面之间的通信主要通过事件传递来实现，事件传递分为两种：冒泡事件和非冒泡事件，冒泡事件指的是事件从触发开始，逐级向上传递至父级组件；非冒泡事件则不会向上传递。

冒泡事件

冒泡事件的使用非常简单,只需在子组件中触发事件，并在父组件中监听该事件即可。

<!-- 子组件 -->
<view bindtap="childTap">点击我</view>
<!-- 父组件 -->
<view bindtap="parentTap">
    <view>父组件内容</view>
    <child-component></child-component>
</view>

在子组件的JS文件中：

Page({
    childTap: function() {
        // 触发事件，传递参数
        var myEventDetail = {msg: 'Hello, parent!'} // detail对象，提供给事件监听函数
        this.triggerEvent('parentTap', myEventDetail)
    }
})

在父组件的JS文件中：

Page({
    parentTap: function(e) {
        // 接收事件参数
        console.log(e.detail.msg) // 输出：Hello, parent!
    }
})

非冒泡事件

非冒泡事件则需要在子组件中使用catch关键字来阻止事件冒泡。

<!-- 子组件 -->
<view catchtap="childTap">点击我</view>

这样,点击子组件时，事件就不会传递到父组件了。

全局事件管理：灵活调度，轻松应对复杂场景

除了事件传递,小程序还提供了全局事件管理机制，通过全局事件管理，我们可以在任意页面监听和触发事件，实现跨页面通信。

监听全局事件

在APP.js中，我们可以使用getApp().on方法来监听全局事件：

// APP.js
App({
    onLaunch: function() {
        // 监听全局事件
        getApp().on('globalEvent', function(data) {
            console.log(data)
        })
    }
})

触发全局事件

在任意页面,我们可以使用getApp().trigger方法来触发全局事件：

// 页面JS
Page({
    onTap: function() {
        // 触发全局事件，传递参数
        getApp().trigger('globalEvent', {msg: 'Hello, global!'})
    }
})

页面间通信：多样化方法，满足不同需求

在实际开发中,我们常常需要在不同页面之间进行通信，以下几种方法可以帮助我们实现这一需求：

使用全局变量

在APP.js中定义全局变量，然后在各个页面中修改和访问该变量。

// APP.js
App({
    globalData: {
        userInfo: null
    }
})

在页面中访问和修改全局变量：

// 页面JS
Page({
    onLoad: function() {
        // 获取全局变量
        var userInfo = getApp().globalData.userInfo;
        // 修改全局变量
        getApp().globalData.userInfo = {name: 'John'};
    }
})

使用页面栈

小程序提供了页面栈的概念,我们可以通过getCurrentPages()方法获取当前页面栈，然后访问和修改页面数据。

// 获取当前页面栈
var pages = getCurrentPages();
// 获取上一个页面
var prevPage = pages[pages.length - 2];
// 修改上一个页面的数据
prevPage.setData({key: value});

使用事件通知

通过在页面A中触发事件,然后在页面B中监听该事件，实现页面间的通信。

便是小程序页面通信的详细介绍,掌握了这些技巧，相信你在开发过程中会得心应手，游刃有余，让我们一起探索小程序的奥秘，创造出更多优秀的应用吧！