微信小程序 页面传值详解


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 相关文章推荐
HTML中不支持静态Expando的元素的问题
Mar 08 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
Apr 16 Javascript
JS 跳转页面延迟2种方法
Mar 29 Javascript
AngularJS初始化静态模板详解
Jan 14 Javascript
如何写好你的JavaScript【推荐】
Mar 02 Javascript
微信小程序实战之轮播图(3)
Apr 17 Javascript
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
Vue数组更新及过滤排序功能
Aug 10 Javascript
浅谈关于.vue文件中style的scoped属性
Aug 19 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
Feb 11 Javascript
js html实现计算器功能
Nov 13 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
May 20 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
分享最受欢迎的5款PHP框架
2014/11/27 PHP
PHP中使用正则表达式提取中文实现笔记
2015/01/20 PHP
php的闭包(Closure)匿名函数详解
2015/02/22 PHP
php获取本周星期一具体日期的方法
2015/04/20 PHP
PHP模板解析类实例
2015/07/09 PHP
使用PHP和JavaScript判断请求是否来自微信内浏览器
2015/08/18 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
jquery datepicker参数介绍和示例
2014/04/15 Javascript
Javascript代码实现仿实例化类
2015/04/03 Javascript
JS实现日期时间动态显示的方法
2015/12/07 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
2016/06/12 Javascript
老生常谈JQuery data方法的使用
2016/09/09 Javascript
javascript 正则表达式去空行方法
2017/01/24 Javascript
webpack2.0配置postcss-loader的方法
2017/08/17 Javascript
jquery实现用户登陆界面(示例讲解)
2017/09/06 jQuery
Vue项目中设置背景图片方法
2018/02/21 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
2018/07/13 Javascript
nodejs实现范围请求的实现代码
2018/10/12 NodeJs
Node.js assert断言原理与用法分析
2019/01/04 Javascript
微信小程序在text文本实现多种字体样式
2019/11/08 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
2020/05/03 Javascript
python的类方法和静态方法
2014/12/13 Python
python获取当前日期和时间的方法
2015/04/30 Python
在Linux中通过Python脚本访问mdb数据库的方法
2015/05/06 Python
在Python中的Django框架中进行字符串翻译
2015/07/27 Python
django中的setting最佳配置小结
2017/11/21 Python
Python使用pyh生成HTML文档的方法示例
2018/03/10 Python
基于python实现高速视频传输程序
2019/05/05 Python
解决django接口无法通过ip进行访问的问题
2020/03/27 Python
python有几个版本
2020/06/17 Python
python的setattr函数实例用法
2020/12/16 Python
How TDD works
2012/09/30 面试题
出国签证在职证明
2014/01/16 职场文书
《与朱元思书》的教学反思
2014/04/17 职场文书
社团活动总结书
2014/06/27 职场文书