微信小程序 页面传值详解


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 indexOf函数使用说明
Jul 03 Javascript
jQuery的slideToggle方法实例
May 07 Javascript
JavaScript 上万关键字瞬间匹配实现代码
Jul 07 Javascript
js二维数组定义和初始化的三种方法总结
Mar 03 Javascript
js delete 用法(删除对象属性及变量)
Aug 24 Javascript
jQuery中find()方法用法实例
Jan 07 Javascript
javascript实现dom元素可拖动
Mar 21 Javascript
JS简单实现浮动窗口效果示例
Sep 07 Javascript
assert()函数用法总结(推荐)
Jan 25 Javascript
微信小程序 循环及嵌套循环的使用总结
Sep 26 Javascript
Vue3.x源码调试的实现方法
Oct 13 Javascript
JS自定义滚动条效果
Mar 13 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
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
如何确保JavaScript的执行顺序 之jQuery.html深度分析
2011/03/03 Javascript
基于jquery实现控制经纬度显示地图与卫星
2013/05/20 Javascript
浅谈Javascript变量作用域问题
2014/12/16 Javascript
jQuery固定元素插件scrolltofixed使用指南
2015/04/21 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
2015/05/25 Javascript
JavaScript对Json的增删改属性详解
2016/06/02 Javascript
解决Window10系统下Node安装报错的问题分析
2016/12/13 Javascript
Vue监听数据对象变化源码
2017/03/09 Javascript
JS正则表达式判断有效数实例代码
2017/03/13 Javascript
微信公众平台获取access_token的方法步骤
2019/03/29 Javascript
Laravel admin实现消息提醒、播放音频功能
2019/07/10 Javascript
在layui.use 中自定义 function 的正确方法
2019/09/16 Javascript
微信小程序制作扭蛋机代码实例
2019/09/24 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
[49:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第二场 3月4日
2021/03/11 DOTA
Python安装Imaging报错:The _imaging C module is not installed问题解决方法
2014/08/22 Python
python网络编程之读取网站根目录实例
2014/09/30 Python
python开发之for循环操作实例详解
2015/11/12 Python
Python实现多线程抓取网页功能实例详解
2017/06/08 Python
Python字典及字典基本操作方法详解
2018/01/30 Python
Python爬虫框架Scrapy基本用法入门教程
2018/07/26 Python
详解python中自定义超时异常的几种方法
2019/07/29 Python
python中类的输出或类的实例输出为这种形式的原因
2019/08/12 Python
深入了解Python enumerate和zip
2020/07/16 Python
Python3中对json格式数据的分析处理
2021/01/28 Python
猎人靴英国官网:Hunter Boots
2017/02/02 全球购物
奢华时尚的独特视角:La Garçonne
2018/06/07 全球购物
护士求职信
2014/07/05 职场文书
公司总经理助理岗位职责
2014/07/09 职场文书
安全月宣传标语
2014/10/07 职场文书
2015年科协工作总结
2015/05/19 职场文书
元旦晚会开场白
2015/05/29 职场文书
工作年限证明模板
2015/06/15 职场文书
python神经网络学习 使用Keras进行简单分类
2022/05/04 Python
Vue3实现简易音乐播放器组件
2022/08/14 Vue.js