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

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

我们在写小程序的时候经常会遇到子页面向主页面回传数据或者普通页面跳转到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绘制移动报表

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

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

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

微信小程序实战篇：商品属性联动选择（案例）
本期的微信小程序实战篇来做一个电商网站经常用到的-商品属性联动选择的效果,素材参考了一点点奶茶. 效果演示: 商品属性联动.gif 代码示例 1.commodity.xml <!-- <v ...
微信小程序实战篇-下拉刷新与加载更多
下拉刷新实现下拉刷新目前能想到的有两种方式调用系统的API,系统有提供下拉刷新的API接口下拉刷新API.png 监听scroll-view,自定义下拉刷新,还记得scroll-view里面有一 ...
微信小程序实战篇：实现抖音评论效果
IT实战联盟博客:http://blog.100boot.cn 我们在写小程序的时候经常会遇到弹出层的效果而现有官网提供的跳转方法多数是不支持参数传递的.本文教大家做一个抖音评论效果的小程序首先看下 ...
微信小程序实战篇-购物车
哈喽,大家好,快半个月没写了,现在提笔都有点生硬了,一直没更新的原因,一个是代码君也要上班,加上最近工作比较忙,还有就是写文章一直未被认可,所以没什么动力再创作了,那时真的坚持不下去,打算放弃了,感谢 ...
微信小程序实战篇-商品详情页（二）
今天要讲解商品详情页中sku的弹出选着框,这个涉及css动画样式,css动画是新的知识点,我们之前并没有接触过,请大家做好笔记,我们要做的效果是酱紫的~ 这个布局难点是需要绘制一个阴影背景.弹出的动画 ...
微信小程序实战篇-电商（一）
哈喽,大家好,端午节过的怎么样啊,代码君可是没休息,专心的写电商文章哦,也是蛮拼的,如果对代码君认可的话,欢迎点赞转发,你们的点赞转发是对我最大的支持!好啦,言归正传,我们今天要讲解微信小程序的实战篇 ...
前端微信小程序实战篇
电商底部导航栏的制作我想大家对电商一定不陌生,一般电商的底部导航栏有以下几个首页.分类.购物车.个人中心. app.json是用来配置page路径以及导航栏属性的,那我们要做首页.分类.购物车.个人 ...
python爬取微信小程序(实战篇)_python爬取猫眼的前100榜单并展示在微信小程序
首先分析要爬取的网页,对其结构及数据获取方式解析后,可采用正则筛选自己要的数据猫眼榜单.png import requests from requests.exceptions import Req ...
微信小程序实战通:小程序结合flask后台实现身份证智能识别
最近在工作上需要在微信上开发小程序.作为一个熟练于电脑客户端开发,网页前后台全栈开发,驱动开发,系统底层开发等多年经验的老鸟而言,刚开始接触小程序任务时居然一时有点懵逼,这是任何人面对全新领域时的正常 ...
微信小程序实战须知2：详解数据API所需网络配置域名、Https、备案、SSL
网络通信小程序请求数据API时比较头疼,不能用想当然方式进行学习. 服务器域名.IP.HTTPS 域名1 域名(Domain Name):又称网域,是由一串用点分隔的名字组成的Internet上某一 ...

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

wx.navigateTo(OBJECT)

wx.redirectTo(OBJECT)

wx.switchTab(OBJECT)

wx.navigateBack(OBJECT)

方法一、使用 globalData

方法二、使用页面路径栈

方法三、使用 WxNotificationCenter.js

使用例子

方法四、使用 onfire.js

使用例子

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

最新文章

热门文章