微信小程序 页面传值详解


Posted in Javascript onMarch 10, 2017

微信小程序 页面传值详解

一. 跨页面传值.

1 . 用 navigator标签传值或 wx.navigator, 比如

微信小程序 页面传值详解

这里将good_id=16 参数传入detail页面, 然后detail页面的 onload方法内接受.

微信小程序 页面传值详解

如果需要传多个参数, 用 & 链接即可

微信小程序 页面传值详解

微信小程序 页面传值详解

如果要传 数组, 字典等复杂类型, 要先用 JSON.stringify() 转成字符串传递.

微信小程序 页面传值详解

注 : 如果转化的字符串中 有"?"这个符号, 则只会传递"?"以前的字符串, 这个问题我猜想可能是小程序内部的路由处理 对这个"?"敏感吧

好, 这是第一种 依靠跳转的url带参数传值

2 . 用getCurrentPages(); 获取栈中全部页面的, 然后把数据写入相应页面

微信小程序 页面传值详解

这里可以传字符串, 也能传数组等,

微信小程序 页面传值详解

这样就把 address 传递并接受了

注 : 这个方法适合 往后面传值(即已经存在的页面), 这样才能在栈中找到并主动写入数据, 且 一定要在 onshow() 方法中接受, 因为再次返回只执行onshow()方法.

3 . 写入本地, 跨页面在取出来 wx.setStorage/wx.getStorage等, 小程序中对写入本地数据 封装了很多方法, 各有侧重, 这里就不多说了

微信小程序 页面传值详解

微信小程序 页面传值详解

4 . 把 数据声明为全局变量

var detail = getApp().detail; 可在任何页面获取

二. 页内传值

1 . 设置id的方法标识跳转后传递后的参数

微信小程序 页面传值详解

在bindtap定义的点击方法 swiperTap : function(e) ; 中获取, var id = e.currentTarget.id;

2 . 设置 data-xxx 的方法来标识要传递的值

微信小程序 页面传值详解

注 : 这里 data-index="{{index}}" 里的 {{index}} 是有效的, 在用wx-for 渲染视图层时, index 代表点击的下标. 在bindtap定义的点击方法 swiperTap : function(e) ; 中获取, 即 var index = e.currentTarget.dataset.index; 其他的参数取出也如此, var type = e.currentTarget.dataset.type;

3 . form表单和input输入框

微信小程序 页面传值详解

微信小程序 页面传值详解

微信小程序 页面传值详解

微信小程序 页面传值详解

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
简短几句 通俗解释javascript的闭包
Jan 17 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
Jan 15 Javascript
100个不能错过的实用JS自定义函数
Mar 05 Javascript
jQuery三级下拉列表导航菜单代码分享
Apr 15 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
Sep 21 Javascript
SelecT下拉框选中和取值的解决方法
Nov 22 Javascript
socket.io学习教程之基本应用(二)
Apr 29 Javascript
微信小程序 自定义Toast实例代码
Jun 12 Javascript
JSON创建键值对(key是中文或者数字)方式详解
Aug 24 Javascript
vue使用iframe嵌入网页的示例代码
Jun 09 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
May 30 Javascript
jQuery实现放大镜案例
Oct 19 jQuery
详解Vue生命周期的示例
Mar 10 #Javascript
jQuery表格(Table)基本操作实例分析
Mar 10 #Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
Mar 10 #Javascript
微信小程序 出现47001 data format error原因解决办法
Mar 10 #Javascript
BootstrapValidator实现注册校验和登录错误提示效果
Mar 10 #Javascript
Bootstrap fileinput组件封装及使用详解
Mar 10 #Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
Mar 10 #Javascript
You might like
曾在DC漫画界反派角色扮演的演员,谁才是你心目中的小丑之王?
2020/04/09 欧美动漫
PHP中4个加速、缓存扩展的区别和选用建议
2014/03/12 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
Laravel5.7 Eloquent ORM快速入门详解
2019/04/12 PHP
IE中jscript/javascript的条件编译
2006/09/07 Javascript
让IE8支持DOM 2(不用框架!)
2009/12/31 Javascript
各种页面定时跳转(倒计时跳转)代码总结
2013/10/24 Javascript
JS中如何设置readOnly的值
2013/12/25 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
2014/05/11 Javascript
jQuery向后台传入json格式数据的方法
2015/02/13 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
2015/12/03 Javascript
深入理解jQuery中的事件冒泡
2016/05/24 Javascript
Javascript缓存API
2016/06/14 Javascript
微信小程序进行微信支付的步骤昂述
2016/12/01 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
2018/10/08 Javascript
使用webpack搭建vue项目实现脚手架功能
2019/03/15 Javascript
JS中call()和apply()的功能及用法实例分析
2019/06/28 Javascript
微信小程序实现手势滑动效果
2019/08/26 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
如何在JavaScript中等分数组的实现
2020/12/13 Javascript
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
Python中用memcached来减少数据库查询次数的教程
2015/04/07 Python
利用python程序帮大家清理windows垃圾
2017/01/15 Python
[原创]python爬虫(入门教程、视频教程)
2018/01/08 Python
Pytorch抽取网络层的Feature Map(Vgg)实例
2019/08/20 Python
docker-py 用Python调用Docker接口的方法
2019/08/30 Python
机械设计制造专业个人求职信
2013/09/25 职场文书
自我鉴定思想方面
2013/10/07 职场文书
土地租赁意向书
2014/07/30 职场文书
党支部三会一课计划
2014/09/24 职场文书
大学生党员自我批评思想汇报
2014/10/10 职场文书
2014年工程部工作总结
2014/11/25 职场文书
预备党员半年考察意见
2015/06/01 职场文书
2015年物业管理员工工作总结
2015/10/15 职场文书
python制作图形界面的2048游戏, 基于tkinter
2021/04/06 Python
Python使用protobuf序列化和反序列化的实现
2021/05/19 Python