微信小程序 参数传递详解


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延迟执行实现方法(setTimeout)
Dec 30 Javascript
Script的加载方法小结
Jan 12 Javascript
JQuery 选择器、过滤器介绍
Feb 14 Javascript
谈谈我对JavaScript DOM事件的理解
Dec 18 Javascript
基于jquery实现无限级树形菜单
Mar 22 Javascript
原生Javascript插件开发实践
Jan 09 Javascript
bootstrap下拉框动态赋值方法
Aug 10 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
Sep 27 Javascript
node.js实现简单的压缩/解压缩功能示例
Nov 05 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
Mar 03 Javascript
Vue select 绑定动态变量的实例讲解
Oct 22 Javascript
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
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生成加减算法方式的验证码实例
2018/03/12 PHP
TP5(thinkPHP框架)实现后台清除缓存功能示例
2019/05/29 PHP
php遍历目录下文件并按修改时间排序操作示例
2019/07/12 PHP
JavaScript null和undefined区别分析
2009/10/14 Javascript
JQuery对checkbox操作 (循环获取)
2011/05/20 Javascript
javascript继承之为什么要继承
2012/11/10 Javascript
JS+CSS实现一个气泡提示框
2013/08/18 Javascript
让IE8浏览器支持function.bind()方法
2014/10/16 Javascript
Javascript基础教程之函数对象和属性
2015/01/18 Javascript
JQuery中DOM事件合成用法实例分析
2015/06/13 Javascript
JavaScript事件学习小结(三)js事件对象
2016/06/09 Javascript
vue中子组件调用兄弟组件方法
2018/07/06 Javascript
vue中组件的过渡动画及实现代码
2018/11/21 Javascript
js实现一个页面多个倒计时的3种方法
2019/02/25 Javascript
javascript实现鼠标点击生成文字特效
2019/12/24 Javascript
在Vue中使用Echarts实例图的方法实例
2020/10/10 Javascript
js canvas实现俄罗斯方块
2020/10/11 Javascript
[05:00]第二届DOTA2亚洲邀请赛主赛事第三天比赛集锦.mp4
2017/04/04 DOTA
在Linux下调试Python代码的各种方法
2015/04/17 Python
python中解析json格式文件的方法示例
2017/05/03 Python
python openCV获取人脸部分并存储功能
2019/08/28 Python
wxPython:python首选的GUI库实例分享
2019/10/05 Python
python logging添加filter教程
2019/12/24 Python
关于Pytorch MaxUnpool2d中size操作方式
2020/01/03 Python
Django模板标签{% for %}循环,获取制定条数据实例
2020/05/14 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
python opencv实现图像配准与比较
2021/02/09 Python
基于Pytorch版yolov5的滑块验证码破解思路详解
2021/02/25 Python
英国最大线上综合鞋类商城:Office
2017/12/08 全球购物
专升本个人自我评价
2013/12/22 职场文书
小学二年级学生评语
2014/04/21 职场文书
大学活动总结模板
2014/07/10 职场文书
邀请函范文
2015/02/02 职场文书
Linux中Nginx的防盗链和优化的实现代码
2021/06/20 Servers
Springboot配置suffix指定mvc视图的后缀方法
2021/07/03 Java/Android
Python使用Opencv打开笔记本电脑摄像头报错解问题及解决
2022/06/21 Python