微信小程序 页面传值详解


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 相关文章推荐
Prototype 学习 工具函数学习($w,$F方法)
Jul 12 Javascript
JavaScript 更严格的相等 [译]
Sep 20 Javascript
JSON格式的键盘编码对照表
Jan 29 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
Aug 31 Javascript
jQuery实现遮罩层登录对话框
Dec 29 Javascript
JavaScript表单验证完美代码
Mar 02 Javascript
vue中axios处理http发送请求的示例(Post和get)
Oct 13 Javascript
关于Vue源码vm.$watch()内部原理详解
Apr 26 Javascript
vue 对axios get pust put delete封装的实例代码
Jan 05 Javascript
JavaScript this使用方法图解
Feb 04 Javascript
Vue中keep-alive的两种应用方式
Jul 15 Javascript
vue绑定数字类型 value为数字的实例
Aug 31 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
yii实现级联下拉菜单的方法
2014/07/31 PHP
php根据某字段对多维数组进行排序的方法
2015/03/07 PHP
PHP中如何使用session实现保存用户登录信息
2015/10/20 PHP
CentOS下PHP7的编译安装及MySQL的支持和一些常见问题的解决办法
2015/12/17 PHP
ThinkPHP模板循环输出Volist标签用法实例详解
2016/03/23 PHP
php 猴子摘桃的算法
2017/06/20 PHP
asp函数split()对应php函数explode()
2019/02/27 PHP
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
jquery更换文章内容与改变字体大小代码
2013/09/30 Javascript
JS执行删除前的判断代码
2014/02/18 Javascript
使用js画图之饼图
2015/01/12 Javascript
详解Bootstrap glyphicons字体图标
2016/01/04 Javascript
JavaScript编程中实现对象封装特性的实例讲解
2016/06/24 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
2017/08/17 Javascript
基于ionic实现下拉刷新功能
2018/05/10 Javascript
Python实现大文件排序的方法
2015/07/10 Python
python入门基础之用户输入与模块初认识
2016/11/14 Python
python中Pycharm 输出中文或打印中文乱码现象的解决办法
2017/06/16 Python
Python复数属性和方法运算操作示例
2017/07/21 Python
Python 判断奇数偶数的方法
2018/12/20 Python
Python递归函数实例讲解
2019/02/27 Python
python接口自动化测试之接口数据依赖的实现方法
2019/04/26 Python
Python3.5迭代器与生成器用法实例分析
2019/04/30 Python
python 实现查询Neo4j多节点的多层关系
2019/12/23 Python
Python调用.NET库的方法步骤
2019/12/27 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
HTML5+CSS3绘制锯齿状的矩形
2016/03/01 HTML / CSS
Java如何格式化日期
2012/08/07 面试题
JSF面试题:如何管量web层中的Bean,用什么标签。如何通过jsp页面与Bean绑定在一起进行处理?
2012/10/05 面试题
Java中的类包括什么内容?设计时要注意哪些方面
2012/05/23 面试题
社区优秀志愿者材料
2014/02/02 职场文书
运动会致辞稿50字
2014/02/04 职场文书
安全责任书模板
2014/07/22 职场文书
2015年小学生自我评价范文
2015/03/03 职场文书
新学期主题班会
2015/08/17 职场文书
Pandas||过滤缺失数据||pd.dropna()函数的用法说明
2021/05/14 Python