微信小程序 页面传值详解


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时ie6和ie7,ff的区别
Aug 19 Javascript
js中的值类型和引用类型小结 文字说明与实例
Dec 12 Javascript
javascript中局部变量和全局变量的区别详解
Feb 27 Javascript
nw.js实现类似微信的聊天软件
Mar 16 Javascript
动态加载jQuery的方法
Jun 16 Javascript
Javascript中关于Array.filter()的妙用详解
Dec 04 Javascript
Angular4 组件通讯方法大全(推荐)
Jul 12 Javascript
解决$store.getters调用不执行的问题
Nov 08 Javascript
JavaScript实现多个物体同时运动
Mar 12 Javascript
JS原型prototype和__proto__用法实例分析
Mar 14 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
Apr 08 Javascript
你不知道的SpringBoot与Vue部署解决方案
Nov 09 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页面间传递参数实例代码
2008/06/05 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
use jscript List Installed Software
2007/06/11 Javascript
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
2010/06/28 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
jquery链式操作的正确使用方法
2014/01/06 Javascript
Jquery实现仿腾讯微博发表广播
2014/11/17 Javascript
iframe里使用JavaScript控制主页转向的方法
2015/04/03 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
2015/05/09 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
2016/08/24 Javascript
jQuery插件autocomplete使用详解
2017/02/04 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
基于Vue.js实现tab滑块效果
2017/07/23 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
2017/11/13 Javascript
vue 实现数字滚动增加效果的实例代码
2018/07/06 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
2019/01/03 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
2019/11/07 Javascript
详解 javascript对象创建模式
2020/10/30 Javascript
[01:06:18]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第二场 1月26日
2021/03/11 DOTA
详解python中requirements.txt的一切
2017/03/03 Python
python分布式环境下的限流器的示例
2017/10/26 Python
基于python 处理中文路径的终极解决方法
2018/04/12 Python
Python简单实现区域生长方式
2020/01/16 Python
Python虚拟环境库virtualenvwrapper安装及使用
2020/06/17 Python
keras的三种模型实现与区别说明
2020/07/03 Python
python爬虫构建代理ip池抓取数据库的示例代码
2020/09/22 Python
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
迪卡侬荷兰官网:Decathlon荷兰
2017/10/29 全球购物
生物医学工程专业学生求职信范文分享
2013/12/14 职场文书
小学岗位竞聘方案
2014/01/22 职场文书
教师研修随笔感言
2014/01/23 职场文书
村级四风对照检查材料
2014/08/24 职场文书
机械设计专业大学生职业生涯规划书范文
2014/09/13 职场文书
Python+腾讯云服务器实现每日自动健康打卡
2021/12/06 Python