微信小程序使用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 相关文章推荐
让iframe自适应高度(支持XHTML,支持FF)
Jul 24 Javascript
jQuery实现复选框成对选择及对应取消的方法
Mar 03 Javascript
javascript实现checkbox全选的代码
Apr 30 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
Sep 05 Javascript
纯js实现手风琴效果代码
Apr 17 Javascript
javascript 的变量、作用域和内存问题
Apr 19 Javascript
Node 自动化部署的方法
Oct 17 Javascript
javascript按顺序加载运行js方法
Dec 01 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
Feb 22 Javascript
node.js的http.createServer过程深入解析
Jun 06 Javascript
vue-router之解决addRoutes使用遇到的坑
Jul 19 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
ThinkPHP之用户注册登录留言完整实例
2014/07/22 PHP
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
2012/02/03 Javascript
window.addEventListener来解决让一个js事件执行多个函数
2012/12/26 Javascript
浅析JavaScript中两种类型的全局对象/函数
2013/12/05 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
JavaScript实现模仿桌面窗口的方法
2015/07/18 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
jquery实现的蓝色二级导航条效果代码
2015/08/24 Javascript
js实现动态创建的元素绑定事件
2016/07/19 Javascript
JS实现微信弹出搜索框 多条件查询功能
2016/12/13 Javascript
Ajax跨域实现代码(后台jsp)
2017/01/21 Javascript
js中创建对象的几种方式
2017/02/05 Javascript
Node.js数据库操作之连接MySQL数据库(一)
2017/03/04 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
2017/03/14 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
2017/06/16 Javascript
浅谈webpack对样式的处理
2018/01/05 Javascript
vue2.0 路由不显示router-view的解决方法
2018/03/06 Javascript
Vue press 支持图片放大功能的实例代码
2018/11/09 Javascript
nodejs读取图片返回给浏览器显示
2019/07/25 NodeJs
node中使用log4js4.x版本记录日志的方法
2019/08/20 Javascript
React路由鉴权的实现方法
2019/09/05 Javascript
夯基础之手撕javascript继承详解
2020/11/09 Javascript
[01:03:37]Secret vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python编程之Re模块下的函数介绍
2017/10/28 Python
Python实现邮件的批量发送的示例代码
2018/01/23 Python
Python3.遍历某文件夹提取特定文件名的实例
2018/04/26 Python
Python Pandas 如何shuffle(打乱)数据
2019/07/30 Python
飞利浦法国官网:Philips法国
2019/07/10 全球购物
Zalando Lounge瑞士:时尚与生活方式购物俱乐部
2020/03/12 全球购物
矿泉水广告词
2014/03/20 职场文书
食品安全处置方案
2014/06/14 职场文书
2014年信访维稳工作总结
2014/12/08 职场文书
优秀党员申报材料
2014/12/18 职场文书
色戒观后感
2015/06/12 职场文书
六年级作文之家庭作文
2019/12/12 职场文书
redis实现共同好友的思路详解
2021/05/26 Redis