微信小程序 参数传递详解


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 相关文章推荐
HTML node相关的一些资料整理
Jan 01 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
Apr 20 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
Feb 07 Javascript
js实现获取当前时间是本月第几周的方法
Aug 11 Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 Javascript
Bootstrap每天必学之警告框插件
Apr 26 Javascript
详解VueJS 数据驱动和依赖追踪分析
Jul 26 Javascript
微信小程序getPhoneNumber获取用户手机号
Sep 29 Javascript
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
学习Vue组件实例
Apr 28 Javascript
openlayers实现地图弹窗
Sep 25 Javascript
js+html+css实现手动轮播和自动轮播
Dec 30 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实现事件监听与触发的方法
2014/11/21 PHP
php中实现xml与mysql数据相互转换的方法
2014/12/25 PHP
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
PHP用函数嵌入网站访问量计数器
2017/10/27 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
yii2实现Ueditor百度编辑器的示例代码
2018/11/02 PHP
input、button的不同type值在ajax提交表单时导致的陷阱
2009/02/24 Javascript
Jquery UI震动效果实现原理及步骤
2013/02/04 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
2014/04/23 Javascript
js/jquery判断浏览器的方法小结
2014/09/02 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
2015/12/22 Javascript
js 连续赋值的简单实现
2016/06/13 Javascript
BootStrap 超链接变按钮的实现方法
2016/09/25 Javascript
值得分享的Bootstrap Table使用教程
2016/11/23 Javascript
ES6通过babel转码使用webpack使用import关键字
2016/12/13 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
2017/01/06 Javascript
layui选项卡效果实现代码
2017/05/19 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
2017/06/27 Javascript
AngularJS 中ui-view传参的实例详解
2017/08/25 Javascript
vue一个页面实现音乐播放器的示例
2018/02/06 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
2018/08/20 Javascript
vue-lazyload使用总结(推荐)
2018/11/01 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
[00:34]拔城逐梦,热血永恒!2020(秋)完美世界城市挑战赛报名开启
2020/10/09 DOTA
Python常用小技巧总结
2015/06/01 Python
python实现机器学习之元线性回归
2018/09/06 Python
python遍历文件夹找出文件夹后缀为py的文件方法
2018/10/21 Python
Python2与Python3的区别实例分析
2019/04/11 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
python IDLE添加行号显示教程
2020/04/25 Python
Django restful framework生成API文档过程详解
2020/11/12 Python
全球度假村:Club Med
2017/11/27 全球购物
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
你所在的项目是如何确定版本号的
2015/12/28 面试题
音乐教学反思
2014/02/02 职场文书
2015年汽车销售经理工作总结
2015/04/27 职场文书