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

痛定思痛。 2022-05-27 06:40 365阅读 0赞

IT实战联盟博客：[http://blog.100boot.cn ][http_blog.100boot.cn]  
![小程序.jpg][.jpg]

我们在写小程序的时候经常会遇到子页面向主页面回传数据或者普通页面跳转到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()`][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',
        })
      },

*  子页面触发事件

// 同样需要先引入WxNotificationCenter
    const 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',
        })
      },

*  子页面触发事件

// 同样需要先引入onfire
    const 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);
      },

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

\#\#\#\#更多精彩内容  
[微信小程序电商实战-入门篇][-]  
[微信小程序电商实战-首页（上）][- 1]  
[微信小程序电商实战-首页（下）][- 2]  
[微信小程序电商实战-商品详情（上）][- 3]  
[微信小程序电商实战-商品详情加入购物车（下）][- 4]  
[微信小程序电商实战-商品列表流式布局][- 5]  
[微信小程序实战篇：基于wxcharts.js绘制移动报表][wxcharts.js]

\#\#\#\#关注我们  
如果需要源码可以关注“IT实战联盟”公*众*号并留言（源码名称+邮箱），小萌看到后会联系作者发送到邮箱，也可以加入交流群和作者互撩哦~~~

IT实战联盟博客：[http://blog.100boot.cn ][http_blog.100boot.cn]

[http_blog.100boot.cn]: http://blog.100boot.cn%E2%80%8B%E2%80%8B%E2%80%8B%E2%80%8B%E2%80%8B%E2%80%8B%E2%80%8B
[.jpg]: /images/20220527/5145c2bf91314a9f89dfc4891cceef63.png
[getCurrentPages]: https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html#getCurrentPages%28%29
[WxNotificationCenter.js]: https://github.com/icindy/WxNotificationCenter
[onfire.js]: https://github.com/hustcc/onfire.js/blob/master/README_zh.md
[-]: http://www.jianshu.com/p/6e214401ffdd
[- 1]: http://www.jianshu.com/p/f490c62643d3
[- 2]: https://www.jianshu.com/p/7100a1268453
[- 3]: https://www.jianshu.com/p/6cee51acd018
[- 4]: https://www.jianshu.com/p/cbcc7a00f4a4
[- 5]: https://www.jianshu.com/p/72d57252b4ef
[wxcharts.js]: https://www.jianshu.com/p/04ddbabda874