转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-11/

我们以前在web开发的时候,web页面也有一些相关的事件,当然小程序要接触屏幕要进行一些点击和拖动事件。源码:https://github.com/limingios/wxProgram.git 中的No.6

小程序的事件触发

通过行为进行的人机交互方式
类似于html的onClick,onChange事件等等

  1. 官方的阐述
    >https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

  1. 程序演示点击
//events.js
//获取应用实例
const app = getApp() Page({
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
clickMe: function(){
console.log("你点击我这里出来了!")
}
})
<!events.wxml-->
<view class="container">
<text bindtap='clickMe'>点我点我我给console显示</text>
</view>

  1. 数据传递
    >通过view标签中的data来绑定数据
<!events.wxml-->
<view class="container">
<text data-forName='公众号:编程坑太多' data-forUser='开发人员' data-forDate='201800805' bindtap='clickMe'>点我点我我给console显示</text>
</view>
//events.js
//获取应用实例
const app = getApp() Page({
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
clickMe: function(e){
console.log("你点击我这里出来了!")
console.log(e)
console.log(e.currentTarget.dataset.fordate)
}
})
  • 仔细观察的老铁会发现一个问题
    >在wxml里面forData是大写,在js里面的fordata自动变成了小写,这就是微信自己帮咱们把驼峰形式做了转换。

PS:小程序的事件基本就是这样,事件使用,事件分类,事件详情,这三个方向来使用。

「小程序JAVA实战」 小程序的事件(11)的更多相关文章

  1. 「小程序JAVA实战」小程序的flex布局(22)

    转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-22/ 之前已经把小程序的框架说完了,接下来说说小程序的组件,在说组件之前,先说说布局吧.源码:ht ...

  2. 「小程序JAVA实战」小程序的留言和评价功能(70)

    转自:https://idig8.com/2018/10/28/xiaochengxujavashizhanxiaochengxudeliuyanhepingjiagongneng69/ 目前小程序这 ...

  3. 「小程序JAVA实战」小程序的举报功能开发(68)

    转自:https://idig8.com/2018/09/25/xiaochengxujavashizhanxiaochengxudeweixinapicaidancaozuo66-2/ 通过点击举报 ...

  4. 「小程序JAVA实战」小程序的个人信息作品,收藏,关注(66)

    转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudegerenxinxizuopinshoucangguanzhu65 ...

  5. 「小程序JAVA实战」小程序的关注功能(65)

    转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudeguanzhugongneng64/ 在个人页面,根据发布者个人和 ...

  6. 「小程序JAVA实战」小程序的视频点赞功能开发(62)

    转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudeshipindianzangongnengkaifa61/ 视频点 ...

  7. 「小程序JAVA实战」小程序的springboot后台拦截器(61)

    转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudespringboothoutailanjieqi60/ 之前咱们把 ...

  8. 「小程序JAVA实战」小程序首页视频(49)

    转自:https://idig8.com/2018/09/21/xiaochengxujavashizhanxiaochengxushouyeshipin48/ 视频显示的内容是视频的截图,用户的头像 ...

  9. 「小程序JAVA实战」小程序视频封面处理(48)

    转自:https://idig8.com/2018/09/16/xiaochengxujavashizhanxiaochengxushipinfengmianchuli47/ 截图这块,在微信小程序工 ...

  10. 「小程序JAVA实战」小程序上传短视频(46)

    转自:https://idig8.com/2018/09/14/xiaochengxujavashizhanxiaochengxushangchuanduanshipin45/ 个人信息:用户上传短视 ...

随机推荐

  1. 【scala】集和映射

    Scala同时提供了集(Set)和映射(Map)的可变和不可变的不同选择,但使用同样的简单名字,可以通过类继承的关系来区分可变和不可变版本. 如图所示,左边的为不可变集,右边的为可变集. //我们创建 ...

  2. LeetCode OJ:Reverse Linked List II(反转链表II)

    Reverse a linked list from position m to n. Do it in-place and in one-pass. For example:Given 1-> ...

  3. 条款10:让operator=返回一个reference to *this

    例如对象x,y,z.要实现连锁赋值(假设operator=已经重载过了):x = y = z,那么operator=则必须返回一个*this. 注意这个条款不仅仅适合于operator=,对于oper ...

  4. 【python】利用h5py存储数据

    两类容器:group & dataset group类似文件夹,字典. dataset是数据集,类似数组 支持更多的对外透明的存储特征,数据压缩,误差检测,分块传输 group下面可以是gro ...

  5. LINUX下的ssh登录之后的文件远程copy:scp命令(接前文ssh登录)

    先记录参考: 1:http://www.cnblogs.com/peida/archive/2013/03/15/2960802.html 2:http://www.vpser.net/manage/ ...

  6. DNS域名解析负载均衡

  7. Python之MySQLdb

    MySQLdb是用于Python链接Mysql数据库的接口,它实现了Python数据库API规范V2.0,基于MySql C API上建立的. 1. MySQLdb安装 (1)安装Mysql,参考上篇 ...

  8. envoy 测试试用

    备注: 为了简单测试使用的是docker 镜像进行的测试   1.  Dockerfile   FROM lyft/envoy:latest RUN apt-get update COPY envoy ...

  9. Spring AOP声明式事务异常回滚

    近日测试用例,发现这样一个现象:在业务代码中,有如下两种情况,比如:throw new RuntimeException("xxxxxxxxxxxx"); 事物回滚throw ne ...

  10. [转]你真的了解setTimeout和setInterval吗?

    原文: http://qingbob.com/difference-between-settimeout-setinterval/ setTimeout和setInterval的基本用法我们一带而过: ...