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


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代码优化 事件委托篇
Nov 01 Javascript
JavaScript中的连字符详解
Nov 28 Javascript
对 jQuery 中 data 方法的误解分析
Jun 18 Javascript
JavaScript中遍历对象的property的3种方法介绍
Dec 30 Javascript
有关Promises异步问题详解
Nov 13 Javascript
学习JavaScript事件流和事件处理程序
Jan 25 Javascript
第五章之BootStrap 栅格系统
Apr 25 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
Feb 04 Javascript
表格展示利器 Bootstrap Table实例代码
Sep 06 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
Sep 19 Javascript
vue+iview使用树形控件的具体使用
Nov 02 Javascript
JavaScript 判断浏览器是否是IE
Feb 19 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生成不重复随机数的方法汇总
2014/11/19 PHP
PHP实现接收二进制流转换成图片的方法
2017/01/10 PHP
PHP-FPM和Nginx的通信机制详解
2019/02/01 PHP
js常用函数 不错
2006/09/08 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
2013/01/27 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
2014/03/10 Javascript
jQuery 调用WebService 实例讲解
2016/06/28 Javascript
jQuery实现动态删除LI的方法
2017/05/30 jQuery
微信JSSDK调用微信扫一扫功能的方法
2017/07/25 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
2017/10/18 Javascript
基于Vue实现微信小程序的图文编辑器
2018/07/25 Javascript
vue component 中引入less文件报错 Module build failed
2019/04/17 Javascript
vue2.0自定义指令示例代码详解
2019/04/25 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
2020/04/11 Javascript
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
利用python打印出菱形、三角形以及矩形的方法实例
2017/08/08 Python
关于Python数据结构中字典的心得
2017/12/04 Python
python 实现的发送邮件模板【普通邮件、带附件、带图片邮件】
2019/07/06 Python
python multiprocessing多进程变量共享与加锁的实现
2019/10/02 Python
基于FME使用Python过程图解
2020/05/13 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
python爬取代理ip的示例
2020/12/18 Python
html5视频播放_动力节点Java学院整理
2017/07/13 HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
2014/08/22 HTML / CSS
HTML5标签使用方法详解
2015/11/27 HTML / CSS
HTML5+CSS3实现机器猫
2016/10/17 HTML / CSS
惠普美国官方商店:HP Official Store
2016/08/28 全球购物
一道写SQL的面试题和答案
2013/11/19 面试题
标记环介质访问控制协议
2016/03/27 面试题
儿科护士自我鉴定
2013/10/14 职场文书
女大学生自我鉴定
2013/12/09 职场文书
小学毕业感言150字
2014/02/05 职场文书
导航工程专业自荐信
2014/09/02 职场文书
2015年党员个人剖析材料
2014/12/18 职场文书
Vue + iView实现Excel上传功能的完整代码
2021/06/22 Vue.js
Python音乐爬虫完美绕过反爬
2021/08/30 Python