微信小程序使用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 相关文章推荐
JavaScript中使用replace结合正则实现replaceAll的效果
Jun 04 Javascript
理解JavaScript的prototype属性
Feb 11 Javascript
Javascript中的数据类型之旅
Oct 18 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
Aug 11 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
Oct 27 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
Jan 19 Javascript
js和jquery中获取非行间样式
May 05 jQuery
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
Aug 21 Javascript
详解React native全局变量的使用(跨组件的通信)
Sep 07 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
Dec 11 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 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 日期加减的类,很不错
2009/10/10 PHP
解析smarty模板中类似for的功能实现
2013/06/18 PHP
YII框架中使用memcache的方法详解
2017/08/02 PHP
初学JavaScript第二章
2008/09/30 Javascript
JS中setTimeout()的用法详解
2013/04/14 Javascript
你必须知道的Javascript知识点之"字面量和对应类型"说明介绍
2013/04/23 Javascript
js中键盘事件实例简析
2015/01/10 Javascript
jquery实现超简洁的TAB选项卡效果代码
2015/08/28 Javascript
jQuery插件jquery-barcode实现条码打印的方法
2015/11/25 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
2016/07/22 Javascript
BootStrap表单宽度设置方法
2017/03/10 Javascript
javascript图片预览和上传(兼容IE)
2017/03/15 Javascript
p5.js实现斐波那契螺旋的示例代码
2018/03/22 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
2018/05/25 Javascript
mpvue项目中使用第三方UI组件库的方法
2018/09/30 Javascript
node.js中 redis 的安装和基本操作示例
2020/02/10 Javascript
[48:53]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第一场
2014/05/26 DOTA
python实现域名系统(DNS)正向查询的方法
2016/04/19 Python
Python的几个高级语法概念浅析(lambda表达式闭包装饰器)
2016/05/28 Python
Python基于列表模拟堆栈和队列功能示例
2018/01/05 Python
Python3实现将本地JSON大数据文件写入MySQL数据库的方法
2018/06/13 Python
对Python通过pypyodbc访问Access数据库的方法详解
2018/10/27 Python
python-sys.stdout作为默认函数参数的实现
2020/02/21 Python
python如何提取英语pdf内容并翻译
2020/03/03 Python
浅谈在django中使用filter()(即对QuerySet操作)时踩的坑
2020/03/31 Python
jupyter notebook远程访问不了的问题解决方法
2021/01/11 Python
互动出版网:专业书籍
2017/03/21 全球购物
一份比较全的PHP面试题
2016/07/29 面试题
偷看我的初中毕业鉴定
2014/01/29 职场文书
护理学应聘自荐书范文
2014/02/05 职场文书
公司证明怎么写
2014/09/22 职场文书
安全温馨提示语大全
2015/07/14 职场文书
中学教代会开幕词
2016/03/04 职场文书
致创业的您:这类人不适合餐饮创业
2019/08/19 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers
SQL Server中的游标介绍
2022/05/20 SQL Server