微信小程序使用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 相关文章推荐
拖动Html元素集合 Drag and Drop any item
Dec 22 Javascript
详谈JavaScript 匿名函数及闭包
Nov 14 Javascript
JavaScript实现重置表单(reset)的方法
Apr 02 Javascript
javascript下拉列表菜单的实现方法
Nov 18 Javascript
简单总结JavaScript中的String字符串类型
May 26 Javascript
原生js三级联动的简单实现代码
Jun 07 Javascript
js实现的简练高效拖拽功能示例
Dec 21 Javascript
webpack2.0搭建前端项目的教程详解
Apr 05 Javascript
vue登录路由验证的实现
Dec 13 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
Feb 06 Javascript
JS实现瀑布流效果
Mar 07 Javascript
JavaScript享元模式原理与用法实例详解
Mar 09 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小技巧之函数重载
2014/06/02 PHP
浅谈PHP中其他类型转化为Bool类型
2016/03/28 PHP
PHP生成word文档的三种实现方式
2016/11/14 PHP
ThinkPHP3.2.3框架实现执行原生SQL语句的方法示例
2019/04/03 PHP
网页里控制图片大小的相关代码
2006/06/13 Javascript
javascript 学习之旅 (1)
2009/02/05 Javascript
input的focus方法使用
2010/03/13 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
2013/03/11 Javascript
基于javascript如何传递特殊字符
2015/11/30 Javascript
详解maxlength属性在textarea里奇怪的表现
2015/12/27 Javascript
JavaScript遍历求解数独问题的主要思路小结
2016/06/12 Javascript
Vue.js实现无限加载与分页功能开发
2016/11/03 Javascript
js 点击a标签 获取a的自定义属性方法
2016/11/21 Javascript
Angular 4.x 动态创建表单实例
2017/04/25 Javascript
Bootstrap与Angularjs的模态框实例代码
2017/08/03 Javascript
浅谈angular4实际项目搭建总结
2017/12/01 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
2019/09/10 Javascript
[01:03]DOTA2新的征程 你的脚印值得踏上
2014/08/13 DOTA
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
使用python3.5仿微软记事本notepad
2016/06/15 Python
深入探究Django中的Session与Cookie
2017/07/30 Python
Pandas中把dataframe转成array的方法
2018/04/13 Python
python配置grpc环境
2019/01/01 Python
PyQt4编程之让状态栏显示信息的方法
2019/06/18 Python
在vscode中配置python环境过程解析
2019/09/28 Python
浅谈Tensorflow 动态双向RNN的输出问题
2020/01/20 Python
python读取图片的几种方式及图像宽和高的存储顺序
2020/02/11 Python
CSS3 实现图形下落动画效果
2020/11/13 HTML / CSS
phonegap常用事件总结(必看篇)
2017/03/31 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
2021/02/03 HTML / CSS
Spartoo芬兰:欧洲最大的网上鞋店
2016/08/28 全球购物
RetroStage德国:复古服装
2019/02/03 全球购物
法学毕业生自荐信
2013/11/13 职场文书
销售经理竞聘书
2014/03/31 职场文书
医院护士见习期自我鉴定
2014/09/15 职场文书
加薪通知
2015/04/25 职场文书