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

bigdata 2018-04-13 10:13:34 ⋅ 191 阅读


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

// 同样需要先引入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 是点击事件一样,你也可以按照自己的业务或者操作来命名

更多精彩内容

微信小程序电商实战-入门篇

微信小程序电商实战-首页(上)

微信小程序电商实战-首页(下)

微信小程序电商实战-商品详情(上)

微信小程序电商实战-商品详情加入购物车(下)

微信小程序电商实战-商品列表流式布局

微信小程序实战篇:基于wxcharts.js绘制移动报表

小程序实战-幸运大转盘

微信小程序-ImagewidthFix属性和rpm尺寸的使用


关注我们

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



全部评论: 0

    我有话说:

    程序电商实战-首页(上)

    上一程序电商实战-入门 嗨,大家好!经过近两周的精心准备终于开始程序电商实战路喽。那么最终会做成什么样呢?好了,不啰嗦了 我们先看首页长什么样吧!   首页效果图

    程序实现商品数量加减

    这是一个用程序原生代码实现数量加减demo,主要是用于商品购物车或者商品详情修改数量使用

    程序商城(九):授权并实现个人中心页面页面

    实现商城的授权并获取用户信息和个人中心页面布局

    程序商城(七):动态API实现商品分类

    程序商品分类页面布局并且调用动态API获取数据并加载

    程序实战:商品属性联动选择(案例)

    本期的程序实战来做一个电商网站经常用到的-商品属性联动选择的效果,素材参考了一点点

    程序电商实战-首页(下)

    上一程序电商实战-首页(上)好了,上一期我们把首页搜索、导航栏和广告轮播给做完了,那么接下来会继续

    程序抖音实战-首页(上)

    你也可以用程序编写一个抖音

    程序电商实战-入门

    程序开发工具有新版本更新啦!开发体验更好了,接下来一起为电商程序做一下准备前期准备工作~~

    程序实战:基于wxcharts.js绘制移动报表

    程序图表插件(wx-charts)是基于canvas绘制,体积巧,支持图表类型饼图、线图、柱状图 ......

    程序实战:如何解决https域名问题 ?

    开发自己的程序绕不开https问题,为了能在程序中调用我们自己的API服务请打开看一看吧!!!

    程序抖音实战-首页(下)

    抖音程序首页动态数据获取

    程序实战实现抖音评论效果

    我们在写程序的时候经常会遇到弹出层的效果而现有官网提供的跳转方法多数是不支持参数传递的。本文教大家做一个抖音评论效果的程序......

    程序电商实战-商品详情(上)

    先看一下今天要实现程序商品详情页吧!

    程序电商实战-购物车(上)

    好久没更新程序电商实战的文章了,是因为最近一直做整体架构调整,一些准备工作也是比较耗费时间的。在这几天将会有新版的 程序电商教程推出.......

    程序电商实战-商品列表流式布局

    今天给大家分享一下程序中商品列表的流式布局方式,根据文章内容操作就可以看到效果哦~~~

    程序商城(一):https框架搭建并实现导航功能

    本文将带领大家搭建https的程序框架,并实现动态获取数据展示效果!

    程序 - iconfont 图标字体

    你还在使用图片作为程序的图标?大猪告诉大家如何在程序上使用iconfont字体图标

    程序营销大转盘(二)

    第一个版本的大转盘都是用图片做的,奖品等信息都是不无法修改的,说白了就是没啥实际用途,作者我就直接用canvas撸了一个全手工绘制的大转盘分享给大家