微信小程序使用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 相关文章推荐
jQuery UI的Dialog无法提交问题的解决方法
Jan 11 Javascript
裁剪字符串trim()自定义改进版
Apr 10 Javascript
JavaScript中的类数组对象介绍
Dec 30 Javascript
AngularJS优雅的自定义指令
Jul 01 Javascript
js中利用cookie实现记住密码功能
Aug 20 Javascript
angularjs 获取默认选中的单选按钮的value方法
Feb 28 Javascript
php中and 和 &&出坑指南
Jul 13 Javascript
Vue v-text指令简单使用方法示例
Sep 19 Javascript
Vue 2.0双向绑定原理的实现方法
Oct 23 Javascript
JS实现吸顶特效
Jan 08 Javascript
2分钟实现一个Vue实时直播系统的示例代码
Jun 05 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
Aug 05 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
牡丹941资料
2021/03/01 无线电
php更改目录及子目录下所有的文件后缀的代码
2010/09/24 PHP
PHP SEO优化之URL优化方法
2011/04/21 PHP
php cookie名使用点号(句号)会被转换
2014/10/23 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
PHP使用两个栈实现队列功能的方法
2018/01/15 PHP
PHP实现支持CURL字符串证书传输的方法
2019/03/23 PHP
JavaScript实现禁止后退的方法
2006/12/27 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
2011/09/01 Javascript
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
2013/08/02 Javascript
javascript实现删除前弹出确认框
2015/06/04 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
ES6新特性一: let和const命令详解
2017/04/20 Javascript
Vue全局分页组件的实现代码
2018/08/10 Javascript
详解Vue中的scoped及穿透方法
2019/04/18 Javascript
vue-cli3跨域配置的简单方法
2019/09/06 Javascript
[46:48]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第三局
2016/02/25 DOTA
跟老齐学Python之类的细节
2014/10/13 Python
深入剖析Python的爬虫框架Scrapy的结构与运作流程
2016/01/20 Python
Django中提供的6种缓存方式详解
2019/08/05 Python
Python使用scrapy爬取阳光热线问政平台过程解析
2019/08/14 Python
python3 tcp的粘包现象和解决办法解析
2019/12/09 Python
PyCharm2019.3永久激活破解详细图文教程,亲测可用(不定期更新)
2020/10/29 Python
html5 video全屏播放/自动播放的实现示例
2020/08/06 HTML / CSS
Bed Bath & Beyond加拿大官网:购买床上用品、浴巾、厨房电器等
2019/10/04 全球购物
英语系本科生个人求职信
2013/09/21 职场文书
一年级语文教学反思
2014/02/13 职场文书
旅游安全协议书
2014/04/21 职场文书
医院我们的节日活动实施方案
2014/08/22 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
2014年节能工作总结
2014/12/18 职场文书
大学生敬老院活动总结
2015/05/07 职场文书
钱学森电影观后感
2015/06/04 职场文书
《我在为谁工作》:工作的质量往往决定生活的质量
2019/12/27 职场文书
JS Canvas接口和动画效果大全
2021/04/29 Javascript