微信小程序 页面传值详解


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 相关文章推荐
jquery blockUI 遮罩不能消失与不能提交的解决方法
Sep 17 Javascript
jquery mobile 移动web(5)
Dec 20 Javascript
JavaScript实现图片自动加载的瀑布流效果
Apr 11 Javascript
浅谈JS中逗号运算符的用法
Jun 12 Javascript
JavaScript使用键盘输入控制实现数字验证功能
Aug 19 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
Dec 28 Javascript
javascript阻止事件冒泡和浏览器的默认行为
Jan 21 Javascript
详解js获取video任意时间的画面截图
Apr 17 Javascript
JavaScript实现的开关灯泡点击切换特效示例
Jul 08 Javascript
关于Layui Table隐藏列问题
Sep 16 Javascript
JavaScript实现旋转木马轮播图
Mar 16 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
Aug 27 Javascript
详解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
PHP 删除一个目录及目录下的所有文件的函数代码
2010/05/26 PHP
php二维码生成
2015/10/19 PHP
JavaScript 学习笔记(四)
2009/12/31 Javascript
js获取html页面节点方法(递归方式)
2013/12/13 Javascript
javascript获取元素偏移量的方法有哪些
2014/06/24 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
2014/09/04 Javascript
jQuery检测返回值的数据类型
2015/07/13 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
js强制把网址设为默认首页
2015/09/29 Javascript
Angularjs---项目搭建图文教程
2016/07/08 Javascript
JS实现页面数据无限加载
2016/09/13 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
前端开发必知的15个jQuery小技巧
2017/01/22 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
2017/11/22 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
2018/08/08 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
在Vue中使用Echarts实例图的方法实例
2020/10/10 Javascript
[44:58]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第二场
2018/04/06 DOTA
[46:38]完美世界DOTA2联赛PWL S2 Magma vs PXG 第三场 11.28
2020/12/02 DOTA
Python的SQLAlchemy框架使用入门
2015/04/29 Python
详解Python编程中time模块的使用
2015/11/20 Python
教你利用Python玩转histogram直方图的五种方法
2018/07/30 Python
Window环境下Scrapy开发环境搭建
2018/11/18 Python
python 对类的成员函数开启线程的方法
2019/01/22 Python
python+selenium实现自动化百度搜索关键词
2019/06/03 Python
详解Python文件修改的两种方式
2019/08/22 Python
html5中localStorage本地存储的简单使用
2017/06/16 HTML / CSS
详解Html5微信支付爬坑之路
2018/07/24 HTML / CSS
运动鞋、足球鞋和慕尼黑球衣:Sport Münzinger
2019/08/26 全球购物
心理健康教育制度
2014/01/27 职场文书
乡镇创先争优活动总结
2014/08/28 职场文书
英语感谢信范文
2015/01/20 职场文书
发布会邀请函
2015/01/31 职场文书
邀请函样本
2015/02/02 职场文书
《给予树》教学反思
2016/03/03 职场文书