微信小程序使用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 相关文章推荐
学习YUI.Ext第五日--做拖放Darg&Drop
Mar 10 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
Aug 07 Javascript
href下载文件根据id取url并下载
May 28 Javascript
AngularJS基础 ng-readonly 指令简单示例
Aug 02 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
Aug 08 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
Jan 18 Javascript
JavaScript实现网页头部进度条刷新
Apr 16 Javascript
详解angular2.x创建项目入门指令
Oct 11 Javascript
layer弹出子iframe层父子页面传值的实现方法
Nov 22 Javascript
原生JS检测CSS3动画是否结束的方法详解
Jan 27 Javascript
VuePress 快速踩坑小结
Feb 14 Javascript
在Uni中使用Vue的EventBus总线机制操作
Jul 31 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伪造referer实例代码
2008/09/20 PHP
PHP开发框架kohana3 自定义路由设置示例
2014/07/14 PHP
浅析THINKPHP的addAll支持的最大数据量
2015/02/03 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
javascript引用对象的方法代码
2007/08/13 Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
2010/09/28 Javascript
gridpanel动态加载数据的实例代码
2013/07/18 Javascript
js检验密码强度(低中高)附图
2014/06/05 Javascript
jQuery实现鼠标划过修改样式的方法
2015/04/14 Javascript
你一定会收藏的Nodejs代码片段
2016/02/04 NodeJs
老生常谈遮罩层 滚动条的问题
2016/04/29 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
2016/07/27 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
vue2.0开发实践总结之疑难篇
2016/12/07 Javascript
Underscore之Array_动力节点Java学院整理
2017/07/10 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
JavaScript 跨域之POST实现方法
2018/05/07 Javascript
vue.js计算属性computed用法实例分析
2018/07/06 Javascript
Element-ui tree组件自定义节点使用方法代码详解
2018/09/17 Javascript
axios 封装上传文件的请求方法
2018/09/26 Javascript
jquery实现的分页显示功能示例
2019/08/23 jQuery
javascript实现点击按钮切换轮播图功能
2020/09/23 Javascript
[46:49]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.19
2020/12/24 DOTA
使用PyCharm创建Django项目及基本配置详解
2018/10/24 Python
pandas去除重复列的实现方法
2019/01/29 Python
Python 中Django安装和使用教程详解
2019/07/03 Python
浅谈pycharm使用及设置方法
2019/09/09 Python
HTML5 本地存储和内容按需加载的思路和方法
2011/04/07 HTML / CSS
html5中的一些标签学习(心得)
2016/10/18 HTML / CSS
施工安全协议书
2013/12/11 职场文书
毕业生就业协议书
2014/04/11 职场文书
2014年维修工作总结
2014/11/22 职场文书
德能勤绩工作总结
2015/08/11 职场文书
应届生们该怎么书写求职信?
2019/07/05 职场文书
Java对文件的读写操作方法
2022/04/29 Java/Android