微信小程序实现页面跳转传递参数(实体,对象)


Posted in Javascript onAugust 12, 2019

首先我们有这么一种需求,就是我在一个列表中点击了某个item,跳转到详情界面,那么我就需要把item的实体数据从列表页面传递到详情页面,那么我们来看看微信小程序给我们提供的API:

微信小程序实现页面跳转传递参数(实体,对象)

这里大家可以清楚看到api中说到的如何传递参数,其实它这里指的参数仅仅是一些普通的数据类型,我们要传递的实体是object类型,那么我们需要先把实体转成string类型进行传递,在详情页面接受到在逆向转成实体,如下面这段示例:

//这里我们跳转详情界面
queryItemClick: function (e) {
  var that = this
  //拿到点击的index下标
  var index = e.currentTarget.dataset.index
  //将对象转为string
  var queryBean = JSON.stringify(that.data.queryList[index])
  wx.navigateTo({
   url: '../queryResult/queryResult?queryBean=' + queryBean,
  })
 }

这里我们用JSON.stringify()函数将实体转成string类型进行传递,那么我们在看看接收参数:

/***重点内容*
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
  var that=this
  var queryBean = JSON.parse(options.queryBean);
  that.setData({
   queryBean: queryBean
  })
  //console.log(that.data.queryBean)
 }

这里我们在生命周期函数onLoad中获取我们传递的实体转的字符串,然后用JSON.parse()转成实体,最后赋值给我们的全局变量。

如果我们想要传递Json对象 也可以通过这样的方式进行传递。

以上就是本文的全部内容,此文章为学习小程序记录,如果能帮到你当然更好,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解决表单中第一个非隐藏的元素获得焦点的一个方案
Oct 26 Javascript
node.js中的buffer.write方法使用说明
Dec 10 Javascript
JavaScript简单获取页面图片原始尺寸的方法
Jun 21 Javascript
简单实现jquery焦点图
Dec 12 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
Nov 03 Javascript
解决vue页面DOM操作不生效的问题
Mar 17 Javascript
详解react、redux、react-redux之间的关系
Apr 11 Javascript
vue.extend与vue.component的区别和联系
Sep 19 Javascript
webpack中的模式(mode)使用详解
Feb 20 Javascript
Element Alert警告的具体使用方法
Jul 27 Javascript
请求时token过期自动刷新token操作
Sep 11 Javascript
关于vue中如何监听数组变化
Apr 28 Vue.js
微信小程序实现传递多个参数与事件处理
Aug 12 #Javascript
node命令行工具之实现项目工程自动初始化的标准流程
Aug 12 #Javascript
五分钟搞懂Vuex实用知识(小结)
Aug 12 #Javascript
no-vnc和node.js实现web远程桌面的完整步骤
Aug 11 #Javascript
Angular8基础应用之表单及其验证
Aug 11 #Javascript
浅谈javascript错误处理
Aug 11 #Javascript
axios异步提交表单数据的几种方法
Aug 11 #Javascript
You might like
编写自己的php扩展函数
2006/10/09 PHP
国内php原创论坛
2006/10/09 PHP
PHP5 面向对象程序设计
2008/02/13 PHP
php读取xml实例代码
2010/01/28 PHP
解析左右值无限分类的实现算法
2013/06/20 PHP
php cURL和Rolling cURL并发方式比较
2013/10/30 PHP
让iframe子窗体取父窗体地址栏参数(querystring)
2009/10/13 Javascript
理解Javascript_13_执行模型详解
2010/10/20 Javascript
JQuery中$.ajax()方法参数详解及应用
2013/12/12 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
javascript中解析四则运算表达式的算法和示例
2014/08/11 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
2015/08/07 Javascript
js控制多图左右滚动切换效果代码分享
2015/08/26 Javascript
javascript与jquery动态创建html元素示例
2016/07/25 Javascript
深入了解JavaScript的逻辑运算符(与、或)
2016/12/20 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
2017/05/08 jQuery
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
2018/04/03 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
2018/08/28 Javascript
Koa代理Http请求的示例代码
2018/10/10 Javascript
jQuery动态操作表单示例【基于table表格】
2018/12/06 jQuery
安装多版本Vue-CLI的实现方法
2020/03/24 Javascript
Python版的文曲星猜数字游戏代码
2013/09/02 Python
python使用代理ip访问网站的实例
2018/05/07 Python
Python 实现数据结构-堆栈和队列的操作方法
2019/07/17 Python
django Admin文档生成器使用详解
2019/07/22 Python
python tkinter组件使用详解
2019/09/16 Python
python实现银行管理系统
2019/10/25 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
python中dict()的高级用法实现
2019/11/13 Python
Centos7下源码安装Python3 及shell 脚本自动安装Python3的教程
2020/03/07 Python
Python爬虫中Selenium实现文件上传
2020/12/04 Python
HTML5注册表单的自动聚焦与占位文本示例代码
2013/07/19 HTML / CSS
计算机毕业生求职信
2014/06/10 职场文书
中学推普周活动总结
2015/05/07 职场文书
2015年幼儿园班主任个人工作总结
2015/10/22 职场文书
2016年公共机构节能宣传周活动总结
2016/04/05 职场文书