微信小程序 参数传递详解


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 和 CSS 实现脚注(Footnote)效果
Sep 09 Javascript
jQuery对象和Javascript对象之间转换的实例代码
Mar 20 Javascript
当鼠标移动时出现特效的JQuery代码
Nov 08 Javascript
百度地图API之本地搜索与范围搜索
Jul 30 Javascript
只需五句话搞定JavaScript作用域(经典)
Jul 26 Javascript
BootStrap的table表头固定tbody滚动的实例代码
Aug 24 Javascript
jquery网页日历显示控件calendar3.1使用详解
Nov 24 Javascript
概述如何实现一个简单的浏览器端js模块加载器
Dec 07 Javascript
jQuery实现鼠标滑过图片移动特效
Dec 08 Javascript
原生javascript实现连连看游戏
Jan 03 Javascript
Vuex中的Mutations的具体使用方法
Jun 01 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
Aug 07 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
NOD32 v2.70.32 简体中文封装版 提供下载了
2007/02/27 PHP
PHP持久连接mysql_pconnect()函数使用介绍
2012/02/05 PHP
关于PHP递归算法和应用方法介绍
2013/04/15 PHP
基于PHP一些十分严重的缺陷详解
2013/06/03 PHP
解析WordPress中控制用户登陆和判断用户登陆的PHP函数
2016/03/01 PHP
PHP的Yii框架中YiiBase入口类的扩展写法示例
2016/03/17 PHP
php编程中echo用逗号和用点号连接的区别
2016/03/26 PHP
PHP编辑器PhpStrom运行缓慢问题
2017/02/21 PHP
javascript 出生日期和身份证判断大全
2008/11/13 Javascript
Ajax 数据请求的简单分析
2011/04/05 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
2012/02/03 Javascript
理解JavaScript的变量的入门教程
2015/07/07 Javascript
实现JavaScript的组成----BOM和DOM详解
2016/05/18 Javascript
轻松搞定js表单验证
2016/10/13 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
2017/01/19 Javascript
基于require.js的使用(实例讲解)
2017/09/07 Javascript
Angular通过指令动态添加组件问题
2018/07/09 Javascript
vue+element树组件 实现树懒加载的过程详解
2019/10/21 Javascript
jquery html添加元素/删除元素操作实例详解
2020/05/20 jQuery
[03:07]DOTA2英雄基础教程 冰霜诅咒极寒幽魂
2013/12/06 DOTA
[37:47]IG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
使用Python开发windows GUI程序入门实例
2014/10/23 Python
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
Python之py2exe打包工具详解
2017/06/14 Python
Django admin 实现search_fields精确查询实例
2020/03/30 Python
Python实时监控网站浏览记录实现过程详解
2020/07/14 Python
浅析Python 序列化与反序列化
2020/08/05 Python
基于 Python 实践感知器分类算法
2021/01/07 Python
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
迷你唐卡软皮鞋:Minnetonka Moccasin
2018/05/01 全球购物
巴西宠物商店:Cobasi
2019/04/19 全球购物
架构师岗位职责
2013/11/18 职场文书
研修第一天随笔感言
2014/02/15 职场文书
学徒工职责
2014/03/06 职场文书
幼儿园教师教学反思
2016/03/02 职场文书
用Python爬取各大高校并可视化帮弟弟选大学,弟弟直呼牛X
2021/06/11 Python