微信小程序 参数传递详解


Posted in Javascript onOctober 24, 2016

微信小程序的推出,无疑将会在移动互联网行业里再次掀起风浪。

有人会质疑小程序会不会火, 会不会火我不知道, 看微信的用户量即可明白一切。

微信小程序-参数传递

这里我找到两种小程序上的参数传递方式,为了方便,我单独拿出来和大家分享下.

一、通过事件进行参数传递

先来看眼小程序对事件的定义:

#什么是事件?

这里是列表文本事件是视图层到逻辑层的通讯方式。
这里是列表文本事件可以将用户的行为反馈到逻辑层进行处理。
这里是列表文本事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
这里是列表文本 事件对象可以携带额外信息,如id, dataset, touches。

很明确的指出了是视图层【wxml】到逻辑层【js】的通信方式,时间对象可以携带额外信息,用这个事件来传递参数肯定没错了,接下来我们就来实际看下例子:

视图.wxml

  <view id="tapTest" data-hi="MINA" bindtap="tapName"> Click me! </view>

逻辑.js

Page({
 tapName: function(event) {
      console.log(event.target)
 }
})

log打印

微信小程序 参数传递详解

可以看到 dataset 里面就是我们设置的data-hi="MINA"的值了。现在我们来看下刚刚我们写的, 首先 bindtap,以bind开头的就是要给他绑定个事件,这个事件的名字就是“=”号后面的数值就是绑定的事件名称,需要在 逻辑【js】层定义上。 然后就是传值了,注意到的朋友可以看到 我们这里写了data-hi 和我们平时写js的传值是同一个定义方法。这个data-*就对应事件的属性target里的dataset 值。这里我们需要调用的话就是 event.target.dataset.hi就能取到data-hi所对应的值。

这里需要注意下 data的定义名称: 书写方式: 以data-开头,多个单词由连字符-链接,不能有大写(大写会自动转成小写)如data-element-type,最终在 event.target.dataset 中会将连字符转成驼峰elementType。

官方示例:

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>

Page({
 bindViewTap:function(event){
  event.target.dataset.alphaBeta == 1 // - 会转为驼峰写法
  event.target.dataset.alphabeta == 2 // 大写会转为小写
 }
})

二、navigator 跳转url传参

*.wxml

<view class="btn-area">
 <navigator url="navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
 <navigator url="redirect?title=redirect" redirect hover-class="other-navigator-hover">在当前页打开</navigator>
</view>

*.js 跳到新页面之后在onload里面直接接收参数,接收方法也就是 options.[参数值]

Page({
 onLoad: function(options) {
  this.setData({
   title: options.title
  })
 }
})

好啦,今天就写到这里,我顺便把文档链接写上,上面写的文档里都有。我只是把它们搬出来了,用我的话说了一遍。 …(⊙_⊙;)…

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
奉献给JavaScript初学者的编写开发的七个细节
Jan 11 Javascript
Jquery的hover方法让鼠标经过li时背景变色
Sep 06 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
Oct 09 Javascript
javaScript中定义类或对象的五种方式总结
Dec 04 Javascript
javascript中的try catch异常捕获机制用法分析
Dec 14 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
Jan 19 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
Oct 20 Javascript
webpack 插件html-webpack-plugin的具体使用
Apr 09 Javascript
详解npm 配置项registry修改为淘宝镜像
Sep 07 Javascript
详解Vuex下Store的模块化拆分实践
Jul 31 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
js实现自定义右键菜单
May 18 Javascript
10分钟掌握XML、JSON及其解析
Dec 06 #Javascript
JavaScript的new date等日期函数在safari中遇到的坑
Oct 24 #Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
Oct 24 #Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
Oct 24 #Javascript
JavaScript reduce和reduceRight详解
Oct 24 #Javascript
js在ie下打开对话窗口的方法小结
Oct 24 #Javascript
浅谈AngularJs指令之scope属性详解
Oct 24 #Javascript
You might like
解析PHP实现下载文件的两种方法
2013/07/05 PHP
JavaScript DOM 学习第二章 编辑文本
2010/02/19 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
js获取url中指定参数值的示例代码
2013/12/14 Javascript
js实现连个数字相加而不是拼接的方法
2014/02/23 Javascript
javascript引用类型指针的工作方式
2015/04/13 Javascript
详解JavaScript跨域总结与解决办法
2016/10/31 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
Javascript实现页面滚动时导航智能定位
2017/05/06 Javascript
浅谈Vue数据绑定的原理
2018/01/08 Javascript
详解webpack babel的配置
2018/01/09 Javascript
微信小程序支付前端源码
2018/08/29 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
2019/10/11 Javascript
swiper自定义分页器的样式
2020/09/14 Javascript
Python控制多进程与多线程并发数总结
2016/10/26 Python
基于python中的TCP及UDP(详解)
2017/11/06 Python
解决Matplotlib图表不能在Pycharm中显示的问题
2018/05/24 Python
用python爬取租房网站信息的代码
2018/12/14 Python
python实现可逆简单的加密算法
2019/03/22 Python
django 连接数据库 sqlite的例子
2019/08/14 Python
Python实现图像的垂直投影示例
2020/01/17 Python
Python Django中间件使用原理及流程分析
2020/06/13 Python
python json.dumps() json.dump()的区别详解
2020/07/14 Python
5款实用的python 工具推荐
2020/10/13 Python
瑞典多品牌连锁店:Johnells
2021/01/13 全球购物
自荐信格式写作方法有哪些呢
2013/11/20 职场文书
内容编辑个人求职信
2013/12/10 职场文书
大学新生军训感言
2014/02/25 职场文书
会计专业导师推荐信
2014/03/08 职场文书
2014和解协议书范文
2014/09/15 职场文书
2014年幼儿园班级工作总结
2014/12/17 职场文书
离婚民事起诉状
2015/08/03 职场文书
学生会主席任命书
2015/09/21 职场文书
2016年教师节贺卡寄语
2015/12/04 职场文书
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS
Python3使用Qt5来实现简易的五子棋小游戏
2022/05/02 Python