微信小程序 页面传值详解


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 相关文章推荐
js 幻灯片的实现
Dec 06 Javascript
js调试系列 控制台命令行API使用方法
Jun 18 Javascript
JavaScript中具名函数的多种调用方式总结
Nov 08 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
Dec 04 Javascript
详解JavaScript的策略模式编程
Jun 24 Javascript
jQuery+formdata实现上传进度特效遇到的问题
Feb 24 Javascript
Uploadify上传文件方法
Mar 16 Javascript
实现隔行换色效果的两种方式【实用】
Nov 27 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
Feb 13 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
Mar 03 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
Apr 19 Javascript
jQuery实现div跟随鼠标移动
Aug 20 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
php 页面执行时间计算代码
2008/12/04 PHP
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
smarty简单应用实例
2015/11/03 PHP
php封装的验证码工具类完整实例
2016/10/19 PHP
详解EventDispatcher事件分发组件
2016/12/25 PHP
phpstudy的php版本自由修改的方法
2017/10/18 PHP
一个基于jquery的图片切换效果
2010/07/06 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
2013/08/14 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
2015/03/13 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
2015/03/30 Javascript
jQuery对象的链式操作用法分析
2016/05/10 Javascript
jQuery实现查找链接文字替换属性的方法
2016/06/27 Javascript
jquery之别踩白块游戏的简单实现
2016/07/25 Javascript
Bootstrap学习笔记之环境配置(1)
2016/12/07 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
JavaScript简单实现的仿微博留言功能示例
2019/01/17 Javascript
分享一个vue项目“脚手架”项目的实现步骤
2019/05/26 Javascript
element-ui中按需引入的实现
2019/12/25 Javascript
[01:38]完美世界DOTA2联赛(PWL)宣传片:第一站
2020/10/26 DOTA
[03:07]完美世界DOTA2联赛PWL DAY10 决赛集锦
2020/11/11 DOTA
[45:16]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第一场 12.12
2020/12/16 DOTA
对python实现模板生成脚本的方法详解
2019/01/30 Python
python爬虫爬取幽默笑话网站
2019/10/24 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
python如何判断IP地址合法性
2020/04/05 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
日本AOKI官方商城:AOKI西装
2020/06/11 全球购物
中学教师岗位职责
2013/11/26 职场文书
机关党总支领导班子整改方案
2014/09/20 职场文书
2014最新党员批评与自我批评材料
2014/09/24 职场文书
分居协议书范本
2014/11/03 职场文书
校园广播站开场白
2015/06/01 职场文书
入团申请书格式
2019/06/20 职场文书
导游词之吉林花园山
2019/10/17 职场文书
正确使用MySQL update语句
2021/05/26 MySQL
MySQL索引失效场景及解决方案
2022/07/23 MySQL