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


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_03_javascript全局观
Oct 11 Javascript
jquery中通过过滤器获取表单元素的实现代码
Jul 05 Javascript
jquery获得同源iframe内body下标签的值的方法
Sep 25 Javascript
js简单实现竖向tab选项卡的方法
May 04 Javascript
jQuery过滤特殊字符及JS字符串转为数字
May 26 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
Dec 19 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
Jun 19 Javascript
js插件实现图片滑动验证码
Sep 29 Javascript
webpack实现一个行内样式px转vw的loader示例
Sep 13 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
Mar 07 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
Aug 03 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
Jul 17 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
第十节 抽象方法和抽象类 [10]
2006/10/09 PHP
php二维数组用键名分组相加实例函数
2013/11/06 PHP
PHP的引用详解
2015/02/22 PHP
PHP 常用的header头部定义汇总
2015/06/19 PHP
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
2012/02/03 Javascript
js防止表单重复提交实现代码
2012/09/05 Javascript
javascript匿名函数应用示例介绍
2014/03/07 Javascript
checkbox选中与未选中判断示例
2014/08/04 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
2015/01/09 Javascript
jQuery实现鼠标点击弹出渐变层的方法
2015/07/09 Javascript
基于jquery实现智能提示控件intellSeach.js
2016/03/17 Javascript
html+js实现简单的计算器代码(加减乘除)
2016/07/12 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
简单实现AngularJS轮播图效果
2020/04/10 Javascript
Angular2库初探
2017/03/01 Javascript
详解如何使用Vue2做服务端渲染
2017/03/29 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
2017/06/04 Javascript
ReactJS实现表单的单选多选和反选的示例
2017/10/13 Javascript
在vue-cli中组件通信的方法
2017/12/16 Javascript
JavaScript switch语句使用方法简介
2019/12/30 Javascript
js实现时钟定时器
2020/03/26 Javascript
JS实现鼠标移动拖尾
2020/12/27 Javascript
深入Python函数编程的一些特性
2015/04/13 Python
基于python中staticmethod和classmethod的区别(详解)
2017/10/24 Python
kaggle+mnist实现手写字体识别
2018/07/26 Python
对Python 除法负数取商的取整方式详解
2018/12/12 Python
Python中文编码知识点
2019/02/18 Python
python实现beta分布概率密度函数的方法
2019/07/08 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
python实现一个点绕另一个点旋转后的坐标
2019/12/04 Python
Python3+Django get/post请求实现教程详解
2021/02/16 Python
Python绘制数码晶体管日期
2021/02/19 Python
关于前端上传文件全面基础扫盲贴(入门)
2019/08/01 HTML / CSS
健康状况证明书
2014/11/26 职场文书
四年级小学生评语
2014/12/26 职场文书
《落花生》教学反思
2016/02/16 职场文书