转自: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. 003——VUE操作元素属性

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. js & jquery数组介绍

    (转自:http://www.jb51.net/article/30793.htm) 1.数组的创建 var arr=new Array(); 2.查找数组中的元素 for(var i=0;i< ...

  3. Django rest_framewok框架的基本组件

    快速实例 序列化 视图三部曲 认证与权限组件 解析器 分页 回到顶部 快速实例 Quickstart 回到顶部 序列化 创建一个序列化类 简单使用 开发我们的Web API的第一件事是为我们的Web ...

  4. SVN提交出错--URL access forbidden for unknown reason

    使用SVN在eclipse中提交文件,但是出现错误,如下: URL access forbidden for unknown reasonsvn: Commit failed (details fol ...

  5. margin特性深入分析与总结

    今天写了个小demo,总体不难,但一些细节需要注意: 1)如下图所示,蓝色区域为白色box的padding,橙色区域为每条数据项的margin-bottom,那么如何解决最后一条记录margin-bo ...

  6. 记录一个因sqlmap导致的错误

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE sqlMap PUBLIC "- ...

  7. Unity的Update() 和 FixedUpdate()的区别

    Update() 和 FixedUpdate()在游戏中都会在更新的时候自动循环调用. 但是Update是在每次渲染新的一帧的时候才会调用,也就是说,这个函数的更新频率和设备的性能有关以及被渲染的物体 ...

  8. 使用vscode书写博客

    很早就开始使用过vscode了,不过在已经成熟的sublime的碾压下,vscode一直没有成为我的首选,今天为了更好的博客书写体验,我直接放弃了sublime,因为 sublime对中文支持不好,而 ...

  9. HDU - 4333 :Revolving Digits (扩展KMP经典题,问旋转后有多少个不同的数字小于它本身,等于它本身,大于它本身。)

    One day Silence is interested in revolving the digits of a positive integer. In the revolving operat ...

  10. loj #6136. 「2017 山东三轮集训 Day4」Left

    题目: 题解: 我们可以发现所有的交换器都是一个位置连接着下一层左侧的排序网络,另一个位置连着另一侧的排序网络. 而下一层是由两个更低阶的排序网络构成的. 两个网络互不干扰.所以我们可以通过第一行和最 ...