微信小程序传值以及获取值方法的详解


Posted in Javascript onApril 29, 2019

微信小程序传值以及获取值方法,传值有两种方法,对应也有获取值得方法,

1、设置id的方法标识跳转后传递的参数值;

2、通过使用data - xxxx 的方法来标识要传递的值

微信小程序设置id的方法标识来传值

在要跳转的item处,设置一个id并给当前的id赋值上对应的key值,比如一部电影的id(后面带着id去下一个页面查询,详细信息)如:

微信小程序传值以及获取值方法的详解

后我们在js的bindtap的响应事件中获取,并传递到下一个界面中;

获取到id传的值

通过e.currentTarget.id;获取设置的id值,并通过设置全局对象的方式来传递数值,
获取全局对象 var app=getApp(); //设置全局的请求访问传递的参数 app.requestDetailid=id;

微信小程序传值以及获取值方法的详解

提示:其实我们也可以在,wxml中查看到我们设置的每一个item的id值

微信小程序传值以及获取值方法的详解

通过使用data - xxxx 的方法标识来传值

通过使用data - xxxx 的方法标识来传值,xxxx可以自定义取名 比如data-key等等都可以。

微信小程序传值以及获取值方法的详解微信小程序传值以及获取值方法的详解

如何获取data-xxxx传递的值?

在js的bindtap的响应事件中:

通过数据解析一层层找到数据,var id=e.target.dataset.id(根据你的data-id的取名)

微信小程序传值以及获取值方法的详解微信小程序传值以及获取值方法的详解

微信小程序如何跨页面获取值?

依据上面的方式设置要传递的值,页面跳转后,我们就需要在下一个页面拿到传递的数据(这个数据在传递前,就已经被设置成全局变量)

在跳转后的js页面,接收传递过来的数据detail.js

同样通过全局额方式取值出来,(即和app.js中取某个变量的值是一样的)

var movieid=getApp().MovieDetailid;
console.log(movieid);

微信小程序传值以及获取值方法的详解

到此为止,我们数值传递并接收成功,后面就可以根据我们接收的参数,进行进一步的操作了。

以上所述是小编给大家介绍的微信小程序传值以及获取值方法详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 客户端验证上传图片的大小(兼容IE和火狐)
Aug 15 Javascript
JavaScript中具名函数的多种调用方式总结
Nov 08 Javascript
常用的jQuery前端技巧收集
Dec 24 Javascript
JSP基于Bootstrap分页显示实例解析
Jun 12 Javascript
JavaScript实现瀑布流以及加载效果
Feb 11 Javascript
JS优化与惰性载入函数实例分析
Apr 06 Javascript
详解JS数值Number类型
Feb 07 Javascript
vue-cli webpack 引入swiper的操作方法
Sep 15 Javascript
Vue press 支持图片放大功能的实例代码
Nov 09 Javascript
react+redux仿微信聊天界面
Jun 21 Javascript
vue自定义指令和动态路由实现权限控制
Aug 28 Javascript
vue实现顶部菜单栏
Nov 08 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
Apr 29 #Javascript
详解JavaScript实现动态的轮播图效果
Apr 29 #Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
Apr 29 #Javascript
实现elementUI表单的全局验证的方法步骤
Apr 29 #Javascript
深入浅析Vue 中 ref 的使用
Apr 29 #Javascript
详解微信小程序实现跑马灯效果(附完整代码)
Apr 29 #Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
Apr 29 #Javascript
You might like
PHP数据库操作之基于Mysqli的数据库操作类库
2014/04/19 PHP
PHP实现显示照片exif信息的方法
2014/07/11 PHP
Laravel框架模板加载,分配变量及简单路由功能示例
2018/06/11 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
javascript+iframe 实现无刷新载入整页的代码
2010/03/17 Javascript
js querySelector和getElementById通过id获取元素的区别
2012/04/20 Javascript
JS中令人发指的valueOf方法介绍
2013/02/22 Javascript
JavaScript  cookie 跨域访问之广告推广
2016/04/20 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
2017/08/03 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
2018/01/15 Javascript
使用vue-router设置每个页面的title方法
2018/02/11 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
2018/09/04 Javascript
vue中使用微信公众号js-sdk踩坑记录
2019/03/29 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
2019/09/07 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
2019/11/19 Javascript
[02:42]岂曰无衣,与子同袍!DOTA2致敬每一位守护人
2020/02/17 DOTA
python实现simhash算法实例
2014/04/25 Python
Fiddler如何抓取手机APP数据包
2016/01/22 Python
对Python中创建进程的两种方式以及进程池详解
2019/01/14 Python
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
使用Python操作ArangoDB的方法步骤
2020/02/02 Python
Python configparser模块应用过程解析
2020/08/14 Python
10个顶级Python实用库推荐
2021/03/04 Python
吉尔德利巧克力公司:Ghirardelli Chocolate Company
2019/03/27 全球购物
Hotels.com拉丁美洲:从豪华酒店到经济型酒店的预定优惠和折扣
2019/12/09 全球购物
Linux操作面试题
2012/05/16 面试题
给水排水工程专业毕业生推荐信
2013/10/28 职场文书
施工材料员岗位职责
2014/02/12 职场文书
企业消防安全责任书
2014/07/23 职场文书
安全生产工作汇报材料
2014/10/28 职场文书
检讨书范文2000字
2015/01/28 职场文书
阿凡达观后感
2015/06/10 职场文书
Mysql数据库中datetime、bigint、timestamp来表示时间选择,谁来存储时间效率最高
2021/08/23 MySQL
Spring JPA 增加字段执行异常问题及解决
2022/06/10 Java/Android
Beekeeper Studio开源数据库管理工具比Navicat更炫酷
2022/06/21 数据库
Win11右下角图标点了没反应怎么办?Win11点击右下角图标无反应解决方法汇总
2022/07/07 数码科技