微信小程序使用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 相关文章推荐
JSON 编辑器实现代码
Dec 06 Javascript
用Javascript评估用户输入密码的强度实现代码
Nov 30 Javascript
Javascript 按位左移运算符使用介绍(
Feb 04 Javascript
什么是Node.js?Node.js详细介绍
Jun 01 Javascript
AngularJS 单元测试(一)详解
Sep 21 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
Nov 26 Javascript
js正则表达式验证表单【完整版】
Mar 06 Javascript
基于vue实现swipe分页组件实例
May 25 Javascript
Nuxt.js实战和配置详解
Aug 05 Javascript
js实现页面图片消除效果
Mar 24 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
Jul 24 Javascript
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
利用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蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
2009/02/17 Javascript
Prototype Selector对象学习
2009/07/23 Javascript
JS中动态添加事件(绑定事件)的代码
2011/01/09 Javascript
JQuery 选择器、过滤器介绍
2011/02/14 Javascript
jquery获取元素值的方法(常见的表单元素)
2013/11/15 Javascript
javascript简单判断输入内容是否合法的方法
2016/05/11 Javascript
深入理解JQuery中的事件与动画
2016/05/18 Javascript
js传值后台中文出现乱码的解决方法
2016/06/30 Javascript
AngularJS利用Controller完成URL跳转
2016/08/09 Javascript
利用angular.copy取消变量的双向绑定与解析
2016/11/25 Javascript
jQuery操作css样式
2017/05/15 jQuery
laydate日历控件使用方法详解
2017/11/20 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
2019/12/16 Javascript
Vue如何基于vue-i18n实现多国语言兼容
2020/07/17 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
2020/07/20 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
2020/07/27 Javascript
python使用smtplib模块通过gmail实现邮件发送的方法
2015/05/08 Python
python的staticmethod与classmethod实现实例代码
2018/02/11 Python
tensorflow tf.train.batch之数据批量读取方式
2020/01/20 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
Python爬虫之Selenium下拉框处理的实现
2020/12/04 Python
html5 canvas 简单画板实现代码
2012/01/05 HTML / CSS
会计专业自我鉴定范文
2013/10/06 职场文书
日语专业毕业生求职信
2013/12/04 职场文书
证券期货行业个人的自我评价
2013/12/26 职场文书
机修工工作职责
2014/02/21 职场文书
高一学年自我鉴定范文(3篇)
2014/09/26 职场文书
法学专业毕业实习自我鉴定2014
2014/09/27 职场文书
大学生党员自我批评思想汇报
2014/10/10 职场文书
详解RedisTemplate下Redis分布式锁引发的系列问题
2021/04/27 Redis
JS + HTML 罗盘式时钟的实现
2021/05/21 Javascript
新手必备之MySQL msi版本下载安装图文详细教程
2021/05/21 MySQL
教你利用python实现企业微信发送消息
2021/05/23 Python
详解vue身份认证管理和租户管理
2021/05/25 Vue.js
图片批量处理 - 尺寸、格式、水印等
2022/03/07 杂记