微信小程序 页面传值详解


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父窗口控制只弹出一个子窗口
Apr 10 Javascript
jquery $.each() 使用小探
Aug 23 Javascript
javascript使用onclick事件改变选中行的颜色
Dec 30 Javascript
JavaScript实现表格点击排序的方法
May 11 Javascript
JS实现可关闭的对联广告效果代码
Sep 14 Javascript
JS实现DIV容器赋值的方法
Dec 14 Javascript
js生成随机颜色方法代码分享(三种)
Dec 29 Javascript
jQuery实现的背景颜色渐变动画效果示例
Mar 24 jQuery
Vuejs仿网易云音乐实现听歌及搜索功能
Mar 30 Javascript
vue中使用ueditor富文本编辑器
Feb 08 Javascript
原生JS实现获取及修改CSS样式的方法
Sep 04 Javascript
jQuery cookie的公共方法封装和使用示例
Jun 01 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
完美解决dedecms中的[html][/html]和[code][/code]问题
2007/03/20 PHP
php的XML文件解释类应用实例
2014/09/22 PHP
PHP获取POST数据的几种方法汇总
2015/03/03 PHP
开发跨浏览器javascript常见注意事项
2009/01/01 Javascript
深入探寻javascript定时器
2015/01/02 Javascript
JavaScript中的bold()方法使用详解
2015/06/08 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
2016/04/21 Javascript
微信小程序 欢迎界面开发的实例详解
2016/11/30 Javascript
微信小程序云开发使用方法新手初体验
2019/05/16 Javascript
layUI实现前端分页和后端分页
2019/07/27 Javascript
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
layui实现数据表格隐藏列的示例
2019/10/25 Javascript
python用于url解码和中文解析的小脚本(python url decoder)
2013/08/11 Python
python插入排序算法实例分析
2015/07/03 Python
CentOS下使用yum安装python-pip失败的完美解决方法
2017/08/16 Python
python+numpy实现的基本矩阵操作示例
2019/07/19 Python
Flask框架钩子函数功能与用法分析
2019/08/02 Python
Python 中@property的用法详解
2020/01/15 Python
Python 格式化打印json数据方法(展开状态)
2020/02/27 Python
利用纯CSS3实现动态的自行车特效源码
2017/01/20 HTML / CSS
微软英国官方网站:Microsoft英国
2016/10/15 全球购物
德国PC硬件网站:CASEKING
2016/10/20 全球购物
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
澳大利亚最大的网上油画销售画廊:Direct Art Australia
2018/04/15 全球购物
有趣的流行文化T恤、马克杯、手机壳和更多:Look Human
2019/01/07 全球购物
SQL Server提供的3种恢复模型都是什么? 有什么区别?
2012/05/13 面试题
介绍一下MD5加密算法
2016/11/12 面试题
大三学习计划书范文
2014/05/02 职场文书
小学家长学校培训材料
2014/08/24 职场文书
群众路线学习心得体会范文
2014/11/05 职场文书
单位实习介绍信
2015/05/05 职场文书
青年教师听课心得体会
2016/01/15 职场文书
MySQL获取所有分类的前N条记录
2021/05/07 MySQL
Pandas||过滤缺失数据||pd.dropna()函数的用法说明
2021/05/14 Python
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python
关于Python OS模块常用文件/目录函数详解
2021/07/01 Python