微信小程序使用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 类似flash效果的立体图片浏览器
Feb 08 Javascript
JQuery 插件制作实践 xMarquee插件V1.0
Apr 02 Javascript
Java 正则表达式学习总结和一些小例子
Sep 13 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
Oct 24 Javascript
JS的参数传递示例介绍
Feb 08 Javascript
Jquery弹出层插件ThickBox的使用方法
Dec 09 Javascript
javascript实现密码强度显示
Mar 18 Javascript
Perl Substr()函数及函数的应用
Dec 16 Javascript
js微信分享API
Oct 11 Javascript
详解Python中logging日志模块在多进程环境下的使用
Dec 26 Javascript
Vue-cli中为单独页面设置背景色的实现方法
Feb 11 Javascript
JS实现字符串中去除指定子字符串方法分析
May 17 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&&mysql)五
2006/10/09 PHP
PHP 程序员也要学会使用“异常”
2009/06/16 PHP
php XMLWriter类的简单示例代码(RSS输出)
2011/09/30 PHP
解析centos中Apache、php、mysql 默认安装路径
2013/06/25 PHP
php中读写文件与读写数据库的效率比较分享
2013/10/19 PHP
php弹出提示框的是实例写法
2019/09/26 PHP
JavaScript 异步调用框架 (Part 4 - 链式调用)
2009/08/04 Javascript
jquery实现动态菜单的实例代码
2013/11/28 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
JQuery选择器、过滤器大整理
2015/05/26 Javascript
jQuery特殊符号转义的实现
2016/11/30 Javascript
vue-router实现组件间的跳转(参数传递)
2017/11/07 Javascript
使用Vue自定义数字键盘组件(体验度极好)
2017/12/19 Javascript
详解javascript中的变量提升和函数提升
2018/05/24 Javascript
详解微信JS-SDK选择图片遇到的坑
2018/08/15 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
2019/09/20 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
Vue获取微博授权URL代码实例
2020/11/04 Javascript
python操作MySQL数据库具体方法
2013/10/28 Python
Python3字符串学习教程
2015/08/20 Python
Python实现批量检测HTTP服务的状态
2016/10/27 Python
深入浅析python with语句简介
2018/04/11 Python
python远程连接MySQL数据库
2019/04/19 Python
python中metaclass原理与用法详解
2019/06/25 Python
python接入支付宝的实例操作
2020/07/20 Python
预订从美国飞往印度的机票:MyTicketsToIndia
2017/05/19 全球购物
N.Peal官网:来自伦敦的高档羊绒品牌
2018/10/29 全球购物
捐书活动总结
2014/05/04 职场文书
银行贷款收入证明
2014/10/17 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书
2019广播稿怎么写
2019/04/17 职场文书
Ajax 的初步实现(使用vscode+node.js+express框架)
2021/06/18 Javascript
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers
MySQL七种JOIN类型小结
2021/10/24 MySQL
Centos系统通过Docker安装并搭建MongoDB数据库
2022/04/12 MongoDB