微信小程序 参数传递详解


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 相关文章推荐
js文字滚动停顿效果代码
Jun 28 Javascript
js下用层来实现select的title提示属性
Feb 23 Javascript
简约JS日历控件 实例代码
Jul 12 Javascript
JQuery悬停控制图片轮播——代码简单
Aug 05 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
Dec 03 Javascript
jQuery插件实现文字无缝向上滚动效果代码
Feb 25 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
Aug 24 Javascript
微信小程序 Button 组件详解及简单实例
Jan 10 Javascript
package.json文件配置详解
Jun 15 Javascript
微信小程序实现弹出菜单
Jul 19 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
Sep 16 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
Apr 13 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设计模式 Delegation(委托模式)
2011/06/26 PHP
页面乱码问题的根源及其分析
2013/08/09 PHP
PHP设计模式之观察者模式(Observer)详细介绍和代码实例
2014/04/08 PHP
PHP页面跳转操作实例分析(header方法)
2016/09/28 PHP
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
2017/05/04 PHP
php生成条形码的图片的实例详解
2017/09/13 PHP
tagName的使用,留一笔
2006/06/26 Javascript
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
2007/09/04 Javascript
jQuery 过滤not()与filter()实例代码
2012/05/10 Javascript
Html5+jQuery+CSS制作相册小记录
2016/12/30 Javascript
JavaScript实现的商品抢购倒计时功能示例
2017/04/17 Javascript
微信小程序实现点击返回顶层的方法
2017/07/12 Javascript
JS原生轮播图的简单实现(推荐)
2017/07/22 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
2018/06/20 Javascript
基于nodejs的雪碧图制作工具的示例代码
2018/11/05 NodeJs
小程序跨页面交互的作用与方法详解
2020/01/07 Javascript
Python3实现从文件中读取指定行的方法
2015/05/22 Python
Python双向循环链表实现方法分析
2018/07/30 Python
解决python打不开文件(文件不存在)的问题
2019/02/18 Python
windows上彻底删除jupyter notebook的实现
2020/04/13 Python
浅谈pytorch 模型 .pt, .pth, .pkl的区别及模型保存方式
2020/05/25 Python
Django用户登录与注册系统的实现示例
2020/06/03 Python
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
2012/12/19 HTML / CSS
为中国消费者甄选天下优品:网易严选
2016/08/11 全球购物
BASIC HOUSE官方旗舰店:韩国著名的服装品牌
2018/09/27 全球购物
大学生入党思想汇报
2014/01/14 职场文书
高中语文教学反思
2014/01/16 职场文书
公司业务员岗位职责
2014/03/18 职场文书
专家推荐信模板
2014/05/09 职场文书
英语系毕业生求职信
2014/07/13 职场文书
工作说明书格式
2014/07/29 职场文书
村班子对照检查材料
2014/08/18 职场文书
超市店庆活动方案
2014/08/31 职场文书
党员十八大心得体会
2014/09/12 职场文书
医德医风个人总结
2015/02/28 职场文书
element tree树形组件回显数据问题解决
2022/08/14 Javascript