微信小程序 参数传递详解


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中的View-Model使用介绍
Aug 11 Javascript
Jquery Change与bind事件代码
Sep 29 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
Sep 20 Javascript
jQuery关键词说明插件cluetip使用指南
Apr 21 Javascript
Bootstrap安装环境配置教程分享
May 27 Javascript
JS中BOM相关知识点总结(必看篇)
Nov 22 Javascript
vue操作下拉选择器获取选择的数据的id方法
Aug 24 Javascript
vue-quill-editor富文本编辑器简单使用方法
Sep 21 Javascript
ES6 Promise对象的应用实例分析
Jun 27 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
微信小程序组件传值图示过程详解
Jul 31 Javascript
基于javascript原生判断DOM是否加载完毕
Oct 14 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
比特率,大家看看这个就不用收音机音质去比MP3音质了
2021/03/01 无线电
详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)
2017/04/07 PHP
js自带函数备忘 数组
2006/12/29 Javascript
3Z版基于jquery的图片复选框(asp.net+jquery)
2010/04/12 Javascript
Javascript Object.extend
2010/05/18 Javascript
给ListBox添加双击事件示例代码
2013/12/02 Javascript
IE6 hack for js 集锦
2014/09/23 Javascript
基于javascript实现单选及多选的向右和向左移动实例
2015/07/25 Javascript
layer实现弹窗提交信息
2016/12/12 Javascript
详解jQuery中基本的动画方法
2016/12/14 Javascript
Angularjs使用指令做表单校验的方法
2017/03/31 Javascript
Swiper实现轮播图效果
2017/07/03 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
2017/10/10 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
2018/03/12 Javascript
vue代理和跨域问题的解决
2018/07/18 Javascript
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
vue实现简易的双向数据绑定
2020/12/29 Vue.js
[02:45]DOTA2英雄敌法师基础教程
2013/11/25 DOTA
[58:42]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第一局
2016/02/27 DOTA
从零学Python之入门(五)缩进和选择
2014/05/27 Python
Django model序列化为json的方法示例
2018/10/16 Python
对Django中内置的User模型实例详解
2019/08/16 Python
Python HTMLTestRunner可视化报告实现过程解析
2020/04/10 Python
python绘制趋势图的示例
2020/09/17 Python
python跨文件使用全局变量的实现
2020/11/17 Python
护理专业本科生自荐信
2013/10/01 职场文书
采购员岗位职责
2013/11/15 职场文书
应届毕业生自我鉴定范文
2013/12/27 职场文书
活动策划求职信模板
2014/04/21 职场文书
常务副总经理任命书
2014/06/05 职场文书
2015年党风廉政承诺书
2015/01/22 职场文书
2015年底工作总结范文
2015/05/15 职场文书
小学大队委竞选口号
2015/12/25 职场文书
2016年中学端午节主题活动总结
2016/04/01 职场文书
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL
vmware虚拟机打不开vmx文件怎么办 ?vmware虚拟机vmx文件打开方法
2022/04/08 数码科技