微信小程序 参数传递详解


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
Feb 25 Javascript
用JavaScript实现单继承和多继承的简单方法
Mar 29 Javascript
JQuery实现简单时尚快捷的气泡提示插件
Dec 20 Javascript
js动态删除div元素基本思路及实现代码
May 08 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
Jul 07 Javascript
AngularJS中指令的四种基本形式实例分析
Nov 22 Javascript
Vue.js实现输入框绑定的实例代码
Aug 24 Javascript
详解webpack编译多页面vue项目的配置问题
Dec 11 Javascript
angular多语言配置详解
May 16 Javascript
小程序实现上下移动切换位置
Sep 23 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 Javascript
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 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操作mysql数据库类
2014/12/08 PHP
教你在header中隐藏php的版本信息
2016/08/10 PHP
php array_keys 返回数组的键名
2016/10/25 PHP
jquery 页面全选框实践代码
2010/04/02 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
angular过滤器实现排序功能
2017/06/27 Javascript
常用的 JS 排序算法 整理版
2018/04/05 Javascript
解决vue中虚拟dom,无法实时更新的问题
2018/09/15 Javascript
vue 之 css module的使用方法
2018/12/04 Javascript
关于React动态加载路由处理的相关问题
2019/01/07 Javascript
vue使用codemirror的两种用法
2019/08/27 Javascript
Javascript实现鼠标点击冒泡特效
2019/12/24 Javascript
javascript设计模式之迭代器模式
2020/01/30 Javascript
使用Python装饰器在Django框架下去除冗余代码的教程
2015/04/16 Python
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
使用python生成目录树
2018/03/29 Python
Django管理员账号和密码忘记的完美解决方法
2018/12/06 Python
Python爬虫之UserAgent的使用实例
2019/02/21 Python
python 爬取学信网登录页面的例子
2019/08/13 Python
详解使用django-mama-cas快速搭建CAS服务的实现
2019/10/30 Python
python进程的状态、创建及使用方法详解
2019/12/06 Python
一款CSS3实现多功能下拉菜单(带分享按)的教程
2014/11/05 HTML / CSS
美国性感女装网站:bebe
2017/03/04 全球购物
美国葡萄酒网上商店:Martha Stewart Wine Co.
2019/03/17 全球购物
泰国Robinson百货官网:购买知名品牌的商品
2020/02/08 全球购物
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
大学生毕业自我评价范文分享
2013/11/11 职场文书
中学生学雷锋演讲稿
2014/04/26 职场文书
生日庆典策划方案
2014/06/02 职场文书
法定代表人授权委托书范文
2014/09/22 职场文书
党员教师四风问题对照检查材料
2014/09/26 职场文书
2016年端午节红领巾广播稿
2015/12/18 职场文书
Go语言-为什么返回值为接口类型,却返回结构体
2021/04/24 Golang
MySQL数据库压缩版本安装与配置详细教程
2021/05/21 MySQL
python之np.argmax()及对axis=0或者1的理解
2021/06/02 Python
Redis Lua脚本实现ip限流示例
2022/07/15 Redis