900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 微信小程序:实现按钮点击事件

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

时间:2018-11-17 19:29:01

相关推荐

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

一、界面展示

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

二、源码分析

在找博客学习的时候发现一个快速创建文件夹的方式:在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文件中。函数书写格式如上所示。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。