微信小程序 页面通信

在微信小程序的世界里，页面间的通信就如同人与人之间的交流，至关重要，它能让你的小程序更加灵动，为用户提供流畅的使用体验，如何实现微信小程序页面间的通信呢？就让我来为你揭晓答案。

使用全局变量实现页面通信

在微信小程序中，可以通过设置全局变量来实现页面间的通信，在app.js中定义一个全局变量,如下：

App({
  globalData: {
    username: ''
  }
})

在需要修改全局变量的页面中,使用以下代码：

var app = getApp();
app.globalData.username = '张三';

在需要获取全局变量的页面中,同样使用以下代码：

var app = getApp();
console.log(app.globalData.username);  // 输出：张三

这样,就实现了页面间的通信。

使用事件传递实现页面通信

微信小程序提供了事件传递的机制，允许我们在页面之间传递数据,以下是一个简单的示例：

在A页面中，使用wx.navigateTo跳转到B页面,并在跳转时传递参数：

wx.navigateTo({
  url: '/pages/B/B?username=张三'
});

在B页面的onLoad函数中,获取传递过来的参数：

Page({
  onLoad: function(options) {
    console.log(options.username);  // 输出：张三
  }
})

这样,就实现了从A页面到B页面的数据传递。

使用wx.setStorageSync实现页面通信

除了以上两种方法，我们还可以使用本地存储来实现页面间的通信,以下是一个示例：

在A页面中,将数据存储到本地：

wx.setStorageSync('username', '张三');

在B页面中,从本地读取数据：

var username = wx.getStorageSync('username');
console.log(username);  // 输出：张三

这样,就通过本地存储实现了页面间的通信。

使用getApp().onPageNotFound实现页面通信

在某些场景下，我们可能需要在页面无法找到时进行一些操作，这时，可以使用getApp().onPageNotFound来实现页面通信。

App({
  onPageNotFound: function(res) {
    wx.redirectTo({
      url: '/pages/404/404'
    });
  }
})

在上面的代码中，当页面无法找到时,会自动跳转到404页面。

使用页面生命周期函数实现页面通信

微信小程序的页面生命周期函数为我们提供了丰富的接口，可以用来实现页面间的通信,以下是一个示例：

在A页面中，使用wx.navigateTo跳转到B页面,并在B页面的onShow函数中获取数据：

// A页面
wx.navigateTo({
  url: '/pages/B/B'
});
// B页面
Page({
  onShow: function() {
    var username = wx.getStorageSync('username');
    console.log(username);
  }
})

在B页面返回A页面时,可以在A页面的onShow函数中进行相关操作：

// A页面
Page({
  onShow: function() {
    // 从B页面返回时执行的操作
  }
})

通过以上五种方法，我们可以轻松实现微信小程序页面间的通信，下面,再为大家介绍一些进阶技巧。

使用消息订阅与发布实现跨页面通信

当项目较为复杂时，页面之间的通信可能需要更高级的解决方案，这时,我们可以使用消息订阅与发布机制来实现跨页面通信。

在utils目录下创建一个消息订阅与发布的实现文件message.js,如下：

// message.js
const events = {};
function on(event, handler) {
  if (!events[event]) {
    events[event] = [];
  }
  events[event].push(handler);
}
function emit(event, data) {
  const handlers = events[event];
  if (handlers) {
    handlers.forEach((handler) => handler(data));
  }
}
module.exports = {
  on,
  emit
};

在需要订阅消息的页面中，引入message.js并使用on函数：

const message = require('../../utils/message.js');
message.on('usernameChanged', (data) => {
  console.log(data);
});

在需要发布消息的页面中，同样引入message.js并使用emit函数：

const message = require('../../utils/message.js');
message.emit('usernameChanged', { username: '李四' });

这样,就实现了跨页面的通信。

掌握微信小程序页面间的通信方法，能让你的小程序更加出色，希望以上内容能对你有所帮助,让你在微信小程序的开发道路上越走越远。