微信小程序 页面传值详解


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 相关文章推荐
使用jQuery的ajax功能实现的RSS Reader 代码
Sep 03 Javascript
基于jQuery的试卷自动排版系统实现代码
Jan 06 Javascript
javascript实现行拖动的方法
May 27 Javascript
JS 对象(Object)和字符串(String)互转方法
May 20 Javascript
AngularJS 工作原理详解
Aug 18 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
Dec 12 Javascript
深入理解javascript的getTime()方法
Feb 16 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
Jun 28 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
Sep 12 Javascript
Angular2的管道Pipe的使用方法
Nov 07 Javascript
jquery.pager.js分页实现详解
Jul 29 jQuery
Vuex 模块化使用详解
Jul 31 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
星际RPG字典
2020/03/04 星际争霸
php中将地址生成迅雷快车旋风链接的代码[测试通过]
2011/04/20 PHP
IE6中链接A的href为javascript协议时不在当前页面跳转
2014/06/05 Javascript
javascript常用正则表达式汇总
2015/07/31 Javascript
基于jquery实现智能提示控件intellSeach.js
2016/03/17 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
2016/12/17 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
2016/12/26 Javascript
微信小程序实现点击返回顶层的方法
2017/07/12 Javascript
浅谈Webpack核心模块tapable解析
2018/09/11 Javascript
小程序组件之仿微信通讯录的实现代码
2018/09/12 Javascript
vue实现微信分享链接添加动态参数的方法
2019/04/29 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
2019/06/04 jQuery
JS实现横向轮播图(初级版)
2020/06/24 Javascript
微信小程序实现签到弹窗动画
2020/09/21 Javascript
[49:56]VG vs Optic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python自动查询12306余票并发送邮箱提醒脚本
2018/05/21 Python
python引入不同文件夹下的自定义模块方法
2018/10/27 Python
python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择
2020/02/26 Python
Python Tkinter实例——模拟掷骰子
2020/10/24 Python
python 模拟登陆github的示例
2020/12/04 Python
纯CSS3制作漂亮带动画效果的主机价格表
2015/04/25 HTML / CSS
css3实现文字扫光渐变动画效果的示例
2017/11/07 HTML / CSS
AmazeUI 等分网格的实现示例
2020/08/25 HTML / CSS
马来西亚最大的电器网站:Senheng
2017/10/13 全球购物
您的时尚,您的生活方式:DTLR Villa
2019/12/25 全球购物
思想专业自荐信范文
2013/12/25 职场文书
小学三年级数学教学反思
2014/01/31 职场文书
怎么写好自荐书
2014/03/02 职场文书
高三高考决心书
2014/03/11 职场文书
财产公证书样本
2014/04/04 职场文书
保研推荐信
2014/05/09 职场文书
个人总结格式范文
2015/03/09 职场文书
篮球拉拉队口号
2015/12/25 职场文书
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js
Python 发送SMTP邮件的简单教程
2021/06/24 Python
Java时间工具类Date的常用处理方法
2022/05/25 Java/Android