同学们大家好,我是小伊同学,上一节课我们讲解了全局数据的读写方法,那么在页面间同样需要数据交互,今天我们就来学习这部分内容。

在微信小程序中,我们常常需要将数据在页面之间进行传递,比如用户的身份信息,在不同页面的接口中都需要这个参数,服务端通过这个参数来判断是哪个用户请求了服务。因此,数据在页面之间的传递在小程序开发中也是必不可少的。

页面间数据传递主要有两种方式,第一种,通过页面跳转过程中携带参数,另一种方式是将数据保存在全局数据中,每个页面再从全局数据中读取。在本小程序中,我们主要使用了第二种,因此我们将讲解第二种方式,对于第一种同学们可以通过微信开发者文档进行学习。

具体来说,我们可以通过URL传递参数。在原页面中,js文件中调用API进行跳转时在URL路径结尾后带参数。参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔;如 "path?key=value&key2=value2" 。

在打开的新页面中,js文件中onLoad函数接收参数中含有传递过来的数据。例如这里的示例,我们已经学过redirectTo是页面跳转的api,当我们执行后,在新页面就可以收到id变量,由于字符串可以拼接,我们可以在左边写成id=然后引号结束加号加上变量值。

其次,可以通过页面间事件通信通道(EventChannel)传递参数

在原页面中,js文件中调用API进行跳转时在success回调函数中向被打开页面传送数据。在打开的新页面中,js文件中onLoad函数持续监听事件获取页面传递参数。同样是传递id参数,我们分别拷贝使用这两段代码打开事件通信通道即可。

下面我们来比较一下这几种方式。URL传递参数,只能从在A页面打开B页面时,从A页面向B页面传递参数。事件通信通道(EventChannel)传递参数,在A页面打开B页面时,可以从A页面向B页面传递参数,也可以同时从B页面向A页面传递参数(我们刚才只介绍了前者,后者给大家作为作业自学)。

这两种方式通常用于传递简单数据,如标志信息、id信息和字符串等,使用时需要依赖路由API。而全局数据交互:不介意页面的打开顺序,通常用于传递重要共享数据,该数据往往在多个页面都需要而不仅仅限于两个页面之间,使用时需要使用getApp()。

日拱一卒,功不唐捐。涓流所积,终成沧海。

想看视频版?

关注公号“微程序学堂”,我们的视频教程即将上线

如果你自己写了好文章想投稿

请联系我们

页面url带参数_微信小程序云开发教程微信小程序的JS高级页面间数据传递相关推荐

  1. uniapp同步获取用户信息_微信小程序云开发教程微信小程序的API入门获取用户身份信息系列API...

    同学们大家好,我是小伊同学,上一节我们介绍了一些常用API,今天我们接着来学习一组API,那就是获取用户身份信息的API. 在微信小程序中,我们往往需要获取用户的身份信息,比如昵称.头像.性别.地区等 ...

  2. 微信小程序云开发教程-微信小程序框架的介绍

    同学们大家好,我是小伊同学,今天我们来学习微信小程序框架. 微信小程序实质上是一款基于web技术的应用程序,他和我们平常所接触到的前端网页是大同小异的.相同点在于他们使用的开发语言,代码结构以及代码的 ...

  3. ❤️微信小程序 云开发 教程合集(视频+图文)免费❤️

    一.视频版 微信小程序云开发视频教程上线啦 二.图文版 (1)预备知识 1. 怎么注册开通个人微信小程序 2. 微信小程序云开发教程-互联网软件的运作模式 3.微信小程序云开发教程-云开发对微信小程序 ...

  4. 微信小程序云开发成绩查询小程序的制作过程。

    微信小程序云开发成绩查询小程序的制作过程. 如果觉得我讲的好可以点个关注. 明确自己的目的,到底要做一个怎么样的小程序. 我先上效果图: 确定后就可以开始自己布局.主要是用css 1.先看首页,首页主 ...

  5. 基于微信小程序云开发的投票小程序源码,图文投票微信小程序源码

    功能介绍 投票活动十分火,商家,企业,机构偶尔都会来一场投票活动评选,本小程序支持图文投票,简单方便.随时随地完成投票,可以方便设定投票模式(按天按全程,投票数限定). 本代码前后端完整代码包投票列表 ...

  6. 小程序云开发教程七:贴子的详情及评论功能

    我们先看看界面: 我们如果要实现评论功能, 先看一下总的数据结构: 那么需要什么参数呢? 参数如下 comment: 评论内容username: 用户名time: 评论时间userId: 用户idid ...

  7. 小程序云开发实现微信支付,不需要搭建服务器

    一.开发微信支付功能一定要架设服务器吗? 2019年的最后一天,舍得叔叔沉浸在探索的兴奋中,验证了微信小程序云开发也能优雅实现微信支付!小程序的目标是建立一个"serverless" ...

  8. 微信小程序云开发-树洞小程序Treehole(介绍)

    记录一款基于云开发的微信小程序. 树洞,顾名思义是作为匿名吐槽的平台,主要功能可以参照微信朋友圈的形式,不过采取的是匿名的方式. 主要基于微信小程序云开发,前端个人主页页面的界面使用的是ColorUi ...

  9. 微信小程序云开发|基于微信小程序实现房产中介平台系统

    作者主页:编程千纸鹤 作者简介:Java.前端.Python开发多年,做过高程,项目经理,架构师 主要内容:Java项目开发.毕业设计开发.面试技术整理.最新技术分享 收藏点赞不迷路  关注作者有好处 ...

最新文章

  1. 深入Java泛型(六):Bean强转原理实践
  2. ivew 双向绑定时间控件
  3. MySQL事务处理与事务隔离(锁机制)
  4. python语言及其应用电子版翁正秋_Python语言及其应用pdf
  5. :after伪类+content经典应用举例
  6. python中的计算符号
  7. 2020年抖音美妆直播报告
  8. 用 Java 语言,写一个植物大战僵尸简易版!
  9. Exchange Server 2013安装部署初体验
  10. java序列不存在错误_java.sql.SQLException: ORA-02289: 序列不存在 已解决!
  11. 如何在没有电脑的情#况下用安卓手机制作windows pe启动盘
  12. C# 打印PDF文件
  13. 如何正确使用 Mac 电脑的“恢复模式”?
  14. MySQL必知必会(3)
  15. 日常生活-不帮人投资理财
  16. PAT乙级1024科学记数法c++实现
  17. 医院招聘计算机管理岗考试题库13套
  18. cmd打开计算机窗口,如何打开命令行窗口,教您电脑怎么打开cmd命令行窗口
  19. 阿里妈妈技术:广告间排序和广告内创意优选联合优化(CACS)
  20. 机器学习——线性回归衍生(过拟合、正则化、岭回归和LASSO回归)

热门文章

  1. 《软件项目管理(第二版)》第 1 章——概述 重点部分总结
  2. python中以表示语块_scikitlearn:将数据拟合成块与将其全部拟合到on
  3. Linux编程考前测试题
  4. Windows 10环境下AndroidStudio安装教程(内含如何配置Http Proxy)
  5. java矩形翻转_如何判断一个点在旋转后的矩形中
  6. 4位先行进位电路 logisim_你真的了解74系列集成电路吗?让我帮你总结一下
  7. Python二级笔记(15)
  8. mysql高级查询教程_MYSQL高级查询
  9. win10 使用ssh连接服务器 ‘’Bad owner or permissions on C:\\Users\\Administrator/.ssh/config‘’
  10. 2-docker 安装