微信小程序使用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 相关文章推荐
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
Apr 10 Javascript
js表单验证实例讲解
Mar 31 Javascript
ES5 ES6中Array对象去除重复项的方法总结
Apr 27 Javascript
Ionic3 UI组件之Gallery Modal详解
Jun 07 Javascript
Angular模板表单校验方法详解
Aug 11 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
Jul 12 Javascript
微信小程序时间标签和时间范围的联动效果
Feb 15 Javascript
详解vue开发中调用微信jssdk的问题
Apr 16 Javascript
Vue函数式组件的应用实例详解
Aug 30 Javascript
Vue使用自定义指令实现拖拽行为实例分析
Jun 06 Javascript
Vue使用预渲染代替SSR的方法
Jul 02 Javascript
js仿京东放大镜效果
Aug 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
完美实现wordpress禁止文章修订和自动保存的方法
2014/11/03 PHP
PHP使用自定义方法实现数组合并示例
2016/07/07 PHP
PHP培训要多少钱
2017/06/06 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
use jscript List Installed Software
2007/06/11 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
原生javascript实现图片弹窗交互效果
2015/01/12 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
js实现Form栏显示全格式时间时钟效果代码
2015/08/19 Javascript
JavaScript中利用各种循环进行遍历的方式总结
2015/11/10 Javascript
Vue.JS入门教程之列表渲染
2016/12/01 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
2017/05/23 Javascript
JavaScript伪数组用法实例分析
2017/12/22 Javascript
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
2019/01/23 Javascript
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
Vue中添加滚动事件设置的方法详解
2020/09/14 Javascript
Python单例模式实例分析
2015/01/14 Python
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
python下读取公私钥做加解密实例详解
2017/03/29 Python
python生成excel的实例代码
2017/11/08 Python
基于python3实现socket文件传输和校验
2018/07/28 Python
Python numpy中矩阵的基本用法汇总
2019/02/12 Python
Python学习笔记之集合的概念和简单使用示例
2019/08/22 Python
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
亚洲领先的设计购物网站:Pinkoi
2020/11/26 全球购物
linux面试题参考答案(7)
2012/10/29 面试题
临床医学专业毕业生的自我评价
2013/10/17 职场文书
车祸赔偿收入证明
2014/01/09 职场文书
关于读书的演讲稿1000字
2014/08/27 职场文书
学前班幼儿评语大全
2014/12/29 职场文书
新员工考核评语
2014/12/31 职场文书
通知的格式范文
2015/04/27 职场文书
公司财务制度:成本管理控制制度模板
2019/11/19 职场文书