微信小程序 页面传值详解


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 checkbox全选、取消全选实现代码
Mar 05 Javascript
JQuery 选项卡效果(JS与HTML的分离)
Apr 01 Javascript
使用JS读秒使用示例
Sep 21 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
Dec 13 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
Jun 24 Javascript
js采用concat和sort将N个数组拼接起来的方法
Jan 21 Javascript
终于实现了!精彩的jquery弹幕效果
Jul 18 Javascript
jQuery实现限制文本框的输入长度
Jan 11 Javascript
WdatePicker.js时间日期插件的使用方法
Jul 26 Javascript
js 毫秒转天时分秒的实例
Nov 17 Javascript
layui点击弹框页面 表单请求的方法
Sep 21 Javascript
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
初学CAKEPHP 基础教程
2009/11/02 PHP
php设计模式 Composite (组合模式)
2011/06/26 PHP
PHP中isset与array_key_exists的区别实例分析
2015/06/02 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
2020/02/06 PHP
javascript new 需不需要继续使用
2009/07/02 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
2013/04/26 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
2013/12/17 Javascript
在AngularJS应用中实现一些动画效果的代码
2015/06/18 Javascript
javascript常见数据验证插件大全
2015/08/03 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
2015/08/28 Javascript
js实现select下拉框菜单
2015/12/08 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
2016/06/03 Javascript
老生常谈onBlur事件与onfocus事件(js)
2016/07/09 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
2017/02/13 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
2017/06/09 Javascript
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
2019/05/14 Javascript
Vue 解决多级动态面包屑导航的问题
2019/11/04 Javascript
创建nuxt.js项目流程图解
2020/03/13 Javascript
三步搞定:Vue.js调用Android原生操作
2020/09/07 Javascript
rabbitmq(中间消息代理)在python中的使用详解
2017/12/14 Python
Python中xrange与yield的用法实例分析
2017/12/26 Python
对python字典元素的添加与修改方法详解
2018/07/06 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
Python实现制度转换(货币,温度,长度)
2019/07/14 Python
python lambda表达式在sort函数中的使用详解
2019/08/28 Python
python如何进行矩阵运算
2020/06/05 Python
基于ccs3的timeline时间线实现方法
2020/04/30 HTML / CSS
校园活动策划书范文
2014/01/10 职场文书
公务员综合考察材料
2014/02/01 职场文书
土地转让协议书
2014/09/27 职场文书
社区活动总结
2015/02/04 职场文书
2016学校元旦晚会经典开场白台词
2015/12/03 职场文书