微信小程序 页面传值详解


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 相关文章推荐
理解JSON:3分钟课程
Oct 28 Javascript
js采用map取到id集合组并且实现点击一行选中一行
Dec 16 Javascript
JS对img标签进行优化使用onerror显示默认图像
Apr 24 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
May 11 Javascript
jQuery动态修改超链接地址的方法
Feb 13 Javascript
Javascript中的包装类型介绍
Apr 02 Javascript
基于javascript实现仿百度输入框自动匹配功能
Jan 03 Javascript
jquery实现可旋转可拖拽的文字效果代码
Jan 27 Javascript
使用vue-infinite-scroll实现无限滚动效果
Jun 22 Javascript
vue通过style或者class改变样式的实例代码
Oct 30 Javascript
通过JS运行机制的角度说说作用域
Mar 12 Javascript
keep-alive保持组件状态的方法
Dec 02 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/08/08 PHP
浅谈PHP变量作用域以及地址引用问题
2013/12/27 PHP
php隐藏IP地址后两位显示为星号的方法
2014/11/21 PHP
PHP Oauth授权和本地加密实现方法
2016/08/12 PHP
PHP基于简单递归函数求一个数阶乘的方法示例
2017/04/26 PHP
一段效率很高的for循环语句使用方法
2007/08/13 Javascript
js 小贴士一星期合集
2010/04/07 Javascript
JavaScript 语言的递归编程
2010/05/18 Javascript
使用jquery hover事件实现表格的隔行换色功能示例
2013/09/03 Javascript
jQuery的DOM操作之删除节点示例
2014/01/03 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
2014/01/07 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
2016/06/21 Javascript
vuejs动态组件给子组件传递数据的方法详解
2016/09/09 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
AngularJS过滤器filter用法分析
2016/12/11 Javascript
彻底理解js面向对象之继承
2018/02/04 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
2020/05/28 Javascript
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
layui下拉列表select实现可输入查找的方法
2019/09/28 Javascript
JavaScript实现简单计算器
2020/03/19 Javascript
Openlayers学习之加载鹰眼控件
2020/09/28 Javascript
Python的类实例属性访问规则探讨
2015/01/30 Python
Python的Django框架中settings文件的部署建议
2015/05/30 Python
Django + Uwsgi + Nginx 实现生产环境部署的方法
2018/06/20 Python
Python 获取div标签中的文字实例
2018/12/20 Python
python3.7 sys模块的具体使用
2019/07/22 Python
python生成随机红包的实例写法
2019/09/02 Python
使用python自动追踪你的快递(物流推送邮箱)
2020/03/17 Python
Python3 socket即时通讯脚本实现代码实例(threading多线程)
2020/06/01 Python
美特斯邦威官方商城:邦购网
2016/10/13 全球购物
介绍一下Python下range()函数的用法
2013/11/07 面试题
七年级地理教学反思
2014/01/26 职场文书
乡镇干部个人对照检查材料(群众路线)
2014/09/26 职场文书
2014财务年终工作总结
2014/12/08 职场文书
详解Redis复制原理
2021/06/04 Redis
全网非常详细的pytest配置文件
2022/07/15 Python