微信小程序使用navigateTo数据传递的实例


Posted in Javascript onSeptember 26, 2017

微信小程序使用navigateTo数据传递的实例

1,传递基本数据类型

index.js 发送页JS

Page({ 
 data: { 
  testStr: '字符串str' 
 }, 
 onLoad: function () { 
 }, 
 next: function(e){ 
  wx.navigateTo({ 
   url: '/pages/test/test?str='+this.data.testStr, 
  }) 
 } 
})

test.js 接受页JS

Page({ 
 data:{ 
 }, 
 onLoad:function(options){ 
  console.log("接收到的参数是str="+options.str); 
 } 
})

打印的Log如下:

接收到的参数是str=字符串str

2,传递对象{}

index.js 发送页JS

Page({ 
 data: { 
  dataObj:{name:'我是name', extra:'我是extra'} 
 }, 
 onLoad: function () { 
 }, 
 toTest: function(e){ 
  wx.navigateTo({ 
   url: '/pages/test/test?dataObj='+JSON.stringify(this.data.dataObj) 
  }) 
 } 
})

test.js 接受页JS

Page({ 
 data:{ 
  dataObj:null 
 }, 
 onLoad:function(options){   
  this.dat.dataObj= JSON.parse(options.dataObj);//解析得到对象 
 }})

打印的Log如下:

test.js [sm]:16 接收到的参数是obj={“name”:”我是name”,”dataObj”:”我是dataObj”}

3,传递数组集合[]

index.js 发送页JS

Page({ 
 data: { 
  list:['item-A','item-B'] 
 }, 
 onLoad: function () { 
 }, 
 next: function(e){ 
  wx.navigateTo({ 
   url: '/pages/test/test?list='+JSON.stringify(this.data.list), 
  }) 
 } 
})

test.js 接受页JS

Page({ 
 data:{ 
  list:[] 
 },  
onLoad:function(options){   
  console.log("接收到的参数是list="+options.list);//此处打印出来的是字符串,解析如下    
  this.data.list = JSON.parse(options.list);//解析得到集合
 }})

打印的Log如下:

test.js [sm]:17 接收到的参数是list=[“item-A”,”item-B”]

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
用CSS+JS实现的进度条效果效果
Jun 05 Javascript
JavaScript中继承的一些示例方法与属性参考
Aug 07 Javascript
jquery+css+ul模拟列表菜单具体实现思路
Apr 15 Javascript
$.each与$().each的区别示例介绍
Mar 20 Javascript
15个非常实用的JavaScript代码片段
Dec 18 Javascript
vue2.0 自定义日期时间过滤器
Jun 07 Javascript
JavaScript数组方法的错误使用例子
Sep 13 Javascript
javascript实现计算指定范围内的质数示例
Dec 29 Javascript
详解Vue 项目中的几个实用组件(ts)
Oct 29 Javascript
js实现带箭头的进度流程
Mar 26 Javascript
JS如何实现封装列表右滑动删除收藏按钮
Jul 23 Javascript
Vue + ts实现轮播插件的示例
Nov 10 Javascript
利用Three.js如何实现阴影效果实例代码
Sep 26 #Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
Sep 26 #Javascript
Three.js实现绘制字体模型示例代码
Sep 26 #Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
Sep 26 #Javascript
JS+jQuery实现注册信息的验证功能
Sep 26 #jQuery
详解vue-cli中的ESlint配置文件eslintrc.js
Sep 25 #Javascript
JavaScript 自定义事件之我见
Sep 25 #Javascript
You might like
php中变量及部分适用方法
2008/03/27 PHP
PHP模板引擎Smarty内建函数详解
2016/04/11 PHP
PHP Cookie学习笔记
2016/08/23 PHP
php.ini中date.timezone设置详解
2016/11/20 PHP
iis6手工创建网站后无法运行php脚本的解决方法
2017/06/08 PHP
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
jquery实现checkbox全选全不选的简单实例
2013/12/31 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
Java中Timer的用法详解
2015/10/21 Javascript
node.js实现端口转发
2016/04/14 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
2016/05/12 Javascript
jQuery插件编写步骤详解
2016/06/03 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
Bootstrap表单使用方法详解
2017/02/17 Javascript
mpvue 如何使用腾讯视频插件的方法
2018/07/16 Javascript
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
[54:06]OG vs TNC 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
RC4文件加密的python实现方法
2015/06/30 Python
Python脚本实时处理log文件的方法
2016/11/21 Python
python中的文件打开与关闭操作命令介绍
2018/04/26 Python
Python3基于sax解析xml操作示例
2018/05/22 Python
Python for循环与range函数的使用详解
2019/03/23 Python
Python实现多线程下载脚本的示例代码
2020/04/03 Python
Python进行统计建模
2020/08/10 Python
使用html5 canvas 画时钟代码实例分享
2015/11/11 HTML / CSS
用C语言实现文件读写操作
2013/10/27 面试题
LINUX下线程,GDI类的解释
2012/04/17 面试题
人大调研汇报材料
2014/08/14 职场文书
2014年社区党建工作汇报材料
2014/11/02 职场文书
企业财务总监岗位职责
2015/04/03 职场文书
入党积极分子群众意见
2015/06/01 职场文书
初中语文教学随笔
2015/08/15 职场文书
小学生运动会广播
2015/08/19 职场文书
使用tensorflow 实现反向传播求导
2021/05/26 Python
dubbo集成zipkin获取Traceid的实现
2021/07/26 Java/Android