微信小程序使用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实现动态增加文件域表单
Feb 12 Javascript
jquery制作select列表双向选择示例代码
Sep 02 Javascript
在Node.js应用中使用Redis的方法简介
Jun 24 Javascript
jquery计算鼠标和指定元素之间距离的方法
Jun 26 Javascript
JS中call/apply、arguments、undefined/null方法详解
Feb 15 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
Mar 03 Javascript
javaScript实现复选框全选反选事件详解
Nov 20 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
Dec 07 Javascript
基于javascript实现贪吃蛇小游戏
Nov 25 Javascript
详解vue beforeEach 死循环问题解决方法
Feb 25 Javascript
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
React实现动效弹窗组件
Jun 21 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 用checkbox一次性删除多条记录的方法
2010/02/23 PHP
php构造函数实例讲解
2013/11/13 PHP
PHP 使用redis简单示例分享
2015/03/05 PHP
php实现有趣的人品测试程序实例
2015/06/08 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
2015/06/04 Javascript
javascript获取以及设置光标位置
2017/02/16 Javascript
Javascript中click与blur事件的顺序详析
2017/04/25 Javascript
JavaScript高阶函数_动力节点Java学院整理
2017/06/28 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
关于Vue.nextTick()的正确使用方法浅析
2017/08/25 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
2018/09/25 Javascript
elementUI 设置input的只读或禁用的方法
2018/10/30 Javascript
微信小程序可滑动月日历组件使用详解
2019/10/21 Javascript
vue-router 控制路由权限的实现
2020/09/24 Javascript
Python数据类型详解(二)列表
2016/05/08 Python
python字典的常用操作方法小结
2016/05/16 Python
Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)
2018/04/18 Python
django session完成状态保持的方法
2018/11/27 Python
深入了解Django View(视图系统)
2019/07/23 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
在Python中用GDAL实现矢量对栅格的切割实例
2020/03/11 Python
python主要用于哪些方向
2020/07/05 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
中国茶叶、茶具一站式网上购物商城:醉品茶城
2018/07/03 全球购物
Linux上比较文件的命令都有哪些
2012/02/24 面试题
什么是servlet
2012/05/08 面试题
开办加工厂创业计划书
2014/01/03 职场文书
《骑牛比赛》教后反思
2014/04/22 职场文书
公司委托书格式
2014/08/01 职场文书
2014司机年终工作总结
2014/12/05 职场文书
大学军训通讯稿(2016最新版)
2015/12/21 职场文书
个人工作失误的保证书怎么写?
2019/06/21 职场文书
JavaScript函数柯里化
2021/11/07 Javascript
浅谈如何保证Mysql主从一致
2022/03/13 MySQL