微信小程序 页面传值详解


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 限制输入脚本大全
Nov 03 Javascript
javascript window.opener的用法分析
Apr 07 Javascript
javascript实现div的显示和隐藏的小例子
Jun 25 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
Mar 26 Javascript
js中遍历Map对象的方法
Jul 27 Javascript
vue-router 中router-view不能渲染的解决方法
May 23 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
Aug 19 Javascript
vue 中固定导航栏的实例代码
Nov 01 Javascript
微信小程序实现搜索功能
Mar 10 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
Mar 31 Javascript
vue项目在线上服务器访问失败原因分析
Aug 14 Javascript
vue组件实现移动端九宫格转盘抽奖
Oct 16 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的ob_start来生成静态页面的方法分析
2011/03/09 PHP
PHP创建自己的Composer包方法
2018/04/09 PHP
用JavaScript脚本实现Web页面信息交互
2006/10/11 Javascript
简单实例处理url特殊符号&处理(2种方法)
2013/04/02 Javascript
SOSO地图JS画出标注和中心点以html形式运行
2013/08/09 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
2013/08/12 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
2014/04/03 Javascript
Angular中的Promise对象($q介绍)
2015/03/03 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
2016/12/13 Javascript
jQuery实现的手风琴侧边菜单效果
2017/03/29 jQuery
VUE长按事件需求详解
2017/10/18 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
Vue头像处理方案小结
2018/07/26 Javascript
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
nodejs提示:cross-device link not permitted, rename错误的解决方法
2019/06/10 NodeJs
vue通过过滤器实现数据格式化
2020/07/20 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
2020/08/12 Javascript
Openlayers学习之加载鹰眼控件
2020/09/28 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
python算法学习之计数排序实例
2013/12/18 Python
Python中使用装饰器来优化尾递归的示例
2016/06/18 Python
Python中join函数简单代码示例
2018/01/09 Python
python中cPickle类使用方法详解
2018/08/27 Python
对python opencv 添加文字 cv2.putText 的各参数介绍
2018/12/05 Python
Python基础之循环语句用法示例【for、while循环】
2019/03/23 Python
关于python中plt.hist参数的使用详解
2019/11/28 Python
基于python检查SSL证书到期情况代码实例
2020/04/04 Python
Django之富文本(获取内容,设置内容方式)
2020/05/21 Python
谈谈python垃圾回收机制
2020/09/27 Python
Python实现EM算法实例代码
2020/10/04 Python
美国木工工具和用品商店:Woodcraft
2019/10/30 全球购物
华为慧通笔试题
2016/04/22 面试题
农村结婚典礼主持词
2015/06/29 职场文书
2016年12月份红领巾广播稿
2015/12/21 职场文书
SQL Server数据库查询出现阻塞之性能调优
2022/04/10 SQL Server
Nginx 配置 HTTPS的详细过程
2022/05/30 Servers