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


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 相关文章推荐
JavaScript语法着色引擎(demo及打包文件下载)
Jun 13 Javascript
jQuery select的操作实现代码
May 06 Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
May 17 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
Oct 17 Javascript
javascript操作referer详细解析
Mar 10 Javascript
js加减乘除丢失精度问题解决方法
May 16 Javascript
vue.js父组件使用外部对象的方法示例
Apr 25 Javascript
vuejs 动态添加input框的实例讲解
Aug 24 Javascript
如何解决日期函数new Date()浏览器兼容性问题
Sep 11 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
Nov 14 Javascript
vue-cli —— 如何局部修改Element样式
Oct 22 Javascript
详解JS WebSocket断开原因和心跳机制
May 07 Javascript
微信小程序实现传递多个参数与事件处理
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读取txt文件的内容并赋值给数组的代码
2011/11/03 PHP
简单实用的PHP防注入类实例
2014/12/05 PHP
php从数据库查询结果生成树形列表的方法
2015/04/17 PHP
PHP sleep()函数, usleep()函数
2016/08/25 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
yii2实现Ueditor百度编辑器的示例代码
2018/11/02 PHP
dojo 之基础篇(三)之向服务器发送数据
2007/03/24 Javascript
JavaScript 事件查询综合
2009/07/13 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
2010/08/01 Javascript
jQuery前端框架easyui使用Dialog时bug处理
2014/12/05 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
2015/09/04 Javascript
JavaScript判断数字是否为质数的方法汇总
2016/06/02 Javascript
JavaScript 数组中最大最小值
2016/06/05 Javascript
js 获取经纬度的实现方法
2016/06/20 Javascript
Highcharts入门之简介
2016/08/02 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
2018/03/06 Javascript
Vuex新手的理解与使用详解
2019/05/31 Javascript
js实现简单的随机点名器
2020/09/17 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
2020/10/17 Javascript
vue表单验证之禁止input输入框输入空格
2020/12/03 Vue.js
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
Python pickle模块用法实例分析
2015/05/27 Python
Python中的集合介绍
2019/01/28 Python
python3.6环境安装+pip环境配置教程图文详解
2019/06/20 Python
Django REST Framework序列化外键获取外键的值方法
2019/07/26 Python
文件上传服务器-jupyter 中python解压及压缩方式
2020/04/22 Python
Python 微信公众号文章爬取的示例代码
2020/11/30 Python
使用HTML5 Geolocation实现一个距离追踪器
2018/04/09 HTML / CSS
adidas美国官网:adidas US
2016/09/21 全球购物
迪卡侬中国官网:Decathlon中国
2020/08/10 全球购物
英文简历中的自我评价用语
2013/12/09 职场文书
少年闰土教学反思
2014/02/22 职场文书
镇创先争优活动总结
2014/08/28 职场文书
创先争优宣传标语
2014/10/08 职场文书
2016学校元旦晚会经典开场白台词
2015/12/03 职场文书
ajax请求前端跨域问题原因及解决方案
2021/10/16 Javascript