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


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 相关文章推荐
jquery HotKeys轻松搞定键盘事件代码
Aug 30 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
Nov 19 Javascript
js事件冒泡实例分享(已测试)
Apr 23 Javascript
使用jQuery仿苹果官网焦点图特效
Dec 23 Javascript
JQuery实现左右滚动菜单特效
Sep 28 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
Mar 08 Javascript
AngularJS  $on、$emit和$broadcast的使用
Sep 05 Javascript
详解Angular调试技巧之报错404(not found)
Jan 31 Javascript
微信小程序用户信息encryptedData详解
Aug 24 Javascript
Vue源码学习之关于对Array的数据侦听实现
Apr 23 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
Oct 21 Javascript
js String.prototype.trim字符去前后空格的扩展
Aug 23 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
大师制作的中短波矿石收音机
2020/04/02 无线电
PHP字符串的编码问题的详细介绍
2013/04/27 PHP
Zend Studio 实用快捷键一览表(精心整理)
2013/08/10 PHP
详解WordPress开发中用于获取分类及子页面的函数用法
2016/01/08 PHP
PHP设计模式之命令模式示例详解
2020/12/20 PHP
如何快速的呈现我们的网页的技巧整理
2007/07/01 Javascript
改善你的jQuery的25个步骤 千倍级效率提升
2010/02/11 Javascript
jquery解析JSON数据示例代码
2014/03/17 Javascript
JS仿淘宝实现的简单滑动门效果代码
2015/10/14 Javascript
js与applet相互调用的方法
2016/06/22 Javascript
jQuery实现ToolTip元素定位显示功能示例
2016/11/23 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
JS获取填报扩展单元格控件的值的解决办法
2017/07/14 Javascript
javaScript封装的各种写法
2017/08/14 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
详解Nuxt.js中使用Element-UI填坑
2019/09/06 Javascript
vue学习笔记之Vue中css动画原理简单示例
2020/02/29 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
2020/05/31 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
2020/06/01 Javascript
Python中使用ConfigParser解析ini配置文件实例
2014/08/30 Python
python中执行shell命令的几个方法小结
2014/09/18 Python
怎样使用Python脚本日志功能
2016/08/14 Python
Python格式化输出%s和%d
2018/05/07 Python
python3基于OpenCV实现证件照背景替换
2018/07/18 Python
python自定义时钟类、定时任务类
2021/02/22 Python
python爬取百度贴吧前1000页内容(requests库面向对象思想实现)
2019/08/10 Python
pycharm + django跨域无提示的解决方法
2020/12/06 Python
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
2013/11/18 HTML / CSS
水芝澳美国官网:H2O Plus
2016/10/15 全球购物
阿联酋航空官方网站:Emirates
2017/10/17 全球购物
迪卡侬波兰体育用品商店:Decathlon波兰
2020/03/31 全球购物
演讲比赛获奖感言
2014/02/02 职场文书
求职简历自荐信
2014/06/18 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
开会通知
2015/04/20 职场文书
《秦兵马俑》教学反思
2016/02/24 职场文书