微信小程序：实现按钮点击事件

一、界面展示

功能：点击了“选择视频按钮”按钮之后，控制台输出“你好”。

二、源码分析

在找博客学习的时候发现一个快速创建文件夹的方式：在app.json中直接注册一个页面test，然后保存。系统会自动生成一个test文件夹，并创建好页面的四个文件夹。

1. .wxml

<view class="page-body"><view class="btn-area" id="buttonContainer"><button bindtap="but" type="default" plain="true">选择视频</button><button type="default" plain="true">开始检测</button></view>
</view>

解读：

view、button称为组件，它们后面跟的：class、id、bindtap、type、plain为对应组件的属性
首先是创建了一个page-body视图容器，然后在这个容器中又创建了一个btn-area视图容器，专门放button。btn-area后面的id即为这个容器的变量名
在btn-area中，放置了两个按钮：选择视频、开始检测

按钮点击事件主要是靠“bindtap”属性完成的。用法如下：

bindtap = "<函数名>"

当点击这个按钮的时候，它就会调用对应的函数，实现相应的功能。

2. .js

Page({but: function(){console.log("你好")}
})

点击按钮完成相应的功能，实际上是逻辑层的工作，所以这个函数会写在.js文件中。函数书写格式如上所示。

微信小程序：实现按钮点击事件相关推荐

微信小程序解决view点击事件穿透地图map触发markertap
微信小程序中使用map组件,ios手机中点击地图上的view,会触发底下的markertap,只要底下如果有marker点的话. 这就造成了用户体验不是很好. 然后无意间我发现点击能滑动的scroll ...
微信小程序(2) 按钮点击跳转页面
微信小程序中,按钮也是<button></button>标签,它通过bindtap属性绑定点击事件: 然后在js里面注册这个回调函数: 回调函数里面通过 wx.navigate ...
微信小程序 button按钮怎么触发事件？ bindtap语法怎么使用？
在前端网页中我们需要触发一个事件如果按钮点击后调用函数,文本.图片.链接被点击后调用一个函数一个事件,我们都知道用click,可是微信小程序中的click是不存在的,他怎么才能和网页中一样的使用cli ...
微信小程序悬浮按钮-点击传参
1.js-组件 Component({data: {play: false,type:''},properties: {},methods: {changePlay(){let flag = !thi ...
微信小程序点击按钮弹出弹窗_微信小程序实现的点击按钮弹出底部上拉菜单功能示例...
本文实例讲述了微信小程序实现的点击按钮弹出底部上拉菜单功能.分享给大家供大家参考,具体如下: index.wxml 弹出action sheet {{item.txt}} 取消提示:您选择了菜单{ ...
微信小程序阻止冒泡点击_微信小程序bindtap事件与冒泡阻止详解
bindtap就是点击事件在.wxml文件绑定: cilck here 在一个组件的属性上添加bindtap并赋予一个值(一个函数名) 当点击该组件时, 会触发相应的函数执行在后台.js文件中定义 ...
【微信小程序入门到精通】— 事件绑定的详细解读
目录前言一.事件绑定导论二.常用事件三.事件对象属性列表 3.1 target 和 currentTarget 的区别 3.2 bindtap 的用法总结前言对于目前形式,微信小程序是一 ...
微信小程序——添加按钮格式
微信小程序--添加按钮步骤一:在wxml文件中添加按钮代码(图后提供可复制代码) <button class = "button_cat">炸炸呼呼</butt ...
uni-app 微信小程序分享按钮
uni-app 微信小程序分享按钮官方文档说明在 manifest.json 的 App SDK 配置里,勾选微信消息及朋友圈,并填写相关 appkey,微信 appkey 在需要分享的页面填写: ...
微信小程序退出按钮退出方式
微信小程序退出按钮退出方式 1,只能跳转到 tabBar配置的页面 wx.switchTab({url:''../xxx/xxx}) 2.返回上一级页面 (delta:返回的页面数,如果delta大于 ...