微信小程序开发之路（3）— 添加一个Button按钮点击事件

微信小程序开发之路（3）— 添加一个Button按钮点击事件

一、前言

之前文章我们设置的都是静态的页面，我们接下来需要增加一个点击Button按钮点击事件。
官方开发文档：小程序开发指南

二、增加一个Button按钮

将pages/hello/hello.wxml文件修改为如下所示，

<!--pages/hello/hello.wxml-->
<button type="primary">HelloWrold</button>

点击编译后可以看到Button按钮已经添加到页面中了，

三、添加点击事件

我们需要在Button中添加一个点击事件属性，如下所示，其属性为bindtap，属性值即为该点击时间的执行函数

<button type="primary" bindtap="onTapButton">HelloWrold</button>

然后我们需要在hello.js中添加点击执行函数onTapButton如下所示

  /**
   * Button按钮点击事件
   */
  onTapButton: function () {
    console.log("Helloworld.")
  },

编译执行，我们在模拟器中点击按钮，可以在控制台终端看到输出了"Helloworld."字符串

四、添加次数显示

在hello.wxml添加如下一行，用来显示点击次数，其中{{cnt}}是使用了微信小程序的数据绑定功能，

<text>这是第{{cnt}}次点击按钮</text>

我们在hello.js中添加cnt的变量定义，其初始值设为0，

然后我们在点击函数中修改其值，每点击一次便加一，然后使用setDat()函数将其页面的显示值改变

  /**
   * Button按钮点击事件
   */
  onTapButton: function () {    
    this.setData( {cnt : this.data.cnt + 1})
    console.log("Helloworld." + this.data.cnt)
  },

编译运行后可以看到如下所示运行成功的界面

五、附录

上一篇：微信小程序开发之路（2）— 新建一个Hello页面
下一篇：