600字范文 > 微信小程序实战篇：小程序之页面数据传递

微信小程序实战篇：小程序之页面数据传递

时间：2024-02-15 05:37:45

相关推荐

微信小程序实战篇：小程序之页面数据传递

IT实战联盟博客：

我们在写小程序的时候经常会遇到子页面向主页面回传数据或者普通页面跳转到tabBar 页面携带数据，而现有官网提供的跳转方法多数是不支持参数传递的。

下面写了四种方法大家根据自己的实际场景来选择使用哪种

首先大概讲下小程序各个页面跳转的一些差别和注意事项

wx.navigateTo(OBJECT)

可以传递参数会存入页面路径栈(目前页面路径最多只能十层)可以通过 navigateBack 返回不能跳转到带 tabBar 页面

wx.navigateTo({url: 'test?key=value&key2=value2'})

wx.redirectTo(OBJECT)

可以传递参数不会存入页面路径栈不能通过 navigateBack 返回不能跳转到带 tabBar 页面

wx.redirectTo({url: 'test?key=value&key2=value2'})

wx.switchTab(OBJECT)

不可以传递参数不会存入页面路径栈不可以通过 navigateBack 返回只跳转到带 tabBar 页面并关闭其他所有非 tabBar 页面

{"tabBar": {"list": [{"pagePath": "index","text": "首页"},{"pagePath": "other","text": "其他"}]}wx.switchTab({url: '/index'})

tabBar 最少要有二个菜单

wx.navigateBack(OBJECT)

关闭当前页面，返回上一页面或多级页面。可通过getCurrentPages()获取当前的页面栈，决定需要返回几层。

不可以传递参数返回上一页面或多级页面

wx.navigateBack({delta: 2})

delta 参数: 返回的页面数，如果 delta 大于现有页面数，则返回到首页。

方法一、使用 globalData

主页面最上面引入app

const app = getApp();

主页面使用onShow接收参数

/*** 生命周期函数--监听页面显示*/onShow: function () {var country= app.globalData.country;this.setData({country: country})},

子页面引入app

const app = getApp();

子页面选择完设置参数

app.globalData.country= country;

子页面切换到 tabBar 页面或者使用 navigateBack 返回

wx.switchTab({url: 'index',})

方法二、使用页面路径栈

子页面直接通过页面路径栈找到主页面并设置数据

var pages = getCurrentPages();var currPage = pages[pages.length - 1]; //当前页面var prevPage = pages[pages.length - 2]; //上一个页面//直接调用上一个页面的setData()方法，把数据存到上一个页面中去prevPage.setData({country: { id: 1, name: "中国"}})

方法三、使用 WxNotificationCenter.js

微信小程序通知广播模式类,降低小程序开发的耦合度

使用例子

主页面注册事件

// 引入WxNotificationCenter 工具const WxNotificationCenter = require("../../utils/WxNotificationCenter.js");// 回调函数传值onPickerCountry: function (country) {this.setData({country: country});},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {WxNotificationCenter.addNotification("testNotificationName", this.onPickerCountry, this);},// 跳转到子页面pickerCountry: function(){wx.navigateTo({url: 'b',})},

子页面触发事件

// 同样需要先引入WxNotificationCenterconst WxNotificationCenter = require("../../utils/WxNotificationCenter.js");// 触发事件，回传数据bindPickerChange: function (e) {var index = e.detail.value;var country = this.data.countries[index];this.setData({ country: country})console.log('picker发送选择改变，携带值为', index)console.log('picker发送选择改变，携带值为', country.name)// 回传数据WxNotificationCenter.postNotificationName("testNotificationName", country);},

注意这里面的 testNotificationName 是一个标识，类似click 是点击事件一样，你也可以按照自己的业务或者操作来命名

方法四、使用 onfire.js

是一个很简单的事件分发的Javascript库（仅仅 0.9kb），简洁实用。

使用例子

主页面注册事件

// 引入bonfire 工具const onfire = require("../../utils/onfire.js");// 回调函数传值onPickerCountry: function (country) {this.setData({country: country});},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var eventObj = onfire.on('eventName', this.onPickerCountry);},// 跳转到子页面pickerCountry: function(){wx.navigateTo({url: 'b',})},

子页面触发事件

// 同样需要先引入onfireconst onfire = require("../../utils/onfire.js");// 触发事件，回传数据bindPickerChange: function (e) {var index = e.detail.value;var country = this.data.countries[index];this.setData({ country: country})console.log('picker发送选择改变，携带值为', index)console.log('picker发送选择改变，携带值为', country.name)// 回传数据onfire.fire('eventName', country);},